README
Phaser 3 Inspector Plugin π§
View and change game properties, with Tweakpane.
Demos
- Games β early version of the plugin, many game features
- First Phaser 3 game β simple game, helper functions
- All the demos
Install
The plugins add controls for the game and scene systems. If you don't need these, you can skip this step and use the helper functions only.
Browser / UMD
First Phaser 3 game shows this setup.
Include Phaser, Tweakpane, and the plugin UMD script in this order. You can download the scripts or use the CDN links.
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.js"></script>
<script src="https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@1.5.0/dist/phaser-plugin-inspector.umd.js"></script>
If this is the only plugin you're using then you can use the "default" configuration:
/* global PhaserPluginInspector */
new Phaser.Game({
plugins: PhaserPluginInspector.DefaultPluginsConfig
});
Or you can configure the plugins individually:
/* global PhaserPluginInspector */
const { InspectorGlobalPlugin, InspectorScenePlugin } = PhaserPluginInspector;
new Phaser.Game({
plugins: {
global: [{ key: 'InspectorGlobalPlugin', plugin: InspectorGlobalPlugin, mapping: 'inspectorGame' }],
scene: [{ key: 'InspectorScenePlugin', plugin: InspectorScenePlugin, mapping: 'inspectorScene' }]
}
});
You can use any mapping, or { start: true }
for no mapping. If you don't want to add any controls, you don't need any mapping.
The helper functions are on the same namespace:
/* global PhaserPluginInspector */
const { AddGameObject } = PhaserPluginInspector
Module
npm install phaser-plugin-inspector tweakpane
This package has an ES module (marked as module
) and a CommonJS-compatible UMD module (marked as browser
). You should use the ES module, but some bundlers may pick the UMD module by default. Configure your bundler to use the module
field, or add an alias to the ES module file, or import the ES module file directly.
If this is the only plugin you're using then you can use the "default" configuration:
import { DefaultPluginsConfig } from 'phaser-plugin-inspector';
new Phaser.Game({
plugins: DefaultPluginsConfig
});
Or you can configure the plugins individually:
import { InspectorGlobalPlugin, InspectorScenePlugin } from 'phaser-plugin-inspector';
new Phaser.Game({
plugins: {
global: [{ key: 'InspectorGlobalPlugin', plugin: InspectorGlobalPlugin, mapping: 'inspectorGame' }],
scene: [{ key: 'InspectorScenePlugin', plugin: InspectorScenePlugin, mapping: 'inspectorScene' }]
}
});
You can import the helper functions as well:
import { AddGameObject } from 'phaser-plugin-inspector';
Quick load
function preload() {
this.load.scripts('inspector', [
'https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.js',
'https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@1.5.0/dist/phaser-plugin-inspector.umd.js',
]);
this.load.once('complete', () => {
PhaserPluginInspector.Install(this.plugins);
});
}
Load from console
Given a game
variable:
const scene = game.scene.getScenes(true)[0];
scene.load.scripts('inspector', [
'https://cdn.jsdelivr.net/npm/tweakpane@3.0.5/dist/tweakpane.js',
'https://cdn.jsdelivr.net/npm/phaser-plugin-inspector@1.5.0/dist/phaser-plugin-inspector.umd.js',
]);
scene.load.once('complete', () => {
PhaserPluginInspector.Install(this.plugins);
}).start();
Use
All of the βPrintβ buttons use console.info()
or console.table()
.
Beware that Tweakpane inputs (checkboxes, sliders, etc.) do not update their values automatically; use the pane's Refresh button.
Tweakpane monitors are updated automatically 5 times per second. For more precise work you may want to pause a scene or its systems.
Helper functions
These create a set of controls for common Phaser objects.
You can use these functions with or without the plugins.
- AddAnimationState(animationState, pane, options?) β folder
- AddArcadeBody(body, pane, options?) β folder
- AddGameObject(obj, pane, options?) β folder
- AddGroup(group, pane, options?) β folder
- AddInput(interactiveObject, pane, options?) β folder
- AddKey(key, pane, options?) β folder
- AddKeys(keys, pane, options?) β folder
- AddParticleEmitter(emitter, pane, options?) β folder
- AddSound(sound, pane, options?) β folder
- AddTimeline(timeline, pane, options?) β folder
- AddTimerEvent(timerEvent, pane, options?) β folder
- AddTween(tween, pane, options?) β folder
Each function creates a folder. pane
is the Tweakpane pane or a folder in it and options
is the folder options.
If you've installed the plugins, then
this.inspectorGame.pane
orthis.inspectorScene.pane
is the main panethis.inspectorGame.folder
is the βGameβ folderthis.inspectorScene.folder
is the current scene's folder
See the First Phaser 3 game demo for this setup.
If you're not using the plugins, then you should create a pane yourself:
const pane = new Tweakpane.Pane();
You should remove any key, timeline, timer event, or tween folders yourself when done with those objects or stopping the scene:
folder.dispose();