Tal y como comenté en la charla sobre arte en videojuegos para móvil del CDV, cuando empezamos ha desarrollar juegos para móviles java hace cosa de 5 años, tuvimos que dar un nuevo enfoque a la animación de sprites debido a los altos requisitos de optimización de estos dispositivos.

Para animar cualquier sprite de la forma más óptima posible, es necesario:

• Los fotogramas de la animación (sprites) sin espacios en blanco. Cada sprite tiene el tamaño mínimo posible y normalmente cada uno tiene un tamaño diferente.
• Identificador o nombre de la animación (por ej., “prota_corre”, “prota_muere”, lo que sea…)
• Script de animación para definir la secuencia de fotogramas (Por ej., 1, 2, 1, 3, 2…), para no tener que repetir gráficos.
• Coordenadas de referencia para cada sprite. Esta coordenada dentro del sprite se utiliza para concatenar fotogramas de diferentes tamaños, además de ser utilizada por el programador para colocar el sprite en pantalla.
• Total independencia del programador. Si se consigue separar código y arte ¡es increíble lo que favorece la productividad!

Algunos fotogramas de la animación “andar” del juego Mr. Bean. Los puntos de referencia (en rojo).

Las dichosas coordenadas de referencia

Hay que tener en cuenta que cada sprite puede tener su coordenada de referencia en un lugar diferente.En este punto nos planteamos cómo disponer de dicha coordenada de forma visual y rápida, sin tener una incomoda y larga lista de coordenadas.

Lo más práctico y rápido en ese momento fue crear una 2ª imagen por cada sprite para indicar la coordenada (o coordenadas) mediante un pixel de color. Esa imagen se procesaría posteriormente para extraer la coordenada.

Esto nos permitía poder realizar montajes más complejos de animaciones dependientes unas de otras.

El fogonazo del fusil (b) y los casquillos (c) depeden automáticamente del fúsil (a) gracias a este sistema de puntos (Storm Gunner).

Y entonces llegó “Flash”…

Pronto este sistema no fue suficiente para crear animaciones más complejas. En ese momento se nos ocurrió usar directamente algún programa de animación. Flash fue la solución. Las ventajas son incalculables…

• Es el programa de animación más utilizado del mundo. El animador sólo se preocupa de animar. Aumenta el rendimiento y la producción se mejora.
• La especificación del los ficheros SWF es pública. Es posible extraer la información de coordenadas y sprites del fichero. (gracias Josep!)
• Permite reutilizar sprites.
• Permite las transformaciones básicas (rotaciones y volteos)
• Es posible combinar sprites con imágenes vectoriales.
• Es posible crear diferentes paquetes de gráficos mediante el uso de capas. Por ejemplo, si necesitamos eliminar cierta animación para un paquete de gráficos en concreto, sólo hay que colocarla en una capa y ocultarla antes de exportar.
• Todo el proceso es 100% independiente del programador. Se pueden hacer cambios de forma fácil y sencilla. Los cambios se puede probar al instante en el juego.

Sprites finales del protagonista de “Livingstone, Lost Again“.

Animación creada en Flash con sprites

No obstante, sigue siendo necesario disponer de un sencillo script para definir las animaciones y las secuencias de fotogramas:

STANLEY_IDLE = 1,1,1,1,1,2,3,3,3,3,3,2; 	//quieto
STANLEY_WALK = 4-11;
STANLEY_JUMP = 14-20;
STANLEY_CHANGIDLE = 31,31-35,35,35,35-31; 	//colgado del techo quieto
STANLEY_CHANG = 40-47;				//techo moviéndose
STANLEY_BHANGIDLE = 50,50,50-55,55,55,55-50; 	//colgado del borde quieto
STANLEY_BHANG = 58-64,20; 			//colgado del borde salta
STANLEY_SHOT = 23-29; 				//látigo
STANLEY_CROUCH = 99, 102;			//agachado
STANLEY_CRAWL = 100-105,104,103,102,101; 	//arrastrándose
STANLEY_WAKE = 102, 99;				//levantarse
STANLEY_WHANG = 110-116; 			//colgado del látigo
STANLEY_CLIMB = 67,67,67,67-70,70,70,70,69,68; 	//enredadera quieto
STANLEY_CLIMBH = 80-84; 			//enredadera horizontal
STANLEY_CLIMBV = 88-93;				//enredadera vertical
STANLEY_JUMPSHOT = 123-128; 			//látigo saltando
STANLEY_DIE = 132-137;	 	 		//muerte

Tema:

Adobe, Arte y 3D, Móviles