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.

Browser / UMD

Download and add the plugin UMD script:

<script src='path/to/phaser.js'></script>
<script src='path/to/phaser-plugin-debug-draw.umd.js'></script>

Or use the CDN scripts:

<script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]'></script>

Then add to your game config:

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

Module

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

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

Quick Load

function preload () {
  this.load.scenePlugin(
    'PhaserDebugDrawPlugin',
    'https://cdn.jsdelivr.net/npm/[email protected]',
    'debugDraw',
    'debugDraw'
  );
}

Load from Console

Given a global variable game:

game.scene
  .getScenes(true)[0]
  .load
  .scenePlugin(
    'PhaserDebugDrawPlugin',
    'https://cdn.jsdelivr.net/npm/[email protected]',
    'debugDraw',
    'debugDraw'
  )
  .start();

Options

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

// 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

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