Cómo utilizar el editor de escenas CocoStudio para crear la interfaz principal de "Cardcaptor Fantasy"

1 CocoStudio Scene Editor

Utilice CocoStudio Scene Editor para crear escenas de juegos, que incluyen la interfaz de usuario y la animación del juego, para personalizar la interfaz principal del juego.

2 Utilice CocoStudio para completar la edición de escenas de "Cardcaptor Fantasy"

Para la construcción y el uso del entorno, consulte los artículos anteriores o siga los métodos oficiales de instalación y uso de la última versión. en tiempo real.

Editor de UI 2.1 para crear la interfaz principal del juego

Cree un proyecto (nombre del proyecto: MysticalCard), importe los recursos de UI del proyecto y agregue un cuadro de imagen para configurar la imagen de fondo. 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.

Agregue elementos de interfaz de usuario, cuadros de imágenes, etc. a la interfaz; personalícelos según sus propias necesidades

Notas durante la práctica

Preste atención a los atributos necesarios cuando agregar controles Establecer la convención de nomenclatura del control

Esto nos ayudará a escribir código en segundo plano para obtener los elementos de la interfaz en el futuro

Habilitar el "atributo interactivo" del control interactivo

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.

Preparación.

Como se muestra en la siguiente figura:

Abra CocoStudio, inicie el editor de animación

Cree un nuevo proyecto y luego importe los recursos (en la sección "Recursos "Ventana", haga clic en el icono "Archivo" o "Carpeta" para agregar los recursos materiales necesarios)

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 " Ventana de renderizado"

Arrastra 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.

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 imagen. figura a continuación.

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.

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 velocidad de reproducción de la animación modificando. la "Tarifa".

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 los recursos de animación y interfaz de usuario que creamos anteriormente en el editor de escenas para lograr el efecto de ejecución de una de nuestras escenas. Los pasos son los siguientes:

1. 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.

2. Arrastramos un control de UI al lienzo, que sirve como host para los recursos de UI que exportamos antes.