Inspect and manipulate Phaser Sprites (via dat.gui). Demo

Install

Bower

bower install -S samme/phaser-sprite-gui

NPM

npm install -S phaser-sprite-gui

If dat.gui/index.js doesn't compile, use dat.gui/build/dat.gui.js instead.

CommonJS / Webpack

It should work. The exported constructor is identical to Phaser.SpriteGUI.

Drop-in install

Add dat.gui.js and index.js before your game scripts.

Use

// In create():
var sprite = game.add.sprite();
// …
var gui = new Phaser.SpriteGUI(sprite);

// In shutdown():
gui.destroy();

Options

Pass GUI params

// Example: 320px wide panel
var gui = new SpriteGUI(sprite, {width: 320});

Filter sprite properties

// Example: Show all properties *except* `body`
var gui = new SpriteGUI(sprite, null, {exclude: ['body']});

// Example: Show *only* `body.velocity.x`, `body.velocity.y`
var gui = new SpriteGUI(sprite, null, {include: ['body', 'velocity', 'x', 'y']});

For nested properties, include must contain every name in the property chain.