Haciendo juegos con Html5

Como crear SpriteSheets en Phaser.

Existen muchas forma de pulir nuestros juegos con el fin de darle un acabado muy profesional y atractivo para la vista, hacer animaciones de nuestros objetos ya sea explosiones, saltos,etc. es una de ellas. 

 Para lograrlo en Phaser necesitamos de el programa ShoeBox la cual uso ya que es gratis y muy comoda ya la hemos configurado previamente, ahora solo es cuestion de tomar las imagenes que vamos a usar y crear los archivos necesarios explicado en como usar ShoeBox  .

Recuerda que puedes abrir la consola de javascript y tomar todas las imágenes, código, de los ejemplos al final de cada tutorial, pero también las puedes descargar ya mostré varios sitios donde los puedes obtener. 

 Como siempre creamos una nueva instancia:

  var game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo', { preload: preload, create: create});

Creamos nuestra variable:

var animal;

Cargamos nuestros archivos:

function preload() {
    game.load.atlas('volando','sprites.png', 'sprites.json');
};

En esta ocasion lo hacemos mediante el metodo game.load.atlas(nombre clave,"ruta imagen","ruta archivo json"). 

 Que es una Textura Atlas?

 Una textura Atlas es similiar a un sprite sheets ya que ambas son imagenes agrupadas en una sola, la textura atlas tiene un archivo adicional llamado "atlas" que define las posiciones en sus ejes, tamaños de nuestra imagen; pero una de las grandes ventajas radica en que los sprite sheets todas las imagenes tienen un tamaño igual:

Mientras que en este tipo de formato nuestras imágenes en la textura su tamaño puede variar:

Tomada de:jesseFreeman

 Luego tenemos en la funcion create:

function create() {
game.stage.setBackgroundColor(0x22aaff);
animal = game.add.sprite(300,100,'volando');
animal.animations.add("volar");
animal.play("volar",10,true);
  game.add.tween(animal).to({ y: 300 }, 3000, Phaser.Easing.Quadratic.In)
   .to({ x: 20 }, 2000, Phaser.Easing.Quadratic.In)
   .to({ y: 20 }, 2000, Phaser.Easing.Quadratic.In)
   .loop()
   .start();
};

Colocamos un color a nuestro fondo pero esta vez esta lo hago de una forma diferente usando el metodo .setBackgroundColor(color) de nuestro Stage,agregamos nuestro sprite.

Para agregar un animacion resulta muy sencillo usamos la propiedad de nuestro sprite animations(animaciones) y mediante su metodo .add(nombre_clave)"agregar"

 agregamos una nueva animacion solo debemos pasarle al metodo un nombre con la cual vamos a identificar esa animacion. 

Para usar esa animacion lo hacemos con el metodo .play(nombre_clave,velocidad de reproduccion, repetir)"reproducir", luego agrego un Tween  para un que nuestro insecto realize un pequeño movimiento. 

Como  podemos apreciar de una forma muy practica y facil logramos crear una animacion muy fluida todo gracias a nuestro compañero Phaser. 


Hasta la proxima.