phaser-plugin-scene-watcher icon indicating copy to clipboard operation
phaser-plugin-scene-watcher copied to clipboard

Scene monitoring and debugging for Phaser 3

Screenshot

Phaser 3 Scene Watcher Plugin

For each scene, it shows (left to right):

  1. key
  2. status
  3. display list count
  4. update list count
  5. active (a)
  6. visible (v)
  7. transitioning (t)
  8. input active (i)
  9. keyboard input active (k)

See the demo or Cavern Quest.

Browser / UMD

Use phaser-plugin-scene-watcher.umd.js and the global PhaserSceneWatcherPlugin.

/* global PhaserSceneWatcherPlugin */
new Phaser.Game({
  plugins: {
    global: [
      { key: 'SceneWatcher', plugin: PhaserSceneWatcherPlugin, start: true }
    ]
  },
});

Module

Install phaser-plugin-scene-watcher from npm or yarn and import:

import SceneWatcherPlugin from 'phaser-plugin-scene-watcher';

Or import directly from phaser-plugin-scene-watcher.esm.js:

import SceneWatcherPlugin from 'path/to/phaser-plugin-scene-watcher.esm.js';

Then pass the imported value in the game's plugin config:

new Phaser.Game({
  plugins: {
    global: [
      { key: 'SceneWatcher', plugin: SceneWatcherPlugin, start: true }
    ]
  },
});

Quick load

function preload () {
  this.load.plugin('PhaserSceneWatcherPlugin', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-plugin-scene-watcher.umd.js', true);
}

Log scene events to console

watchAll() starts logging scene events for all existing scenes. Call it once after all scenes are added.

From the game configuration:

new Phaser.Game({
  callbacks: {
    postBoot: function (game) {
      // Use the `key` you added the plugin with.
      game.plugins.get('SceneWatcher').watchAll();
    }
  }
});

From a scene:

function init () {
  // Use the `key` you added the plugin with.
  this.plugins.get('SceneWatcher').watchAll();
}