Cómo obtener información de 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.

↻

Artículo original de 2014 · revisado en 2026

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.

Phaser clásico · código histórico

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:

JavaScriptCódigo histórico

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:

JavaScriptCódigo histórico

var _caja;

Cargamos nuestra imagen:

JavaScriptCódigo histórico

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

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

JavaScriptCódigo histórico

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

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

JavaScriptCódigo histórico

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.

!

Demo histórico no disponible

El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://googledrive.com/host/0B2Br6oKX-RFNU1YtZlF6SlBNMWc/debug.html.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de colisiones y física, sprites y recursos 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.

ADVERTISEMENT

ADVERTISEMENT