Lo que hemos aprendido hasta ahora

En la primera parte de esta serie, aprendimos cómo es posible crear, editar y exportar sprites desde Clip Studio Paint.

Ahora es el momento de usar el software para crear algunos sprites animados.

 

En este momento, en la industria, la animación para juegos 2D generalmente se realiza con sistemas 2D Bones y Mesh Deformation: las piezas de un sprite se importan en un programa específico que crea una malla poligonal a su alrededor. Los huesos están asociados con diferentes áreas de esta malla, ofreciendo un método para "deformar" el sprite como si fuera un objeto 3D. El resultado es una animación súper suave que solo necesita una sola imagen para toda la animación del sprite.

 

Si bien los sistemas de animación ósea 2D son la tendencia actual, el sistema de animación recortado todavía se puede utilizar para crear sprites para juegos. Es una técnica que ahorra tiempo y que puede usar en sus primeros juegos, prototipos o incluso en un juego completo que puede tener un estilo artístico compatible.

 

Este también es un método muy accesible para crear animaciones para videos, GIF para redes sociales o gráficos para su canal de transmisión.

 

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

Animación recortada en Clip Studio Paint

Desde la versión 1.84, ahora es posible animar el contenido de una capa mediante interpolación. Esta es una gran adición para el conjunto de herramientas Animación.

Aprendamos esta nueva característica haciendo una divertida animación de pelota que rebota:

 

1. Cree un nuevo archivo y dibuje una pelota para rebotar.

2. Asegúrese de que su panel Línea de tiempo esté visible y haga clic en este botón NUEVA LÍNEA DE TIEMPO; simplemente presione OK en el diálogo de confirmación.

3. Haga clic en este pequeño botón de "papel en ejecución" para HABILITAR EL MARCO CLAVE EN ESTA CAPA; Tenga en cuenta el pequeño icono agregado a la capa actual.

 

4. Cambie su Subherramienta a OPERACIÓN - OBJETO y notará las propiedades que se pueden animar mientras la interpolación está activa.

 

5. Volviendo a la línea de tiempo, establezcamos un fotograma clave para esta primera pose.

Simplemente puede mover el gráfico Ball un poco para que el programa lo registre como un fotograma clave. Notará que un icono de diamante azul está ahora en la línea de tiempo Y en las propiedades del objeto.

6. Mueva la línea de tiempo a la mitad del tiempo (fotograma 10 en mi ejemplo) y mueva la bola hacia arriba desde el suelo. Recuerde, primero mueva la línea de tiempo al cuadro 10 y luego el objeto. Puede mantener presionada la tecla MAYÚS para restringir el movimiento de la pelota en el eje Y.

 

7. Ahora mueva su línea de tiempo al cuadro 20 y coloque la pelota nuevamente en el suelo;

Presiona Play y la pequeña Red Ball está viva.

8. Para hacer que el rebote de la pelota sea más interesante, puede ajustar el tiempo (la duración / exposición de cada fotograma clave) para agregar la sensación de "peso" al objeto.

De vuelta a la línea de tiempo, HAGA CLIC Y ARRASTRE el fotograma clave del medio más cerca del fotograma final: la pelota pasará más tiempo en el movimiento ascendente Y caerá más rápido ...

 

9. Ahora hagámoslo un poco más de caricatura agregando Squash y Stretch a esta animación.

De vuelta a la línea de tiempo, en medio del movimiento ascendente de la pelota (cuadro 7 en mi ejemplo), ajuste su forma usando la ESCALA - estire la pelota solo en el eje Y.

Recuerde desactivar ASPECTO FIJO para habilitar la escala no uniforme. Mantener el volumen de la forma; si estira en X, comprima en Y y viceversa.

 

10. Para terminar este ejemplo, agregué dos cuadros más de Squash y Stretch antes del último; en el cuadro 18 hice la pelota más larga en Y (estiramiento) y en el cuadro 19 la hice más ancha en X (squash), esto hace que la pelota reaccione a la gravedad y al impacto en el suelo.

Aquí están las poses espaciadas uniformemente y sin la interpolación para que pueda ver la deformación en cada cuadro.

 

Y aquí está (abajo) la animación final con interpolación y algunos ajustes en el tiempo (todo el movimiento se hace más rápido acortando la línea de tiempo y agregando un marco adicional, sosteniendo la pelota en el cielo antes de la caída).

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

Antes de animar al personaje, algo sobre OBJETOS DE ARCHIVO

Mientras anima la Bouncing Ball, probablemente note algo: cuando usa la herramienta TRANSFORMAR (para rotar, escalar y mover) usa toda el área del lienzo para la deformación y no solo la forma del objeto.

 

Esto puede ser un problema si planeamos animar objetos más complejos. En estas situaciones, es mejor animar OBJETOS DE ARCHIVO en lugar de capas comunes.

 

// Acerca de esta imagen: IZQUIERDA: la bola roja está en una capa y la herramienta de transformación utilizará todo el área del documento como referencia para transformar el objeto.

DERECHA: la bola verde es un Objeto de archivo, y la transformación ahora se basa en el tamaño del objeto.

 

Un OBJETO DE ARCHIVO es un contenedor con contenido de un archivo externo .CLIP. Este (el objeto de archivo) se puede colocar en cualquier documento. Cualquier cambio en el archivo fuente se reflejará en el documento donde se está utilizando el objeto de archivo.

 

Como ejemplo, comencemos a crear nuestro personaje principal usando OBJETOS DE ARCHIVO. Este proceso es equivalente a manipular un personaje en un software 3D y / o cualquier herramienta de animación esquelética.

 

Armando tu Sprite de Juego usando Objetos de Archivo

Comencemos creando un NUEVO DOCUMENTO y pegando una imagen completa de su sprite, para que podamos usarlo como plantilla para crear el equipo. Ajuste el tamaño del lienzo para que tenga espacio para la animación que planea hacer.

Para importar las piezas del sprite, use la opción ARCHIVO - IMPORTAR - CREAR ARCHIVO OBJETO. Importe los archivos PNG o .CLIP transparentes que creó en la primera parte de este tutorial.

También puede HACER CLIC Y ARRASTRE los archivos de su Carpeta a la paleta ITEM BANK.

 

 

Coloque todos los sprites en el Lienzo y use la subherramienta OPERACIÓN - OBJETO para organizar las partes.

Si necesita ajustar el orden Z de las partes (qué objeto está delante / detrás de otro) simplemente mueva la capa correspondiente hacia arriba o hacia abajo en la pila de capas. Para seleccionar capas rápidamente, puede mantener presionadas las teclas CTRL + MAYÚS y hacer clic en el lienzo.

// Acerca de esta imagen: IZQUIERDA: ordenamiento de capa incorrecto, DERECHA: superposición correcta de las partes.

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

Ahora preparemos el flujo de trabajo de animación. Le recomiendo que mueva su paleta de línea de tiempo a uno de los lados de su lienzo; es más fácil entender lo que se está animando.

Haga clic en NEW TIMELINE y establezca algunas propiedades de su animación, por ejemplo: el nombre de la secuencia de animación (Idle, Run, Walk); la velocidad de fotogramas de su animación (12 o 15 fps son buenos para este estilo de recorte) y la cantidad de fotogramas que va a usar (comenzaré con 20).

 

Puede hacer que la línea de tiempo sea aún más fácil de administrar cambiando la opción TAMAÑO DE LA MINIATURA a NINGUNO; esta opción solo muestra el nombre de cada parte, similar a otros paquetes de animación (Flash, Animate, Blender, por ejemplo ...)

 

Para poder animar con Interpolación en Clip Studio Paint, deberá habilitarlo en la línea de tiempo. Seleccione TODAS las capas y haga clic en HABILITAR MARCO CLAVE EN ESTA CAPA. Notarás que cambia el ícono de Capa.

Ahora algo que tienes que hacer en TODAS las capas de tu sprite, PREFERIBLEMENTE en el primer cuadro de tu animación.

Use la subherramienta OPERACIÓN - OBJETO y mueva el pivote de transformación (centro de rotación) de la pieza a la posición correcta (en este ejemplo, moví este pivote desde el centro hasta la parte inferior de la cabeza, donde está el cuello)

 

Los brazos del personaje también necesitan que el pivote esté donde está el hombro. Ajuste el pivote de cada parte antes de pasar al siguiente paso ...

 

Mientras establece sus puntos de pivote, realice algunas pruebas en el aparejo: gire las articulaciones del personaje hasta que encuentre la mejor manera de animarlo.

 

En el ejemplo, la mano no funciona debido a un pivote colocado incorrectamente ...

 

Al ajustar la posición del pivote, puedo girar la articulación de la mano, creando la ilusión de que todo su brazo está hecho de una sola imagen.

En cualquier momento, puede restablecer la ROTACIÓN de una capa estableciendo la opción ÁNGULO DE ROTACIÓN en 0. Lo mismo ocurre con ESCALA, donde puede restablecer a 100.

 

Aquí hay un diagrama de cómo ajusto los puntos de pivote de cada junta.

 

Observe en la línea de tiempo cómo cada parte ya tiene un conjunto de fotogramas clave.

Si algunas de sus capas no tienen un cuadro clave, cree uno moviendo la pieza un poco en el lienzo o manualmente con el botón AGREGAR MARCO CLAVE.

 

Hecho. El personaje correcto está listo para ser animado.

 

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

 

Animar un tipo de animación "inactivo"

Una vez que se configura su plataforma de personaje (articulaciones de pivote en su lugar y todas las partes con fotograma clave), es hora de duplicar esta primera pose en el último fotograma de la animación.

 

La forma más fácil de duplicar varios fotogramas es seleccionando cada fotograma clave en la línea de tiempo, mantenga presionada la tecla ALT y HAGA CLIC y ARRASTRE en la posición deseada.

 

Ahora, mueva su selección de línea de tiempo a la parte media de su animación, seleccione todas las partes del personaje (excepto sus piernas) y muévala hacia abajo un poco (estamos creando la respiración hacia arriba / hacia abajo).

 

Recuerde que puede usar CTRL + RATÓN IZQUIERDO haga clic para cambiar rápidamente y seleccionar a través de las capas. También puede mover las partes con las flechas del teclado.

Este es el resultado. Muy simple, pero es un comienzo.

Un método "simple" para romper la rigidez de una animación está cambiando la sincronización de las partes móviles: en el siguiente ejemplo retrasé (moví a la izquierda) el fotograma clave de su cuerpo (Girl + Body Layer) para que el movimiento comience una fracción del tiempo más rápido que las otras partes. También retrasé sus dos brazos y manos proporcionalmente.

 

Por último, retrasé los fotogramas clave de la cabeza y el cabello, por lo que parece que esas partes están siendo "arrastradas" por el cuerpo.

 

La idea es simular un movimiento que comienza en el cofre y arrastra las otras partes en secuencia como un vagón de ferrocarril.

 

Cuando se trata del tiempo, debes entrenar tus ojos para notar esos cambios sutiles. Trate de ver qué parte comienza a moverse primero que otras.

Hasta este punto, solo tratamos con la traducción (arriba y abajo) de las piezas, ahora agreguemos un poco de rotación.

 

Comenzando con la parte Head, seleccione el fotograma clave central en la línea de tiempo (haga clic sobre él para que se vuelva rojo) y gírelo en sentido antihorario, solo un pequeño movimiento.

También tendrá que arreglar la rotación de su cabello en consecuencia.

 

Vea cómo un pequeño ajuste agregó peso a su cabeza y cabello. Las cosas comienzan a ponerse más interesantes.

 

Hice lo mismo con sus brazos y mano, simplemente girando el marco intermedio de cada parte.

 

La propiedad Escala también se puede animar.

Seleccioné sus dos piernas (GIRL_LEGL y GIRL_LEGR) y utilicé la herramienta OPERACIÓN - OBJETO para "aplastar" las piernas para que reaccione a su peso.

 

Como hicimos en el ejercicio Bouncing Ball, recuerde desactivar la propiedad ASPECTO FIJO para que pueda mantener el volumen del objeto (aplastar en Y, estirar en X y viceversa).

 

Squash and Stretch es algo que puedes usar en varias partes de tu animación para que se vea más caricaturesca: observa en el ejemplo a continuación cómo utilicé la Escala para aplastar / estirar los cuadros entre su cuerpo y cabello. Ahora se ven menos rígidos.

 

Una "regla" al hacer (y previsualizar) bucles de animación para Juegos es tener siempre la misma pose al principio y al final de su ciclo de animación. (mantenga presionada la tecla ALT, arrastre y suelte los cuadros para duplicarlo).

 

Aquí hay un consejo: mientras prueba la animación, asegúrese de reproducir su animación de 0 a 19 (en caso de que tenga una animación de 20 cuadros): en Clip Studio Paint puede mover los Mangos azules en la Línea de tiempo para limitar la reproducción .

Esto hará una vista previa del Loop mejor ya que no expondrá el mismo cuadro (1 y 20) dos veces.

 

Vea la comparación entre la primera etapa de la animación y la última.

Recuerde que solo usamos 3 (en realidad 2) poses diferentes para crear este ciclo de animación muy atractivo.

Este proceso es un excelente punto de partida para una variedad de movimientos que puedes usar para dar vida a tus sprites.

 

Animar objetos complejos, como un personaje, puede ser confuso, así que manténgalo simple hasta que comience a desarrollar un mejor sentido del tiempo. Es demasiado abrumador tratar de aplicar todos esos 12 principios clásicos de animación al mismo tiempo.

 

Eso es. Espero que les guste y continuemos con la tercera y última parte de esta serie, donde les mostraré algunos consejos y trucos para acelerar la creación de gráficos animados Y, por supuesto, cómo preparar estas obras de arte para un juego. .

 

Descargue el archivo fuente de este ejercicio en el siguiente enlace.

 

Descargar material