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 work with Phaser v3.80.0-beta.2 as well, but if you're installing the plugin with npm you'll need to use --force.

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' }
    ]
  }
});

Or if you would rather activate the plugin per scene:

/* global PhaserDebugDrawPlugin */

new Phaser.Game({
  plugins: {
    scene: [{ key: 'DebugDrawPlugin', plugin: PhaserDebugDrawPlugin }]
  },
  scene: [
    new Phaser.Scene({
      key: 'debugDrawScene',
      plugins: [
        ...Phaser.Plugins.DefaultPlugins.DefaultScene,
        'DebugDrawPlugin'
      ]
    }),
    new Phaser.Scene({
      key: 'noDebugDrawScene'
    })
  ]
});

Module

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

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

Quick Load

Add to your first scene:

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);