Las animaciones son una pieza fundamental para dar vida y realismo a nuestros juegos en Slip 2D, y para implementarlas utilizamos principalmente Sprite Sheets. Un Sprite Sheet no es más que una imagen que contiene varios fotogramas de una animación dispuestos en una cuadrícula. En Slip 2D, esta es la única forma soportada para animar, ya que no trabaja con GIFs animados. La idea es que, al mostrar cada fotograma en secuencia y a una velocidad adecuada, se crea la ilusión de movimiento fluido.
Para comenzar, tomamos un Sprite Sheet con varias imágenes del personaje caminando. Por ejemplo, si la imagen tiene un ancho total de 252 píxeles y contiene 9 fotogramas, cada uno tendrá un ancho de 28 píxeles (252 dividido entre 9) y un alto fijo, digamos 49 píxeles. Con estos datos, creamos una instancia de la clase SpriteSheet en Slip, que se encargará de manejar la división de la imagen en fotogramas individuales.
Luego, para crear la animación, usamos la clase Animation. Esta clase tiene varios constructores, pero el más práctico es el que recibe un SpriteSheet y la duración de cada fotograma en milisegundos. Por ejemplo, si queremos que cada fotograma dure 100 ms, pasamos ese valor al constructor. Esto hace que la animación avance automáticamente mostrando cada fotograma durante ese tiempo.
SpriteSheet sprite = new SpriteSheet("ruta/a/la/imagen.png", 28, 49);
Animation anim = new Animation(sprite, 100);
Una vez creada la animación, podemos dibujarla en pantalla usando su método draw(x, y), igual que con cualquier objeto que implemente la interfaz Renderable. Para que el personaje se vea bien, es importante ajustar el color de fondo del juego, especialmente si el personaje tiene colores oscuros que podrían confundirse con el fondo.
Un detalle importante es el comportamiento de actualización de la animación. Por defecto, la clase Animation tiene activado el auto-update, lo que significa que cada vez que llamamos a draw(), la animación automáticamente calcula si debe avanzar al siguiente fotograma según el tiempo transcurrido. Si desactivamos esta opción, tendremos que llamar manualmente al método update(delta) para avanzar la animación, donde delta es el tiempo en milisegundos desde la última actualización.
anim.setAutoUpdate(false);
// En el ciclo de juego:
anim.update(delta);
anim.draw(x, y);
Sin embargo, es recomendable no mezclar ambos métodos para evitar que la animación avance demasiado rápido o de forma errática.
En cuanto a la repetición de la animación, por defecto la animación se repite en bucle continuo, es decir, cuando llega al último fotograma vuelve al primero. Esto se controla con el método setLooping(boolean). Si lo desactivamos, la animación se detendrá en el último fotograma.
Además, Slip 2D ofrece un modo llamado ping-pong mediante el método setPingPong(boolean). En este modo, la animación avanza desde el primer fotograma hasta el último y luego regresa hacia atrás, repitiendo este ciclo. Esto crea un efecto de ida y vuelta que puede ser útil para ciertos tipos de animaciones.
Para obtener información sobre la animación en ejecución, la clase Animation dispone de métodos como getFrame() para saber el índice del fotograma actual, y getFrameCount() para conocer el total de fotogramas. También podemos obtener imágenes específicas con getImage(index) o la imagen del fotograma actual con getCurrentFrame(). Esto puede ser útil para dibujar fotogramas estáticos o para depurar el estado de la animación.
int frameActual = anim.getFrame();
int totalFrames = anim.getFrameCount();
Image imagenFrame3 = anim.getImage(3);
Image imagenActual = anim.getCurrentFrame();
Con estas herramientas, podemos controlar con precisión cómo se comportan nuestras animaciones, ajustando la velocidad, la repetición y accediendo a sus fotogramas para crear efectos visuales más complejos.
En próximos pasos, exploraremos métodos adicionales para controlar el flujo de las animaciones, como detenerlas, reiniciarlas y combinarlas para crear personajes y escenarios más dinámicos y realistas.