Animaciones

Los juegos no son juegos si no se siente vida en ellos. ¿O acaso a alguien le gustaría jugar con el Word? Una parte fundamental para dar vida a los juegos son las animaciones. Las animaciones nos hacen ver que el mundo del juego no es estático.

Un Spritesheet específico

En los juegos 2D normalmente animamos los sprites cambiándolos completamente con otro sprite similar. Normalmente todas las imágenes que van a representar un sprite se almacenan en el mismo archivo. Recuerda la lección sobre Spritehsheets.

Para este ejemplo voy a usar este spritesheet.

Es obra de Brett Steele. He hecho una modificación para que el color azul se vuelva transparente.

Generando animaciones

En primer lugar cargamos el spritesheet.

    function preload() {
        game.load.spritesheet("mujer", "mujer-alpha.png", 32, 64);
    }

Después añadimos las animaciones al sprite. El primer argumento es el nombre de la animación, el segundo es la lista de frames de los que se compone la animación. Estos son los frames del spritesheet. Por último la velocidad de la animación y si queremos que se repita.

function create() {
        cursor = game.input.keyboard.createCursorKeys();
        mujer = game.add.sprite(100, 100, "mujer");
        mujer.frame = 10;

    mujer.animations.add("left", [24, 25, 26, 27, 28, 29, 30, 31], 10, true);
    mujer.animations.add("right", [16, 17, 18, 19, 20, 21, 22, 23], 10, true);
    mujer.animations.add("up", [0, 1, 2, 3, 4], 10, true);
    mujer.animations.add("down", [8, 9, 10, 11, 12], 10, true);
}

</code></pre>


Después lo podemos usar en la función update donde arrancamos y paramos las animaciones según la entrada de teclado.




    function update() {
        if (cursor.left.isDown) {
            mujer.animations.play("left");
            mujer.x--;
        } else if (cursor.right.isDown) {
            mujer.animations.play("right");
            mujer.x++;
        } else if (cursor.up.isDown) {
            mujer.animations.play("up");
            mujer.y--;
        } else if (cursor.down.isDown) {
            mujer.animations.play("down");
            mujer.y++;
        } else {
            mujer.animations.stop();
            mujer.frame = 10;
        }
    }

Con <sprite>.frame podemos ajustar manualmente el frame de la animación, muy útil cuando hemos parado la animación.


Resultado
Ahora podemos ver el resultado.