Para concluir esta serie de tres partes, le mostraré cómo aprovechar la función de Objeto de archivo para acelerar el proceso de animación de múltiples activos para su juego, y cómo exportar sus gráficos para usarlos en un motor de juego.

 

En este prototipo, todas las piezas del rompecabezas comparten la misma animación.

En los siguientes pasos, demostraré una forma eficiente de realizar esta tarea.

Animar un objeto Proxy

Primero, comencemos creando un gráfico proxy / plantilla que luego será reemplazado por gráficos coloridos. Simplemente hice una copia de la pieza roja y la convertí a gris. Las piezas de este rompecabezas están hechas de 2 partes: el gato y el bloque.

 

Exporte los gráficos como PNG transparente.

 

Ahora cree un NUEVO DOCUMENTO y use ARCHIVO - IMPORTAR - CREAR ARCHIVO OBJETO para colocar los gráficos exportados como Objetos de archivo.

 

Habilite el panel Línea de tiempo y Cree una NUEVA LÍNEA DE TIEMPO. Al igual que con el personaje, puedes tener diferentes secuencias de animación para las piezas. Comenzaré con el bucle de animación IDLE.

 

 

No olvide: para habilitar la INTERPOLACIÓN, debe seleccionar la Capa y hacer clic en HABILITAR MARCOS CLAVE EN ESTA CAPA.

 

Usando el mismo método que usé anteriormente, animé este bucle que se reproduce cuando el jugador necesita una pista. Básicamente es un Squash y Stretch de las partes, pero en dos velocidades ligeramente diferentes.

 

Crearé un nuevo CRONOGRAMA para agregar otra secuencia de animación, esta vez un movimiento para cuando la Pieza "explota" (o abandona el escenario).

 

A continuación puede ver el progreso clave de esta animación:

 

Pude animar la pieza interior desaparece usando la propiedad Opacidad. Cuando Opacity está animado, se muestra un medio diamante debajo del fotograma clave.

 

Sentí que faltaba algo, así que agregué una capa adicional y dibujé esta forma de 'giro' para rotarla con el gráfico del gato. No olvide convertir cualquier dibujo nuevo en un OBJETO DE ARCHIVO antes de intentar animar con el modo Interpolación.

 

A continuación puedes ver el progreso de esta animación; El gráfico giratorio se cambió a blanco y la pieza exterior tenía la opacidad animada, por lo que toda la pieza desaparece de la escena del juego.

 

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Sustitución de los gráficos de la animación

Okay. Entonces, si esa es nuestra animación para este activo, ¿cómo podemos propagarlo a todos los demás gráficos del juego?

Déjame mostrarte un método simple.

 

Comencemos exportando las piezas restantes con las que va a reemplazar el objeto proxy gris. Esos serán los diferentes colores de las piezas (rojo, azul, verde y amarillo) que tendré en el escenario principal de este rompecabezas, como se ve a continuación.

 

Ahora, de vuelta al archivo en el que crea las animaciones, SELECCIONE la capa de la pieza que desea reemplazar y elija OBJETO DE ARCHIVO - CAMBIAR ARCHIVO DE OBJETO DE ARCHIVO.

 

Localice los gráficos en color para la parte interna (gato) y la parte externa (marco): los gráficos se reemplazarán Y las animaciones aún funcionan.

 

Solo tienes que repetir el proceso para cada pieza de color.

 

Aquí están todas las piezas reemplazadas y listas para nuestro juego:

 

Eso es. Mientras NO GUARDE su archivo fuente (el que tiene los gráficos grises animados), puede usarlo como plantilla y reemplazar el contenido con otros gráficos o variaciones que necesite mientras conserva la animación.

 

Esta técnica se puede usar en juegos con varios personajes, por ejemplo: primero crea una figura de plantilla (proxy), completa con cada pieza y animación que desee en el juego, y luego puede agregar 'máscaras' a estos gráficos, aplicando el Los mismos bucles animados.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Exportando las animaciones

Esto no es obligatorio, pero le sugiero que optimice las imágenes que va a exportar. Una cosa muy importante es asegurarse de que el tema de la animación esté confinado en un "cuadro delimitador", sin transparencia adicional (espacio vacío) alrededor.

 

Un buen truco que puede hacer es: crear un cuadro de selección alrededor de su gráfico y mover la línea de tiempo de la animación para verificar si hay píxeles fuera de la selección.

 

En el siguiente ejemplo: la imagen de la izquierda muestra cómo la parte superior de la cabeza está fuera del área de selección; la imagen de la derecha muestra cómo está el sprite dentro del área de selección a través de toda la animación.

 

Con la Selección aún activa, vaya a ARCHIVO - ANIMACIÓN DE EXPORTACIÓN y elija SECUENCIA DE IMAGEN.

 

En el siguiente cuadro de diálogo, busque la carpeta para exportar las imágenes y asegúrese de prestar atención a estas opciones:

 

• Nombramiento del archivo: agregue un prefijo para el nombre de sus archivos;

 

-Seleccione el formato PNG para mantener la transparencia;

 

-En CONFIGURACIÓN DE TAMAÑO, elija ÁREA DE SELECCIÓN para exportar las imágenes dentro del cuadro delimitador que creó; (vea la nota a continuación sobre esta opción)

 

Si es necesario, también puede cambiar el tamaño de sus sprites desde esta pantalla;

 

// NOTA: la opción Configuración de tamaño - Área de selección solo está disponible en la versión Clip Studio Paint EX; Si tiene la versión Pro, puede CORTAR la imagen al tamaño correcto antes de exportar. //

¡Hecho! Ahora puedes cargar esas imágenes en tu motor de juego.

 

Casi todos los kits de herramientas de creación de juegos usan secuencias de imágenes como una forma de mostrar un personaje animado en la pantalla. Esta es la técnica más común, pero es bueno recordar que la optimización (esta palabra nuevamente) siempre es preferible cuando se trata del desarrollo de juegos.

 

En el siguiente paso, le mostraré cómo usar una herramienta independiente gratuita para crear hojas de Sprite e imágenes Atlas.

 

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Creación de imágenes Atlas y SpriteSheets

En un escenario de Desarrollo de juegos, Sprite Sheets y Atlas Images ayudan a reducir la potencia de procesamiento utilizada para cargar una imagen en la memoria del sistema.

 

En lugar de cargar diferentes PNG para mostrar la animación, puede proporcionar una sola imagen que contenga todos los cuadros de la animación Y un archivo de datos con coordenadas e información para que el motor pueda "leer" la hoja de sprites y localizar las imágenes específicas en el momento específico.

 

Las imágenes de Atlas son las mismas, pero en lugar de cuadros de animación, solo empaqueta varios gráficos de un juego en una sola imagen.

 

Desafortunadamente, no hay una manera fácil (automática) de crear una hoja de sprites o una imagen Atlas usando Clip Studio Paint.

 

Para este ejemplo, usaré una herramienta llamada "Free Texture Packer". Es una herramienta gratuita e incluso hay una versión en línea que se puede utilizar (enlace en las notas al pie de este artículo).

 

Aquí hay un paso a paso sobre cómo usarlo:

 

[ PASO 1.]

 

Abre el programa y carga tus imágenes; También puede arrastrar y soltar a esta área (azul).

 

[ PASO 2.]

 

Una vez que se cargan las imágenes, puede comenzar a ajustar las propiedades de su Hoja de Sprite. DEBE hablar con su programador o artista principal para obtener los detalles sobre cómo se importan los activos al motor.

 

Las opciones más importantes aquí son:

 

• Ancho / Altura son el tamaño de su spritesheet / atlas; los motores de juego generalmente funcionan con mapas de 256,512,1024,2048 ... la opción PODER DE DOS debe verificarse la mayoría de las veces, también TAMAÑO FIJO si necesita forzar que sus texturas tengan el mismo tamaño.

 

• PERMITIR ROTACIÓN, PERMITIR RECORTAR y MODO RECORTAR se puede cambiar para que quepa más imágenes dentro de la hoja de sprites. Los modos de recorte y rotación habilitados se prefieren con imágenes estáticas (atlas); para las animaciones estás más seguro con las apagadas para que los sprites estén alineados y tengan el mismo espacio transparente a su alrededor.

En mi ejemplo a continuación, elijo empaquetar la animación inactiva Chica en una textura cuadrada de 2048x2048.

 

Para obtener una vista previa de su animación dentro de la herramienta, seleccione todas las imágenes en el panel derecho y haga clic en el botón ANIMACIONES. Usa el control deslizante para controlar la velocidad.

 

Para finalizar el proceso, seleccione el FORMATO de su archivo de datos / coordenadas (esto será informado por su programador y el motor que está utilizando), ubique la Carpeta para guardar y haga clic en EXPORTAR.

 

El resultado final será una imagen de mapa de textura y un archivo de datos (que se puede abrir en cualquier editor de texto), que deben tener al mismo tiempo.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 

Conclusión

A través de los años, he estado usando Flash, Animate y, más recientemente, Spine para crear esas animaciones simples para prototipos y juegos independientes, pero cuando Celsys agregó Interpolation como una función de Animación, finalmente vi la oportunidad de simplificar más mi flujo de trabajo.

 

Espero que esta serie sea informativa y que puedas usar cualquiera de estas técnicas para comenzar tu primer proyecto de juego.

 

Vale la pena recordar que este tipo de flujo de trabajo de animación se puede usar para crear activos para otros tipos de proyectos: gráficos animados para su canal Stream o Youtube, pequeños gifs y memes divertidos para las redes sociales o incluso cortos de animación con el estilo recortado.

 

Por favor, si crea algo después de leer este artículo, hágamelo saber para que pueda promocionar su trabajo en mi feed.

 

Gracias por leer.

Nos vemos en el próximo Consejo.

 

• Dado

 

Descargar material y enlaces