Las animaciones son parte esencial de un juego, en este tema veremos como cargar un sprite para animar a nuestro personaje principal, también mostraremos los pájaros que estarán aventando piedras y dulces.

Para poder realizar animaciones necesitamos tener un sprite con imágenes en secuencia, por ejemplo para los pajaros que aparecerán volando usaremos la siguiente imagen.

El sprite de las aves

Como se puede observar el ave contiene cuatro imágenes secuenciales en diferente posición. Cada frame será desplegado individualmente y se podrá observar una animación.

Otro aspecto a considerar es que la imagen está en diferentes direcciones, derecha e izquierda, si quisieramos poner alguna otra animación deberíamos ponerla sobre este mismo archivo.

Una vez que tenemos el arte listo vamos agregar las siguientes lineas de código al estado que creamos en el tutorial anterior.

var GameState = {
    preload : function(){  //Step 1
        var me = this;

        //...

        me.load.spritesheet('crow', 'resources/images/crow.png',97 ,120); //Step 2
        me.load.spritesheet('man', 'resources/images/man.png',69 ,174);
    },

    //...
}

1. En el paso uno vamos a cargar las imágenes necesarias para realizar las animaciones, usamos el método preload que viene definido en el estado que estamos usando.
2. En el paso dos usamos el Loader para cargar las dos imágenes, es necesario definir un identificador para poder usar la imagen más adelante, también es necesario definir el tamaño de cada frame, con esto Phaser podrá ir cambiando entre frames automáticamente.

Una vez que hemos cargado las imágenes al juego, podremos usarlas dentro del método create.

var GameState = {
    preload : function(){
        //...
    },

    create  : function(){
        var me = this;

        //...

        me.crow = me.game.add.sprite(150, 100, 'crow');       //Step 1
        me.crow.animations.add('right', [0,1,2,3], 8, true);  //Step 2
        me.crow.animations.add('left', [4,5,6,7], 8, true);
        me.crow.animations.play('right');                     //Step 3

        me.man = me.game.add.sprite(200, me.game.world.height - 250, 'man'); //Step 1
        me.man.animations.add('right', [0,1,2,3,4,5,6,7], 10, true);  //Step 2
        me.man.animations.add('left', [8,9,10,11,12,13,14,15], 10, true);
        me.man.animations.play('left');   //Step 3
    },

    //...
}

1. En el paso uno mostramos el sprite en la coordenada x=150 y=100 para el caso del pájaro, en el caso del personaje principal x=200 y=alto total del juego menos 250.
2. En el paso dos agregamos dos animaciones, right y left, es necesario definir un identificador para reproducirlas más adelante. También es necesario definir un arreglo con los frames que pertenecen a esta animación, para el pájaro son los primeros 4 y para el personaje son los primero 8. Por último definimos cada cuantos frames por segundo se ejecutará esta animación así como si se hará una sola vez o se repetirá.
3. En el último paso reproducimos la animación, en cualquier momento podemos cambiar entre animaciones, más adelante cambiaremos estas animaciones basados en la entrada del usuario.

Si en este momento refrescamos nuestro navegador con los cambios agregados veremos nuestras animaciones ejecutándose fluidamente.

Animaciones en Phaser

Como se puede observar agregar animaciones a nuestro juego ha sido bastante sencillo, en este momento todavía no podemos hacer nada interesante con nuestros personajes pero vamos avanzando en este proyecto.

En el siguiente tutorial veremos como mover a nuestro personajes sobre el eje x o y. Si te ha gustado este tutorial compártelo en tus redes sociales, eso me ayudará mucho a seguir publicando más tutoriales como este!

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Videojuegos en HTML5, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!