Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/samme/phaser-sprite-gui

Inspect and manipulate sprites with dat.gui. Phaser 2/CE
https://github.com/samme/phaser-sprite-gui

dat-gui phaser phaser2

Last synced: 3 months ago
JSON representation

Inspect and manipulate sprites with dat.gui. Phaser 2/CE

Awesome Lists containing this project

README

        

![Screenshot](https://samme.github.io/phaser-sprite-gui/screenshot.png)

Inspect and manipulate Phaser Sprites (via dat.gui). [Demo](https://samme.github.io/phaser-sprite-gui/)

Install
-------

### Bower

```sh
bower install -S samme/phaser-sprite-gui
```

### NPM

```sh
npm install -S phaser-sprite-gui
```

If [dat.gui/index.js](https://github.com/dataarts/dat.gui/blob/master/index.js) doesn't compile, use [dat.gui/build/dat.gui.js](https://github.com/dataarts/dat.gui/blob/master/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](https://github.com/dataarts/dat.gui/tree/master/build/dat.gui.js) and [index.js](index.js) before your game scripts.

Use
---

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

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

### Options

#### Pass GUI params

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

#### Filter sprite properties

```javascript
// 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.