CraftyJS: Sprites

Mmm... creo que el tutorial se está haciendo muy farragoso y al final no se entenderá nada, así que voy a tratar el contenido de este tema de manera independiente: El fantabuloso mundo de los

Sprites

Retomemos nuestro laberinto, pero ahora démosle color:

Como veis he dividido el mapa en cuadritos (que corresponden con el array que definíamos aquí). Como veis cada cuadrado tiene un dibujo que es una simple imagen (jpg, png...).  Pues bien, el dibujo en sí mismo, es lo que llamamos sprite. En la imagen sólo sale el escenario, pero es fácil deducir que nuestro personaje será también un sprite o una sucesión de ellos para crear el efecto de la animación.

Mapa de Sprites

Hemos dicho que los sprites son archivos gráficos que podemos cargar uno a uno o bien todos de golpe metidos en un archivo. Al contenido del archivo le llamaremos mapa de sprites y será algo de este tipo (tan grande como queramos):



Crafty.sprite

En CraftyJS la sintaxis para definir un sprite es esta:

Crafty.sprite( tamaño de la celda,  fichero, {mapa}, interespaciado)

Tamaño de la celda (opcional):

Medido en pixels, podemos darle sólo la anchura (x) o bien la anchura y la altura (x,y). Esto implicará que a la hora de definir el mapa nos referiremos a él en posición absoluta o relativa, ejemplo:

Como se indica, este parámetro es opcional. Si no definimos el tamaño, y quisiéramos referirnos al cofre en el ejemplo de arriba deberíamos acceder a la posición [64,64] (teniendo en cuenta que cada celda es de 32x32 pixels). Si definimos el tamaño (32,32) accederemos al cofre en la posición [2,2]. (La primera posición es el 0).

Por otro lado vemos que podemos especificar sólo la anchura (en cuyo caso se asumirá que la celda es cuadrada) o la anchura y la altura, lo que sugiere que aunque es menos habitual las celdas no tienen porque ser cuadradas.

Fichero: No tiene más historia. La ruta en la que se encuentra nuestro sprite o mapa de sprites.

Mapa:  Aquí está el meollo de la cuestión. El formato es:

 {nombre del mapa: [columna, fila, ancho, alto]}

Ejemplo para acceder al cofre sin haber definido tamaño de celda:

       Crafty.sprite('/dir/nombrefich.ext', {cofre: [64,64,32,32]});

Ejemplo para acceder al cofre habiendo definido tamaño de celda:

      Crafty.sprite(32,'/dir/nombrefich.ext', {cofre: [2,2]});

Ejemplo para acceder a todos los dibujos de Rajoy habiendo definido tamaño de celda:

 

     Crafty.sprite(32,'/dir/nombrefich.ext', {rajoyx8: [0,0,4,2]});      

 NOTA: Cuidadito aquí, aunque hemos cogido 8 casillas, estas se redimensionarán al tamaño de nuestra entidad que puede ser de 32x32 o cualquier otro tamaño.

Ejemplo para coger varios sprites a la vez:

     Crafty.sprite(32,'/dir/nombrefich.ext',{
            arriba:[0,0],
            abajo: [2,0],
            dcha:  [2,1],
            izda:   [0,1]

     });



Interespaciado: (opcional). Definimos interespaciado como el espacio que hay entre celda y celda, vamos, algo así como el margen. Podemos definir sólo las x o bien las x,y. Si no ponemos nada se asumirá que es 0. Si no ponemos las y se asumirá que coincide con las x.

Y oiga, ¿Todo esto como se usa?

Es muy sencillo. Al fin y al cabo, lo que arriba hemos denominado 'nombre del mapa'  no es más que un componente, así que, como tal, se usa.

    Crafty.e('2D, Canvas, Fourway, cofre')
      .attr({
              x: 100,
              y: 10,
              w: 100,
              h: 100
            });

Un ejemplito por el amor de dios...

	//Ejemplo de carga de Sprites en CraftyJs
	Game = {
	// Inicializamos y empezamos el programa
	start: function() {
	Crafty.init(480, 320);
	Crafty.background('green');
	//Cargamos el mapa de sprites y definimos el sprite para cada dirección.
	Crafty.sprite(32,'images/spriteMap.png',{
	arriba:[0,0],
	abajo: [2,0],
	dcha: [2,1],
	izda: [0,1]});
	//Creamos una entidad y le incluimos el componente correspondiente al mapa 'dcha'.
	Crafty.e('2D, Canvas, Fourway, dcha')
	.attr({
	x: 100,
	y: 10,
	w: 100,
	h: 100
	})
	.fourway(4);
	}
	}

view raw sprites.js hosted with ❤ by GitHub

Si queréis ver como queda, se podría ver aquí. Notad que aunque el tamaño de las celdas del mapa de sprites sea de 32x32, nuestro componente es de 100x100.

Si aterrizáis por primera ve por aquí quizá deseéis saber cómo ejecutar esto.

Retomando el juego...

Ahora vamos a trasladar todo esto a nuestro juego y vamos a seguir desde aquí.

Tomaremos el mapa de sprites que hay al principio de este documento y lo guardaremos en la carpeta /assets con el nombre de furniman.png. 

Ahora sólo debemos cargarlo y asignar cada sprite a un componente que será usado cuando creemos las entidades. ¿Y dónde lo haremos? ¿Recordáis la escena 'Loading' que espera a que esté todo cargado para iniciar el juego?

Crafty.scene('Loading', function(){

  Crafty.e('2D, DOM, Text')

    .text('Cargando...')

    .attr({ x: 110, y: 140 })

    .textFont({size:'13px'});

  Crafty.load(['assets/furniman.png'], function(){

   Crafty.sprite(32, 'assets/furniman.png', {

spr_muro:   [0, 2],

        spr_suelo:   [1, 2],

spr_tesoro: [2, 2]

    });

  Crafty.scene('Game');

  })

});

Ahora haremos que en el fichero de los componentes, éstos hereden los sprites que hemos definido, sin embargo si recordáis, teníamos entidades para los muros, pues nos interesaba que se detectara la colisión contra ellos, pero no teníamos nada para el suelo. Ahora el suelo deberá tener un dibujito y por tanto también tendrá que ser una entidad. 

Crafty.c('MuroMarron', {
   init: function( ) {
      this.requires('Actor, Pared, spr_muro');
  },
});

Crafty.c('Suelo', {
   init: function( ) {
      this.requires('Actor, spr_suelo');
  },
});

Crafty.c('Tesoro', {
  init: function() {
    this.requires('Actor, spr_tesoro')
  },
 
  /* ...  */

});

Ya sólo queda pintarlos en la escena del juego. Fijaos especialmente en el tesoro que cuando lo cojamos y desaparezca debajo tendrá que tener un suelo!!!

Crafty.scene('Game', function() {

// Colocamos cada cosa en su lugar

  for (var x = 0; x < mapa[0].length; x++) {

    for (var y = 0; y < mapa.length; y++) {

        

      if (mapa[y][x]==0) {  Crafty.e('Suelo').en(x,y);             }        

      if (mapa[y][x]==1) {  Crafty.e('MuroNegro').en(x,y);    }

      if (mapa[y][x]==2) {  Crafty.e('MuroMarron').en(x,y);  }

      if (mapa[y][x]==3) {

         Crafty.e('Suelo').en(x,y);

         Crafty.e('Tesoro').en(x,y);

       }

    }

  }

//Colocamos el personaje principal en el mundo.

 Crafty.e('Politico').en(1, 8);

});

Y con esto ya lo tenemos todo!

Si queréis ver el resultado pinchad aquí.
Si queréis bajaros los fuentes pinchad aquí o aquí