Phaser Display List Watcher Plugin

Shows the scene display lists.

Display

± type name (x, y) depth (children) 

+ is visible; - is invisible.

x, y, and depth are rounded to the nearest 0.1.

Keyboard Controls

Key Combination	Action
shift + left, right, up, down	Scroll the display
shift + Z	Toggle display on/off
shift + X	Show display
shift + C	Hide display
shift + V	Reset scroll

Multiple Scenes

Scene displays are stacked left to right. Use the keyboard controls to scroll.

The plugin doesn't render in hidden scenes. If you have stopped scenes that you never need to use again, you could remove them to make space.

The plugin renders with the scene it belongs to, so content in scenes on top may cover content in scenes below.

Install

Quick Load

• Quick load example

// In preload():
this.load.scenePlugin('DisplayListWatcher', 'https://cdn.jsdelivr.net/npm/[email protected]')

Module

import DisplayListWatcher from 'phaser-plugin-display-list-watcher'

new Phaser.Game({
  plugins: {
    scene: [
      {
        key: 'DisplayListWatcher',
        plugin: DisplayListWatcher,
        start: true
      }
    ]
  }
})

UMD / script tag

• Script tag example

<!-- after phaser.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

/* global DisplayListWatcher */

new Phaser.Game({
  plugins: {
    scene: [
      {
        key: 'DisplayListWatcher',
        plugin: DisplayListWatcher,
        start: true
      }
    ]
  }
})