Cómo utilizar el editor de escenas Cocos Studio para crear la interfaz principal de "Magic Fantasy"
Lista de contenidos
1 editor de escenas cocostudio
2 Utilice cocostudio para completar la edición de escenas de "Cardcaptor Fantasy"
2.1 editor de interfaz de usuario Crea la interfaz principal del juego
2.2 Crea animación de fotogramas clave
2.3 "Integración" de recursos del editor de escenas
3 Carga los recursos de la escena en cocos2d-x y ejecuta
3.1 Cargar contenido de la escena
3.2 Reproducir animación en la escena
3.3 Algunas instrucciones de codificación para la escena
1.Editor de escena cocostudio
Los artículos anteriores "Uso de cocostudio para crear cuadros de secuencia cocos2d-x y animaciones esqueléticas" y "Cómo usar el editor de interfaz de usuario de cocostudio para implementar la interfaz de configuración de" Chaos Hall "" presentan cómo usar el editor de animación Al crear animaciones y usar editores de UI para crear interfaces de configuración de juegos, este artículo combinará los dos y usará el editor de escenas de cocostudio para crear escenas de juegos, que incluyen la UI del juego y animaciones, para personalizar la interfaz principal del juego.
2. Utilice cocostudio para completar la edición de la escena de "Cardcaptor Fantasy"
Para la construcción y el uso del entorno, consulte los artículos anteriores o siga la instalación oficial de la última versión. y métodos de uso en tiempo real.
Editor de UI 2.1 para crear la interfaz principal del juego
a. Cree un proyecto (nombre del proyecto: MysticalCard), importe los recursos de UI del proyecto y agregue un cuadro de imagen para configurar el fondo. imagen. Preste atención a configurar el tamaño del "lienzo" en la barra de herramientas (si es necesario), lo que determinará la resolución de su diseño. También debe prestar atención a los problemas de adaptación de la pantalla durante el tiempo de ejecución, como acercar y alejar, y la posición. compensación, etc., dependiendo de la situación específica.
b. Agregue elementos de interfaz de usuario, cuadros de imágenes, etc. a la interfaz, personalícelo según sus propias necesidades.
c.Precauciones durante la práctica
Agregar. controles Preste atención a la configuración de propiedades necesaria
La convención de nomenclatura del control, que nos ayudará a escribir código en segundo plano para obtener los elementos de la interfaz en el futuro
El "atributo interactivo " del control interactivo está activado
2.2 Crear 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
Crea un nuevo proyecto e importa recursos (en la "Ventana de recursos", haz clic en el ícono "Archivo" o "Carpeta", agrega el material requerido recursos)
En la "Ventana de recursos", haga clic en la imagen de mantenimiento de fotogramas de la animación de fotogramas clave y arrástrela a la "Ventana de renderizado"
Como se muestra en la siguiente figura:
b. Arrastre el primer fotograma clave al centro de la "Ventana de renderizado". Puede usar la barra de herramientas para colocarlo rápidamente en el centro de la ventana para que la imagen se muestre en el medio, lo que permite que la animación se posicione mejor.
c. Agregue otras imágenes de fotogramas. Tenga en cuenta que debemos seleccionar las imágenes restantes y luego "arrastrarlas" al objeto donde se encuentra el "Primer fotograma clave" en la vista "Estructura del objeto", como se muestra. en la figura siguiente.
La diferencia entre las operaciones de fotograma clave y animación esquelética: cuando usamos la animación esquelética, arrastramos y agregamos directamente cada elemento del esqueleto a la "ventana de renderizado" para colocar la relación posicional de cada hueso en el "Objeto". Vista "Estructura", aparece como una lista, marcando cada objeto óseo. Lo que cambia en diferentes fotogramas es la posición de cada objeto óseo para lograr el efecto de animación ósea.
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 la forma en que operan también es diferente.
Los recursos que exportan son los mismos y el uso es el mismo.
d. Después de agregar los fotogramas restantes, vemos que ya hay varios fotogramas de animación en la vista "Fotograma clave". Podemos reproducir la animación, ver el efecto y controlar la reproducción de la animación. modificando la velocidad "rate".
Exportar recursos de animación. Los archivos de recursos exportados los podemos cargar directamente en Cocos2d-x en forma de código, y luego la animación también se puede agregar a la escena como un elemento. en el editor de escenas. En el editor, el siguiente contenido explica cómo usar el editor de escenas para cargar una animación.
2.3 "Integración" de recursos del editor de escenas
El uso de CocoStudio puede ayudar muy bien a 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 UI pueden ser editados por varias personas y, finalmente, una persona puede integrar los recursos. Esta es la ventaja del editor de escenas. Además de admitir el editor de animación y el editor de UI que vienen con CocoStudio, también puede ser compatible. Recursos de mapas de Tmx, recursos de efectos de partículas del editor de partículas, recursos de sonido, etc., y se están ampliando constantemente.
A continuación se mostrará cómo integrar la animación y los recursos de la interfaz 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 el adecuado.
b. Arrastramos un control de UI al lienzo, que sirve como 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. El método de importación es el mismo que el del editor de UI que importa recursos, como se muestra a continuación:
d. Asigne un valor al atributo "Archivo" del control de la interfaz de usuario: encontramos el recurso de la interfaz de usuario exportado por el editor de la interfaz de usuario en su directorio que contiene recursos del archivo json (como "MysticalCard_1.json" aquí) y lo arrastramos. Vaya a las propiedades del archivo del control de la interfaz de usuario, como se muestra en la siguiente figura:
e. Los pasos anteriores han importado los recursos de la interfaz de usuario a la escena y ahora necesita agregar los recursos de animación creados previamente. .
Importamos los archivos de recursos de animación exportados por el editor de animación de la misma forma.
Arrastre un control de hueso a la interfaz de escena, como se muestra en la siguiente figura.
Asigne un valor a la propiedad "Archivo" del control óseo, cuyo 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. Esto significa que no es necesario agregar manualmente todos los archivos de recursos al código Cocos2d. .x, 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, ahora debe cargarlo en el proyecto Cocos2d-x y. escribir la implementación del código backend.
3. Cargar recursos de escena en Cocos2d-x y ejecutarlos
3.1 Cargar contenido de escena
En los pasos anteriores, se utilizó CocoStudio para crear la interfaz de usuario. Animación, también hay una escena, y es muy simple y conveniente ejecutarla en un proyecto real. Solo se necesitan unas pocas líneas de código para cargarla en el proyecto. Por supuesto, debemos agregar la escena antes. recursos del editor (el directorio "Recursos" en el directorio del proyecto de escena, que contendrá un archivo json) al directorio de recursos del proyecto:
// Cargar recursos de escena
CCNode * pNode = CCJsonReader::sharedJsonReader()->createNodeWithJsonFile(“McScene.json”);
this->addChild(pNode);
Leer y analizar json a través de CCJsonReader, así obtener el nodo contenido en la escena y agréguelo directamente a la escena actual para ejecutar.
3.2 Reproducir animación en la escena
El componente de animación del recurso de escena cargado de forma predeterminada no se reproduce. Debe obtener manualmente el objeto del componente de animación y luego llamar a su método de reproducción. , este paso también es muy complicado:
// pNode es el nodo raíz del recurso de escena obtenido previamente. El objeto de animación se obtiene a través de este nodo. El método de adquisición está determinado por el conjunto de relaciones jerárquicas. en el editor de escenas
CCComRender *pLoadRender = (CCComRender*)(pNode->getChildByTag(1)->getChildByTag(1)->getComponent("CCArmature")); CCArmature* armLoad = (CCArmature*)(pLoadRender ->getRender());
armLoad->getAnimation()->playByIndex(0);
3.3 Algunas instrucciones de codificación para el escena
Usar CocoStudio es para ayudarnos a establecer rápidamente un prototipo de interfaz de usuario y luego, a través de la codificación, podemos obtener cualquier elemento dentro del objeto, modificar sus valores de atributos y llamar a sus métodos, al igual que el método de reproducción. una animación como se muestra arriba. Los pasos son los siguientes:
Leer el archivo json a través de la clase CCJsonReader analizará automáticamente el objeto de construcción y devolverá un nodo CCNode
Cualquier elemento se puede obtener a través de este nodo CCNode. De hecho, es un árbol, la diferencia es la relación jerárquica (la posición del nodo del árbol)
Encuentre la "rama" donde se encuentra el objeto requerido y luego obtenga el objeto CCComRender a través de getComponent método
Pasar El método getRender de CCComRender obtiene el objeto final
Después de obtener el objeto específico que necesitamos, podemos alinearlo, establecer propiedades, llamar métodos, etc.
Reproducido sólo como referencia,