Cómo utilizar el editor de escenas Cocos Studio para crear la interfaz principal de Magic Card Fantasy

Los artículos anteriores "Uso de cocostudio para crear fotogramas de secuencia cocos2d-x y animaciones de esqueleto" y "Cómo utilizar el editor de interfaz de usuario de cocostudio para implementar la interfaz de configuración de Doudou Pavilion" introdujeron cómo utilizarlo. el editor de animación para crear animaciones y use el editor de interfaz de usuario para crear la interfaz de configuración del juego. Este artículo combina los dos, utiliza el editor de escenas cocostudio para crear una escena de juego, incluida la interfaz de usuario y la animación del juego, y personaliza la interfaz principal del juego.

2. Utiliza cocostudio para completar la edición de escenas de Magic Card Fantasy.

Para el establecimiento y uso del entorno, puede consultar artículos anteriores o seguir la instalación y uso de la última versión oficial en tiempo real.

Editor de UI 2.1 para crear la interfaz principal del juego

A. Cree un proyecto (nombre del proyecto: Mystery Card), importe los recursos de UI del proyecto, agregue un cuadro de imagen para configurar el fondo. imagen. Presta atención a configurar el tamaño del "lienzo" en la barra de herramientas (si es necesario), esto determinará la resolución de tu diseño. Durante la operación, también debe prestar atención a la adaptación de la pantalla, como acercar y alejar, desplazamiento de posición, etc. , dependiendo de las circunstancias específicas.

B. Agregar elementos de interfaz de usuario, cuadros de imágenes, etc. Vaya a la interfaz y personalícela según sus necesidades.

C. Precauciones en la práctica

Al agregar controles, preste atención a la configuración de propiedades necesaria.

Control, esto nos ayudará a escribir código detrás de escena para obtener elementos de la interfaz en el futuro.

La propiedad interactiva del control interactivo está activada.

2.2 Creación de animación de fotogramas clave

Además de algunos controles de UI necesarios en la interfaz principal, también necesitamos un efecto de animación de "indicador de diálogo". Esta es una animación de cuadros.

A.

Abre CocoStudio e inicia el editor de animación.

Cree un nuevo proyecto e importe los recursos (en la ventana de recursos, haga clic en la pestaña Archivo o Carpeta para agregar los recursos materiales necesarios).

En la "Ventana de recursos", haga clic en la imagen del fotograma de la animación del fotograma clave y arrástrela a la "Ventana de renderizado".

B. Arrastra el primer fotograma clave al centro de la ventana de renderizado. Puede utilizar la barra de herramientas para posicionar rápidamente el centro de la ventana de modo que la imagen se muestre en el medio, lo que permite un mejor posicionamiento de la animación.

C. Añade otros marcos de fotos. Tenga en cuenta que debemos seleccionar las imágenes restantes y "arrastrarlas" al objeto donde está el "Primer fotograma clave" en la vista Estructura del objeto.

La diferencia operativa entre fotogramas clave y animación esquelética: cuando usamos la animación esquelética, arrastramos y agregamos directamente todos los elementos del esqueleto a la "ventana de renderizado" para mostrar la relación posicional de cada hueso, mientras que en el Vista "Estructura del objeto", se muestra como una lista, que representa cada objeto E-bone. Diferentes cuadros cambian la posición de cada objeto óseo para lograr el efecto de animación esquelética.

Sin embargo, en la animación de fotogramas clave, solo hay una estructura de objeto, y lo que se modifica en cada fotograma no es su posición sino su contenido de visualización. Ésta es la diferencia entre los dos y los métodos de operación también son diferentes. Los recursos que producen son los mismos y su uso es el mismo.

D. Después de agregar los cuadros restantes, podemos ver que ya hay varios cuadros de animación en la vista "Fotograma clave". Podemos reproducir la animación, verificar el efecto y controlar la velocidad de reproducción. animación modificando la "Tasa".

Exportar recursos de animación. El archivo de recursos exportado se puede cargar directamente en Cocos2d-x mediante código y luego se puede reproducir su animación. También se puede agregar al editor de escenas como un elemento en el editor de escenas. El siguiente contenido explica cómo cargar animaciones usando el editor de escenas.

2.3 "Integración" de recursos de edición de escenas

CocoStudio puede ayudar con la división del trabajo y la cooperación en el proceso de desarrollo del juego. El editor de animación y el editor de interfaz de usuario pueden ser editados por varias personas y la última persona integra los recursos. Esta es la ventaja del editor de escenas. Además de admitir el editor de animación y el editor de interfaz de usuario del propio CocoStudio, también puede admitir los recursos de textura Tmx, los recursos de efectos de partículas y los recursos de sonido del editor de partículas, y aún se está ampliando.

A continuación se mostrará cómo integrar la animación y los recursos de UI que creamos previamente en el editor de escenas para lograr el efecto de ejecución de una de nuestras escenas. Los pasos son los siguientes:

A. Inicie el editor de escenas y cree un nuevo proyecto de escena. y establezca el tamaño del lienzo. El tamaño del lienzo debe ser apropiado.

B. Arrastramos un control de UI al lienzo, y el lienzo actúa como un host para los recursos de UI que exportamos antes.

C. Importamos los recursos exportados por el editor de UI anterior al proyecto de escena actual de la misma manera que el editor de UI, como se muestra a continuación.

D. Asigne un valor al atributo "archivo" del control de UI: encontramos los recursos de UI exportados por el editor de UI en la vista de recursos, y el directorio contiene recursos de archivos json (como " Mysterious Card_ 1. json"), arrástrelo a la propiedad de archivo del control UI, como se muestra en la siguiente figura:

Los recursos E.UI se importaron a la escena en los pasos anteriores, ahora Es necesario agregar los recursos de animación creados previamente.

Utilizamos el mismo método para importar los archivos de recursos de animación exportados por el editor de animación.

Arrastre el control óseo a la interfaz de escena, como se muestra en la siguiente figura.

Asigne un valor al atributo "archivo" del control esqueleto, y su valor es el archivo ExportJson (o archivo Json, dependiendo de cómo se exporte el recurso de animación) en el recurso de animación.

F. Efecto de ejecución: después de crear la escena, podemos hacer clic en el botón Ejecutar en la barra de herramientas para ver el efecto, lo que significa que no es necesario agregar manualmente todos los archivos de recursos a Cocos2d-x en el archivo. Código. Puedes ver el efecto.

En el efecto de ejecución, todos los controles son operables, como se muestra a continuación, pero solo hay un efecto de clic. Si necesita implementar su lógica, debe cargarla en el proyecto Cocos2d-x y escribir código de fondo para implementarla.

3. Cargue los recursos de la escena en Cocos2d-x y ejecútelo.

3.1 Cargar contenido de la escena

En los pasos anteriores, CocoStudio se utiliza para crear UI, animaciones y escenas. Es muy simple y conveniente de ejecutar en proyectos reales y solo requiere cargar unas pocas líneas de código en el proyecto. Por supuesto, antes de eso, necesitamos copiar los recursos del editor de escena (el directorio "Recursos" en el directorio del proyecto de escena, que contendrá un archivo json) al directorio de recursos del proyecto:

123456789101112131414 & lt; OL style = " COLOR:# 5c 5c 5c " class = DP-c><"heredar" class = alt>& ltSPAN style = "FONDO-COLOR:heredar;Color:Negro" ><SPAN style = "FONDO-COLOR:heredar" ;COLOR:# 008200 " class = comment & gt; //Cargar recursos de escena

Lea y analice json a través de CCJsonReader para obtener el contenido del nodo en la escena y agregarlo directamente a la escena actual en operación.

3.2 Reproducir animación en la escena

No reproduce el componente de animación de recursos de escena cargado por defecto. Debe obtener manualmente el objeto del componente de animación y luego llamar a su método de reproducción.

Por supuesto, este paso también es muy simple:

12345678910112131415161718192021222324252627<OL style = "COLOR:# 5c 5c 5c" class=DP-c><"Herencia" class=alt><SPAN style = " BACKGROUND-COLOR: heredar; Color: negro " >; & ltSPAN style = " BACKGROUND-COLOR:inherit; COLOR:# 008200 " class = comentario > // pNode es el nodo raíz del recurso de escena obtenido previamente, a través de Este nodo obtiene objetos de animación, y el método de adquisición depende de la relación jerárquica establecida en la edición de escenas

3.3 Algunas instrucciones de codificación para escenas

CocoStudio se utiliza para ayudarnos a construir rápidamente un prototipo de interfaz de usuario, y luego podemos obtener cualquier elemento dentro del objeto a través de la codificación, modifique los valores de sus atributos y llame a sus métodos, tal como el método de reproducción de una animación que se muestra arriba. Los pasos son los siguientes:

La lectura de un archivo json a través de la clase CCJsonReader analizará automáticamente el objeto de compilación y devolverá un nodo CCNode.

Cualquier elemento se puede obtener a través de este nodo CCNode. Este nodo es en realidad un árbol. La diferencia es la relación jerárquica (la ubicación del nodo del árbol).

Encuentre la ubicación donde se encuentra. Se ubica el objeto requerido en "Branch" y luego obtiene el objeto CCComRender a través del método getComponent.

Obtiene el objeto final mediante el método getRender de CCComRender.

Después de obtener el objeto específico que necesitamos, podemos alinear el césped, establecer propiedades, llamar métodos, etc.