CraftyJS: Animación del movimiento

IMPORTANTE: Los métodos de animación en CraftyJS cambiaron a partir de la versión 0.6, con lo que este artículo es sola válido a partir de dicha versión (y hasta nuevo cambio)  :-)

En el artículo anterior ya habíamos finalizado nuestro laberinto, sólo nos quedaba el detalle del personaje principal que era un cuadrito amarillo y que ahora substituiremos por un personaje animado.

Esto implica que tendremos una serie de frames (al que llamaremos reel) que crearán los efectos de movimiento a la derecha, izquierda ,arriba y abajo. Para ello cargaremos el mapa de sprites con el que ya habíamos trabajado en el artículo anterior y cogeremos el frame que queremos que muestre nuestro personaje al aparecer en pantalla (antes de moverse):

Crafty.sprite(32, 'assets/furniman.png', { ladron:        [0, 0]  });

Ya podemos imaginar que con el mapa de sprites anterior crearmos cuatro reels que irán cambiando cuando cambie la dirección de nuestro personaje. Por lo que lo primero que tenemos que preguntarnos es ¿Cómo saber hacia que dirección se mueve nuestro prota?

NewDirection

De esto no hemos hablado, pero CraftyJS lanza una serie de eventos que podemos interceptar mediante el comando .bind.  Cuando una entidad que usa el componente Fourway (o multiway) cambia de dirección, lanza el evento global NewDirection que interceptaremos y al que le preguntaremos hacia qué lado vamos.

Este evento devuelve una clase con los atributos x e y cuyo signo puede ser positivo y negativo.

Todo esto lo definiremos en nuestro componente:

Crafty.c('Personaje', {

    init: function() {

       

   this.bind('NewDirection', function(direccion) {

  

         if (direccion.x > 0) {this.animate('derecha',    -1);} else

        if (direccion.x < 0) {this.animate('izquierda',  -1);} else

         if (direccion.y > 0) {this.animate('abajo',       -1);} else

        if (direccion.y < 0) {this.animate('arriba',      -1);} 

        else {this.pauseAnimation();}

      })

}); 

Vemos que este trozo de código es harto intuitivo.  Si vamos a la derecha, animamos la derecha, si vamos a la izquierda animamos la izquierda... y si no nos movemos, detenemos la animación. Si no hiciéramos esto nuestro muñeco seguiría moviéndose a pesar de estar parado.  O_o

Decir que animate lo que hace es crear un 'reel' (o serie de frames) para la animación de ese componente y definir el número de veces que imprimirá la secuencia. (Es fácil imaginar que -1 significa hasta el infinito y más allá). - Jolín, mira que me repatea la gente que dice esa gilipollez y ahora estoy yo aquí con lo mismo -).

El caso es que tenemos el reel, pero el reel no tiene nada...

Reel

Un reel básicamente lo que debería contener es una secuencia de frames que conforman la animación. (vamos, el concepto del zoótropo).

Sintaxis:

.reel( nombre, duración, posX, posY, númeroDeFrames)

• La duración se expresa en milisegundos.
• La posX y posY son la fila y columna que ocupa el primer frame (fila y columna relativa, medida en frames y no es píxeles.  (más datos aquí)
• El número de frames es eso. Los cogerá de manera secuencial. (Si ponemos este parámetro en negativo iremos marcha atrás).

Así que ahora que crearemos la entidad, le indicaremos que es una animación de sprites, definiremos su imagen de inicio (definida anteriormente al cargar el mapa)  y daremos contenido a los reel.

    Crafty.e('2D, Canvas, Fourway, SpriteAnimation, Personaje, ladron)

     .attr({ x: 100, y: 10, w: 32, h: 32 })
     .fourway(4)

     .reel('arriba',     500, 0, 0, 2)
     .reel('abajo',      500, 2, 0, 2)

     .reel('derecha',  500, 2, 1, 2)

     .reel('izquierda', 500, 0, 1, 2);

Fijaos que le hemos dicho a Crafty que la entidad que estamos creando tiene el comportamiento SpriteAnimation y que su Sprite antes de moverse es el que habíamos definido para ladrón.

Y ya no necesitamos nada más... nuestro muñeco se moverá ahora con plena libertad...

Veamos como queda aquí.

El código es éste:

Y es más... veamos como quedaría todo esto si lo aplicamos a nuestro juego del laberinto aquí.
Además podemos bajarnos el código aquí o aquí