phaser-plugin-scene-watcher

Scene monitoring and debugging for Phaser 3

Usage no npm install needed!

<script type="module">
  import phaserPluginSceneWatcher from 'https://cdn.skypack.dev/phaser-plugin-scene-watcher';
</script>

README

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

Use phaser-plugin-scene-watcher.esm.js and the plugin's default export:

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

new Phaser.Game({
  plugins: {
    global: [
      { key: 'SceneWatcher', plugin: SceneWatcherPlugin, start: 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) {
      game.plugins.get('SceneWatcher').watchAll();
    }
  }
});

From a scene:

function init () {
  this.plugins.get('SceneWatcher').watchAll();
}

Use the same key that you added the plugin with.