Ya vimos como hacer animaciones utilizando sprites, pero tanto los pájaros como el personaje principal están en el mismo lugar, en este tutorial vamos a ver como moverlos de posición.

Ya que nuestro juego es en 2D el movimiento será sobre el eje x o y, cada sprite que definimos contiene estas propiedades que pueden ser modificadas dentro del método update que se ejecuta constantemente en el loop infinito.

Lo primero que vamos a realizar es mover el pájaro modificando la propiedad x de la siguiente manera.

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

    create  : function(){
        //...
    },

    update  : function(){
        var me = this;

        me.crow.x += 5; //<---
    }
}

Utilizando la propiedad crow que creamos en el método create,  vamos a incrementar 5px en cada iteración del método update, esto comenzará a mover al pájaro hacia la derecha.

Si en este momento ejecutamos el juego veremos que el pájaro comienza a moverse pero desaparece de la escena y nunca regresa. Si quisiéramos que inicie la animación deberíamos verificar que cuando llegue al final cambiar la propiedad x a cero para que inicie nuevamente el recorrido.

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

    create  : function(){
        //...
    },

    update  : function(){
        var me = this;

        me.crow.x += 5;
        if(me.crow.x >= me.game.world.width){ //Step 1
            me.crow.x = -100;                 //Step 2
        }
    }
}

1. En el paso uno revisamos si la posición x del sprite ha llegado al final del mundo.
2. En el segundo paso simplemente reiniciamos el movimiento al inicio del mundo. 

Con esto podremos ver como el pájaro se va moviendo de principio a fin en un ciclo. Ahora intenta hacer lo mismo con el personaje principal que ya hemos creado en el tema anterior.

Moviendo los personajes

Corrigiendo la animación del personaje principal

Entre los comentarios del tutorial anterior me hicieron notar que la animación del personaje principal pareciera que camina hacia atrás, lo cual se ve un poco raro y debemos corregirla.

Para corregir la animación tenemos dos opciones, la primera es ir a cambiar el orden de las imágenes en el sprite, eso lo podemos hacer en nuestro editor de imágenes favorito, es un proceso sencillo pero nos tomara tiempo.

La segunda opción es simplemente cambiar el orden de los frames directamente en el código, esta opción es la que nos tardaremos mucho menos tiempo, es muy sencillo simplemente debemos cambiar la numeración de la siguiente manera.

me.man.animations.add('left', [15,14,13,12,11,10,9,8], 10, true);

Con eso ahora los frames se mostrarán en el order invertido y la animación se verá más natural.

Conclusiones

Ya logramos mover nuestros personajes dentro del juego, simplemente modificando la posición X o Y de cada sprite. Aunque ya lo estamos moviendo, más adelante cuando introduzcamos el motor de física vamos a cambiar esto ya que el motor de física será el responsable de calcular las posiciones tomando en cuenta la gravedad, velocidad, dirección y algunas otras variables.

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!