[Tutorial] Animación de sprites (libGDX)

Buenas gente! En esta entrada vamos a ver como hacer animaciones con nuestros sprites, de forma que nuestro jugador, enemigos y demás cobren vida :)

Variables necesarias

Primero necesitaremos alguna variable que nos indique en que animación se encuentra en estos momentos. Yo uso un enum por comodidad, pero se puede usar un string, un int o cualquier cosa que te guste más:

Para este ejemplo cambiaremos entre dos animaciones: parado (IDLE) y andando (WALK).

Ahora necesitamos una imagen que contenga la animación. Para ello nos vale una imagen .png. Esta imagen deberá estar dividida en cuadrados y cada cuadrado será un cambio en la animación. Lo normal es poner todos los pasos de una animación en una misma imagen o, incluso, todas las animaciones en una misma imagen. Veamos un ejemplo de imagen con nuestro querido personaje principal Pirko:

Esta imagen la cargaremos en la clase de nuestro personaje como una Texture:

Necesitaremos también un TextureRegion para indicar cual es la imagen actual de la animación que el programa tiene que mostrar y un Vector de TextureRegion por cada animación (o un solo TextureRegión si es solo una imagen estática la animación):

Ahora necesitamos tantas variables del tipo Animation como animaciones vayamos a tener y una más para tener la animación actual:

Creando una animación

Vamos a ver ahora como inicializar esas variables de tipo Animation. Para ello primero creamos un vector temporal con todas las TextureRegion de la imagen:

Con la línea anterior hemos cogido la textura con nuestra imagen y dividido en tantos cuadrados según su tamaño y el número de frames que tiene tanto por columnas (FRAME_COLS) como por fila (FRAME_ROWS). (Los frames son los cuadrados en los que se subdivide nuestra imagen con cada paso de la animación). Para nuestro ejemplo, FRAME_COLS vale 4 y FRAME_ROWS vale 1.

Una vez tenemos todas las TextureRegion en el vector temporal, inicializaremos cada vector de TextureRegion que habíamos creado antes para cada animación. Para ello nos vale con una inicialización y un bucle simple:

*Si la animación ocupase más de una fila, tendríamos que hacer dos bucles anidados para recorrerlas.*

Con la animación de estar quieto no necesitamos un bucle ya que será solo una imagen estática:

Ahora ya podemos inicializar nuestras variables de Animation, pasándoles el vector de TextureRegion y el tiempo en segundos que habrá entre un frame de la animación y el siguiente. A menor tiempo, más rápido irá la animación:

Cambiando la animación de nuestro personaje

Para indicarle a nuestra aplicación si nuestro personaje se encuentra andando, parado o cualquier otro estado usaremos una función como la siguiente:

Llamaremos a esta función cada vez que el personaje comience a moverse, se pare o, en definitiva, cambie su estado, pasándole como parámetro un valor del enum que creamos en un principio. Si el estado es diferente al que tiene actualmente, cambiará su animación.

Dibujando al personaje

Una vez que tenemos el estado del personaje y su animación correspondiente vamos a ver como mostrarlo por pantalla. Dado que nuestro personaje es un Actor, usaremos las funciones act(float delta) y draw(SpriteBatch batch, float parentAlpha) que ya vimos en entradas anteriores para que nuestro Stage se encargue de dibujarlo (Ver más información sobre el uso de Stage y Actor aquí).

Comenzamos con la función que actualiza el estado de la animación. Para ello tendremos que usar la siguiente línea dentro de la función:

Con esto seleccionamos el TextureRegion que se tiene que mostrar en ese instante de tiempo de la animación actual.

Ahora veamos que hay que poner en la función de dibujado:

Con la línea anterior le mandamos al SpriteBatch (ver más información sobre SpriteBatch aquí) de nuestro Stage a dibujar el frame de nuestro personaje que le corresponde, comenzando en la posición (posX, posY) con centro en (width/2, height/2), con un tamaño de (width, height), con una escala en los ejes x e y de scaleX y scaleY respectivamente (lo normal es tenerlo a 1) y con una rotación rotation en grados.

¡Tras esto ya podremos ejecutar nuestra aplicación y ver moverse a nuestro personaje!

Notas:

• Recuerda hacer el dispose() de la textura. No es necesario hacerlo para los TextureRegion o las Animation.
• Puedes crear animaciones para realizar ataques, recibir daño, morir o cualquier cosa que se te ocurra.
• Este mismo tutorial vale para animar enemigos, ataques, objetos, etc.