Haciendo juegos con Html5

Estados en Phaser

Otras de las caracteristicas muy utiles de Phaser son los Estados, las funciones que usamos comunmente (Preload,Create,Update) no es mas que estados si has estudiado notaras cuando se termina el estado Preload inmediatamente cambia al estado Create y asi sucesivamente hasta que ya no quede ningun estado pendiente. 

Esto en teoria y practica esto resulta muy util para nuestros juegos, imaginemos un juego muy basico con dos estado uno llamado "intro" y otro llamado "pierde" , asi solo seria cuestion de iniciar el estado "intro" para iniciar nuestro juego y cuando perdemos llamamos al estado "pierde" veamos el codigo. 

 En esta ocasion usamos la funcion window.onload esta funcion se ejecuta cuando el arbol del DOM se hay cargando todo aqui declaramos nuestra variable, creamos una nueva instancia de Phaser.Game pero esta vez no creamos el objeto con la funciones principales ({preload:preload,create:create}):

var game;
window.onload=function(){
game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo');
game.state.add("_estado",estado);
game.state.start("_estado");
};

Luego tenemos el estado, voy a usar un ejemplo ya visto para no complicar tanto la cosa, para agregar un estado solo usamos game.state.add("nombreClave",nombre de la funcion); y para iniciar el estado usamos game.state.start("nombreClave") esto ejecuta la funciones que tenga dicho estado. 

Aqui no tenemos nada nuevo ya que es un ejemplo de particulas que ya hemos visto , pero hay algunas cosas interesantes que quiero comentar:

var estado = function (){
this.particulas=null;
};
estado.prototype={
preload:function() {
    this.load.image('_diamante', 'diamante.png');
},
create:function() {
    this.physics.startSystem(Phaser.Physics.ARCADE);
    this.stage.backgroundColor = 0x114799;
    this.particulas = game.add.emitter(0, 0, 100);
        this.particulas.makeParticles('_diamante');
    this.particulas.gravity = 200;
      this.input.onDown.add(this.genera, this);
},
genera:function(punto) {
    this.particulas.x = punto.x;
    this.particulas.y = punto.y;
   this.particulas.start(true, 2000, null, 10);
}
};

A primera vista vemos el primer cambio la estructura es diferente digamos que hemos creado la clase "estado", antes teniamos a "particulas" como una variable ahora se puede decir es una propiedad de la clase "estado", luego el prototype de la funcion estado creamos los funciones principales(preload,create) y la funcion genera pero escritos dentro de un objeto literal para el cual hay que llevar ciertas normas. 

Vemos que ya no ncesitamos escribir (game.add), cuando agregamos esta funcion como estado hemos creado un link(union) con Phaser.Game y esto quiere decir que el puntero "this" dentro de la funcion apunta directamente a todos sus metodos hablo de agregar(.add), camara(.camera), particulas(.particles), etc. 


 Podemos concluir entonces que de esta manera podemos crear cuanto estados queremos y llamarlo directamente o que se llamen uno a otros ,esto es si creamos un estado "cargar" donde cargamos todas las imagenes,sonido,etc que vamos a usar, cuando esto se complete entonces llamamos al otro estado digamos "menu" donde estaria nuestra portada, botones y asi sucesivamente. Hasta la proxima.