Animación 2D: Dando vida a nuestros sprites

Animacion 2D Dando vida a nuestros sprites

En mi anterior artículo del blog os hablé sobre cómo hacemos en Inverge el arte 2D de nuestros videojuegos usando gráficos vectoriales, con un estilo artístico minimalista y plano. En el texto os comenté que os hablaría en un futuro sobre el proceso de animación de personajes y lo prometido es deuda.

Antes de comenzar, recordaros que este es un artículo a modo de introducción a la animación 2D. Si os interesa el tema y queréis profundizar en él, tenéis cientos de tutoriales gratuitos y de gran calidad en Internet —pero os dejaré mi favorito al final post—.

Para animar a nuestros personajes utilizamos Adobe After Effects, por su potencia y su facilidad de integración con los proyectos de Adobe Illustrator. Los pasos que seguimos para crear la animación de nuestros personajes son los siguientes:

1º Preparar las capas

Una vez tenemos nuestro personaje diseñado en Adobe Illustrator (también se puede importar un SVG hecho en otro programa, como Inkscape), toca ordenar sus partes por capas. Este paso es muy importante pues cada capa contendrá uno de los elementos que tendrá movimiento. Por ejemplo: una capa con toda la cabeza, otra con el torso, etc.

Una vez están las capas asignadas, se ordenan de forma que las partes más alejadas del personaje respecto a la cámara siempre estén en las capas inferiores, para que así estas no tapen a las superiores. No queremos que el brazo que está detrás del torso se vea por delante del mismo.

2º Rigging

Una vez está el personaje ordenado en capas en un archivo de Illustrator, lo importamos a nuestro nuevo proyecto de After Effects. De esta forma mantiene toda su información ordenada e intacta evitando que nos toque repetir el proceso.

El siguiente paso consiste en crear un “esqueleto” que nos permita mover a nuestro personaje como una especie de marioneta en 2D, mediante un conjunto de controles digitales. A este proceso se le conoce como rigging. Para ello empleamos el plugin gratuito Duik, que simplifica enormemente el proceso de rigging 2D.

Tras asignar a cada pieza su eje de giro (la pieza brazo lo tendrá a la altura del hombro, el antebrazo en el codo, etc.), con Duik creamos las uniones entre las articulaciones del personaje (la unión codo que une el antebrazo y el brazo, etc.) y los controladores (los símbolos blancos con flechas en la imagen inferior).

Se repite el proceso con todas las piezas que van a tener movimiento para formar un “esqueleto” unido y con controladores que nos permitirán mover cada una de sus partes de forma independiente.

3º Animación

Este es, de lejos, el paso más artístico y difícil de todo el proceso. En primer lugar, para animar el personaje tendremos que conocer los conceptos básicos, pues la animación es un tema muy amplio y complejo que requiere muchos años de práctica hasta alcanzar la perfección.

Hay mucha información en Internet para novatos pero recomiendo la lectura del libro The Animator’s Survival Kit de Richard Williams, todo un referente en la materia. En su libro desglosa los movimientos más comunes en frames (fotogramas) que nos servirán como referencia a la hora de dotar de movimientos naturales a nuestros personajes.

Una vez sepamos la animación a realizar, hay que preparar los frames de la misma, por lo que recomiendo hacer antes bocetos en papel para hacernos una idea general de cada paso. En el caso de nuestro próximo videojuego Become a Legend: Dungeon Quest, cada animación consta de 8 frames que se repiten una vez (atacar) o en bucle (andar). En el último caso es muy importante que el último frame coincida con el primero para cerrar el bucle.

En After Effects seleccionaremos el frame en el que vamos a trabajar, y a continuación, movemos nuestros controladores de articulaciones para crear la pose deseada. Este paso lo realizaremos en cada uno de los fotogramas clave (inicial, final, carga del arma, etc.), y será el propio After Effects el que realizará automáticamene los frames intermedios mediante interpolación, gracias a su herramienta de ‘Cronómetro de variación de tiempo’ que nos permite modificar las propiedades, como la posición de los controladores, con el tiempo.

Luego retocaremos a mano los frames intermedios, para que la animación sea lo más fluida y natural posible. Finalmente exportamos las animaciones como un conjunto de imágenes o en un pack como sprite sheet, y las incorporamos a nuestro proyecto en Unity 3D, el motor de juego con el que desarrollamos.

Tutorial Express

Espero que os haya resultado interesante este texto, el último de la serie arte y animación hasta dentro de una temporada. Los próximos artículos los quiero enfocar a diseño de juego y diseño de niveles. ¡Nos leemos!