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.
Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.
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.
El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://ee486572b3d8fa5d159f11b4f4fc8f66b0202ae6.googledrive.com/host/0B2Br6oKX-RFNVDNZSVhnaUY4Z2s/estados.html.
El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de sistema de partículas, cámara sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.
No comments:
Post a Comment