phaser-plugin-debug-draw

!Preview

Phaser 3 Debug Draw Plugin
==========================

See demos, screenshots.

It shows:

- Game Objects with origin, bounds, rotation, input
- Bitmap Masks
- Input pointers
- Camera bounds, deadzone, and follow target
- Lights

It doesn't show:

- Game Objects in Containers
- Blitter Bobs
- Particle Emitters

Install
-------

The current version of the plugin requires Phaser v3.53.0 or later.

It should also work with Phaser's v3.60.0-beta series, but you'll need to use npm's --force to install despite the version conflict.

$3

Download and add the plugin UMD script:

``html


`

Or use the CDN scripts:

`html


`

Then add to your game config:

`js
/ global PhaserDebugDrawPlugin /
new Phaser.Game({
plugins: {
scene: [
{ key: 'DebugDrawPlugin', plugin: PhaserDebugDrawPlugin, mapping: 'debugDraw' }
]
}
});
`

$3

`js
import DebugDrawPlugin from 'phaser-plugin-debug-draw';

new Phaser.Game({
plugins: {
scene: [
{ key: 'DebugDrawPlugin', plugin: DebugDrawPlugin, mapping: 'debugDraw' }
]
}
});
`

$3

`js
function preload () {
this.load.scenePlugin(
'PhaserDebugDrawPlugin',
'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',
'debugDraw',
'debugDraw'
);
}
`

$3

Given a global variable game:

`js
game.scene
.getScenes(true)[0]
.load
.scenePlugin(
'PhaserDebugDrawPlugin',
'https://cdn.jsdelivr.net/npm/phaser-plugin-debug-draw@7.1.0',
'debugDraw',
'debugDraw'
)
.start();
`

Options
-------

Set properties on the plugin instance, e.g.,

`js
// In scene init() or create():
this.debugDraw.showPointers = false;
`

See console.log(this.debugDraw) for all the options.

Position & Bounds
-----------------

It draws a dot on the Game Object's x, y.

If the Game Object has an origin, it also draws a rectangle from the origin with dimensions (displayWidth, displayWidth) or (height, width).

Mesh & Rope
-----------

`js
// In scene create():
mesh.setDebug(this.debugDraw.graphic);
rope.setDebug(this.debugDraw.graphic);
``