Haciendo juegos con Html5

Como usar Plugins en Phaser

Este framework no es uno de los mejores solo por su creador y su gran funcionamiento , sino tambien por la enorme comunidad que posee.

Gracias a esto los aportes al momento de encontrar bug, fallas ha sido mas facil y el constante mejoramiento se ha visto enormemente a pesar del poco tiempo que fue lanzado. 


Entre estos aportes se encuentran la creacion de Plugins muy utiles, hasta FGL creo su propio plugin, aqui hay una pagina donde se encuentran algunos http://ezelia.com/phaser-plugins, por cierto ese plugin para proyeccion Isometrica y fisica esta genial.

Como medir el rendimiento de nuestros juegos con Phaser

Revisando estos plugin ya que la mayoria no los he probado encontre uno sencillo y practico. Con este Plugin podemos ver el rendimiento de Phaser directamente es decir sin necesidad de abrir la consola de chrome(o cualquier navegador que uses).

Nos muestra la velocidad con la que actualiza nuestras funciones , los Fps , el arbol de los objetos creados. No necesitamos mucho codigo para usarlo, para hacerlo aun mas sencillo utilizaremos el codigo anterior de las particulas y asi ver la pequeña porcion del codigo nuevo. 

 Aqui el codigo y el nuevo archivo que cargamos , claro que asi el codigo en html nos da error solo es para dar un ejemplo.

src="phaser2.7.min.js"
//Cargamos el archivo necesario
 src="phaser-debug.js" 

 var game = new Phaser.Game(500, 500, Phaser.AUTO, 'caja', 

{ preload: preload, create: create, update: update }),
particulasDer, particulasIzq;

function preload() {
    game.load.spritesheet('diamante', 'diamantes.png', 64, 64);
}

function create() {
game.add.plugin(Phaser.Plugin.Debug);
    particulasIzq = game.add.emitter(50, game.world.centerY - 200);
   particulasIzq.bounce.setTo(0.5, 0.5);
    particulasIzq.setXSpeed(100, 200);
    //particulasIzq.setYSpeed(-50, 50);
    particulasIzq.makeParticles('diamante', 0, 10, 10, true);
    particulasDer = game.add.emitter(game.world.width - 50, game.world.centerY - 200);
  particulasDer.bounce.setTo(0.5, 0.5);
   particulasDer.setXSpeed(-100, -200);
    //particulasDer.setYSpeed(-50, 50);
   particulasDer.makeParticles('diamante', 1, 10, 10, true);
    // explode, lifespan, frequency, quantity
    particulasIzq.start(false, 5000,10);
    particulasDer.start(false, 5000, 10);
}

function update() {
    game.physics.arcade.collide(particulasIzq, particulasDer, cambio, null, this);
}
function cambio(a, b) {
    a.frame = 3;
    b.frame = 3;
}

Para empezar debemos descargar el plugin eso lo podemos hacer desde aqui: https://github.com/englercj/phaser-debug/release 

Aqui econtramos el archivo phaser-debug.js que debemos cargar igual que lo hacemos con nuestra libreria de Phaser.

 Y para que entre en acción solo necesitamos agregar el plugin, para eso utilizamos el metodo game.add.plugin(Phaser.Plugin.Debug); agregamos el plugin a la nueva instancia de phaser en este caso el nombre del plugin es Debug y listo .

 

Ahora podemos ver el panel grafico donde estan las opciones que antes mencione, puedes abrir el ejemplo aqui, en la pestaña Performance podemos apreciar todas las funciones de phaser , datos como en cuantos milisegundo debe actualizar la funcion para estar a 60fps.

 En la otra pestaña llamada Scene Tree como ya sabemos este framework se basa en el motor grafico PIXI entonces la raiz(root) del arbol es el, y de ahi vemos que todo lo que vive en el World esta contenido en un grupo(Group). 

Solo por mencionarlo PIXI usa algo llamado DisplayContainer que no es mas que un array donde almacena todo lo que agregamos, con el cual podemos eliminar, buscar etc. 

El Stage el cual es el inicio del arbol PIXI stage todo lo que este conectado a el es renderizado. Asi se controla todo lo que se muestra(Display ) en el escenario(Stage).

 Hasta la proxima!!!