Animación de sprites para videojuegos

Cada equipo de desarrollo tiene su metodología y sus técnicas, generalmente adaptadas a las necesidades generales de cada proyecto. Como desarrolladores y diseñadores, siempre sentimos curiosidad por ver de qué forma trabajan otras personas del sector.

En este post, explicamos cómo afrontamos el proceso de animación de personajes, objetos u otros elementos gráficos, siempre en base a nuestro propio método, que muchas personas probablemente compartan pero que posiblemente otras encuentren extraño o particular.

Herramientas

Para nuestro proyecto debut, Go Deeper, utilizamos esencialmente dos herramientas para diseñar y animar todos los sprites, desde personajes y enemigos hasta items y elementos de escenarios: Adobe Illustrator y Adobe Photoshop. Ambas son herramientas líder en el sector y que conocemos y usamos con asiduidad desde hace más de 15 años. Cuando decidimos afrontar la parte artística de Go Deeper, decidimos que era importante usar herramientas con las que nos sintiésemos cómodos.

Proceso

1. Creación de elementos vectoriales

Los gráficos vectoriales se diferencian de los creados en base a mapas de bits por el hecho de que no dependen de una resolución en particular. Son plenamente escalables y muy fáciles de manipular y editar, generando archivos con un peso muy bajo. Reciclar elementos entre diversos sprites es muy fácil mediante el uso de este tipo de gráficos.

Los personajes de Go Deeper fueron creados en base a formas geométricas muy simples, como puede apreciarse en el esquema superior. Para optimizar la producción, se crearon elementos con un nivel de detalle adecuado para un juego para dispositivos móviles, donde las dimensiones de la pantalla son muy reducidas. Es importante trabajar con las dimensiones finales de los gráficos.

2. Separación de elementos de un mismo sprite

Antes de animar el sprite es importante que tengas claro qué quieres hacer exactamente con él, ya que lo adecuado será agrupar elementos conformando un seguido de piezas independientes que serán las que definitivamente movamos por separado para construir el movimiento.

Planifica de antemano y separa cada parte de tu diseño antes de exportar a Photoshop.

3. Exportación de los elementos a Photoshop

Afortunadamente, la exportación de elementos a Photoshop no podría ser más sencilla. Basta una acción copiar-pegar para que Photoshop reconozca el elemento importado como un gráfico vectorial que convierte en un objeto inteligente que podremos incluso escalar o editar a posteriori. Copia y pega los elementos de Illustrator, generando una capa distinta para cada uno de ellos. Ordénalos sobre el lienzo de manera que reconstruyas en Photoshop el gráfico original. Te recomendamos copiar y pegar la composición completa de Illustrator para tener un referente claro sobre la ubicación de cada elemento.

4. Animación frame-to-frame

Una vez todos los elementos están en su sitio, utilizamos el panel de Animación de Photoshop para moverlos, creando tantos fotogramas como sean necesarios para representar el movimiento. En cada fotograma, moveremos los elementos de manera que reproducidos en secuencia, produzcan la animación deseada.

No dudéis en usar constantemente la opción ‘Play’ para ver el resultado a tiempo real y sin ningún tipo de esperas de renderizado.

5. Exportación del resultado

El paso final consiste en exportar la animación una vez todo está en su sitio. Para ello, exportamos cada fotograma como un PNG de 24 bits, creando una secuencia completa para cada animación, que posteriormente es utilizada en la herramienta que cada uno use. Aunque nosotros usamos Game Maker Studio, el proceso es válido para casi cualquier otro framework de desarrollo de videojuegos. Podéis agilizar la exportación de fotogramas mediante la opción ‘Interpretar vídeo’ de Photoshop:

Sin embargo, nosotros exportamos cada fotograma de forma independiente usando la opción ‘Exportar para web’ porque hemos notado un mejor tratamiento de la transparencia en PNGs. La mayoría de herramientas de desarrollo permitirán un control posterior del ritmo de la animación, en caso de requerir ajustes.

Resumen del proceso

Aquí dejamos un breve vídeo en el que puedes ver de forma acelerada de qué manera llevamos a cabo todo el proceso explicado en este post. ¡Seguramente ayude a visualizarlo todo! Esperamos que te sea útil (nota: anotaciones del vídeo en inglés).

¿Quieres ver el resultado de este proceso aplicado a un proyecto real?

Y tú, ¿de qué forma animas a los personajes de tus juegos?