Animaciones (parte 2)

Tras ver el funcionamiento de una animación ahora toca ver cosas más complejas que se pueden conseguir con las animaciones, como el movimiento.

Este curso ha sido marcado como anticuado y no está siendo revisado de forma activa. Es posible que la información pueda estar desactualizada o que los enlaces se hayan roto.

En el desarrollo de juegos con Slick 2D, controlar las animaciones de los personajes es fundamental para lograr movimientos realistas y fluidos. Para ello, disponemos de varios métodos que nos permiten pausar, continuar, reiniciar o detener las animaciones en fotogramas específicos, lo que nos da un control muy fino sobre el flujo visual de nuestros personajes.

Primero, podemos detener una animación con el método stop. Esto es útil, por ejemplo, cuando queremos que la animación se pause al pulsar una tecla, como Escape. La animación se detiene en el fotograma en el que se encuentre en ese momento, sin reiniciarse ni avanzar. Para continuar la animación desde ese punto, usamos el método start, que reanuda la animación justo donde se quedó, sin volver al inicio.

Si queremos que la animación comience siempre desde el primer fotograma, utilizamos restart. Este método reinicia la animación desde el fotograma 0, independientemente de dónde estuviera antes. Así, si pulsamos una tecla asignada a restart, la animación se reproducirá desde el principio.

Además, existe el método stoppad, que nos permite indicar un fotograma específico en el que la animación se detendrá automáticamente. Por ejemplo, si configuramos stoppad(4), la animación se parará cuando llegue al fotograma número 4 sin necesidad de intervención del usuario. Este método se comprueba constantemente, por lo que puede afectar al rendimiento si no se usa con cuidado. Para desactivar esta detención automática, basta con asignar un número negativo al stoppad, como -1 o -2, asegurándonos de que la animación no se detenga inesperadamente.

Para saber si una animación está detenida o en marcha, podemos usar el método isStopped, que devuelve un valor booleano: true si la animación está parada y false si está en reproducción. Esto es útil para tomar decisiones en el código basadas en el estado actual de la animación.

Cuando queremos cambiar de fotograma de forma más directa, el método setCurrentFrame nos permite saltar a un fotograma específico. Por ejemplo, al pulsar una tecla, podemos hacer que la animación salte al fotograma 4, lo que nos da un control más radical sobre la animación, útil para situaciones donde queremos que el personaje rebobine o cambie a una pose concreta.

Para aplicar todo esto a un movimiento de personaje, podemos combinar el control de posición con el control de animación. Por ejemplo, asignamos una velocidad de desplazamiento y una posición inicial, y actualizamos la posición en función del tiempo transcurrido y la tecla pulsada. Cuando el personaje se mueve, iniciamos la animación con start, y cuando deja de moverse, la detenemos con stop.

Sin embargo, detener la animación directamente puede dejar al personaje en una pose poco natural, como con una pierna levantada. Para evitar esto, podemos usar setCurrentFrame para llevar la animación a un fotograma en el que el personaje parezca estático, con ambas piernas apoyadas. Así, cuando la animación se detiene, el personaje mantiene una postura coherente.

Otra opción más avanzada es usar stoppad para que la animación termine de reproducirse hasta un fotograma específico antes de detenerse, evitando que la pierna se teletransporte a una posición estática. Para que esto funcione correctamente, debemos gestionar cuándo activar y desactivar el stoppad, por ejemplo, desactivándolo justo cuando empezamos a pulsar la tecla para que la animación pueda avanzar sin interrupciones.

En el código, esto se traduce en comprobar si la animación está detenida justo en el momento en que se empieza a pulsar la tecla, y en ese instante desactivar el stoppad para permitir que la animación avance. Luego, cuando se suelta la tecla, activamos el stoppad en el fotograma deseado para que la animación se detenga de forma natural.

Un ejemplo simplificado de este control sería:

if (input.isKeyDown(Input.KEY_RIGHT)) {
    if (anim.isStopped()) {
        anim.setStoppad(-1); // Desactivar stoppad para que avance
        anim.start();
    }
    x += velocidad * delta / 1000f;
} else {
    anim.setStoppad(0); // Detener en fotograma 0 para pose estática
}

Este enfoque mejora la sensación de movimiento, haciendo que el personaje no pare en poses extrañas, sino que vuelva a una postura natural cuando deja de moverse.

Aunque la animación usada en el ejemplo tiene muchos fotogramas, para optimizar bastaría con tener tres: uno estático y dos con las piernas levantadas alternadamente. Además, para movimientos hacia la izquierda, podríamos invertir la imagen para que el personaje no parezca ir marcha atrás, pero eso queda para futuras mejoras.

Con estas técnicas, podemos lograr que los personajes de nuestros juegos en Slick 2D se muevan de forma más realista y atractiva, controlando con precisión cuándo y cómo se reproducen sus animaciones.

Lista de reproducción
  1. 1
    Instalando las herramientas Java
    11 minutos
  2. 2
    Instalando Slick2D
    26 minutos
  3. 3
    Estados e imágenes
    23 minutos
  4. 4
    Respuesta de usuario
    24 minutos
  5. 5
    Colisiones
    25 minutos
  6. 6
    Matemáticas y física
    13 minutos
  7. 7
    SpriteSheet
    13 minutos
  8. 8
    Tilemaps básicos
    23 minutos
  9. 9
    Escalas
    11 minutos
  10. 10
    Animaciones (parte 1)
    14 minutos
  11. 11
    Animaciones (parte 2)
    15 minutos
  12. 12
    Radiografía de un estado
    12 minutos
  13. 13
    Mover con el ratón (parte 1)
    11 minutos
  14. 14
    Mover con el ratón (parte 2)
    13 minutos
  15. 15
    Sonido
    13 minutos
  16. 16
    Música
    14 minutos
  17. 17
    Fuentes
    19 minutos
  18. 18
    Instalar Slick en NetBeans
    6 minutos