Haciendo juegos con Html5

Información de nuestros objetos en Phaser.

Una de las características de Phaser utiles al momento de desarrollar nuestro proyecto es observar la información sobre los objetos que tenemos en pantalla, esto nos permite saber exactamente tanto la información mas básica hasta la mas avanzada de nuestro sprites,etc.

Pero en que nos puede ayudar?

En todo si estamos utilizando algún sistema de física y en algún momento determinado los cuerpos no colsionan esto nos ayudara a identificar rápidamente el problema, si necesitas ver los limites del sprite, conocer su velocidad, posición ,angulo, son muchas posibilidades.

Comenzemos:

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

En esta ocasion a nuestro clase Phaser.Game debemos pasarle como parametro una nueva función llamada render utilizada para mostrar todo tipo de información de los objetos y también nos sirve para dibujar figuras nativas del canvas pero eso solo funcióna en modo Phaser.CANVAS aunque existe una forma de hacerlo en webgl pero eso lo explicare mas adelante. Declaramos nuestra variable:

var _caja;

Cargamos nuestra imagen:

function preload() {
    game.load.image('box', 'caja.png');
}

Inicializamos nuestra variable y le colocamos un color azul a nuestro canvas:

function create() {
    game.stage.backgroundColor = 0x114799;
    _caja = game.add.sprite(100,150,"box");
};

Ahora creamos la función render responsable de mostrar la informacion:

function render(){
game.debug.spriteInfo(_caja,10,20);
game.debug.spriteBounds(_caja);
};

Mediante nuestra variable game accedemos a la clase Phaser.Utils.Debug y llamamos al método spriteInfo(objeto,posX,posY); con esto podemos ver muchas de las propiedades de nuestro objeto (nombre,información del limite,posición,angulo).

Mientras que con el método spriteBounds(objeto) podemos observar el limite de nuestro objeto en este caso un cuadro. Aun existen muchos mas métodos pero solo explique lo mas básico a medida que sigamos avanzando utilizare otros muy utiles. Hasta la Proxima.