View and change game properties, with Tweakpane.
- First Phaser 3 game β simple game, helper functions
- All the demos
You can also paste the Quick load snippet into any of the labs examples.
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.
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/[email protected]/dist/phaser.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
npm install phaser-plugin-inspector tweakpane
This package has an ES module (phaser-plugin-inspector.esm.js
, marked as module
) and a CommonJS-compatible UMD module(phaser-plugin-inspector.umd.js
, 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';
function preload() {
this.load.scripts('inspector', [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-plugin-inspector.umd.js',
]);
this.load.once('complete', () => {
PhaserPluginInspector.Install(this.plugins);
});
}
Given a game
variable:
const scene = game.scene.getScenes(true)[0];
scene.load.scripts('inspector', [
'https://cdn.jsdelivr.net/npm/[email protected]/dist/tweakpane.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser-plugin-inspector.umd.js',
]);
scene.load.once('complete', () => {
PhaserPluginInspector.Install(game.plugins);
}).start();
All of the βPrintβ buttons call 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.
You can inspect game objects using the Display List: Inspect and Update List: Inspect buttons in each scene. The new folder is added to the end of the inspector pane. Look in the console to confirm.
To step one frame at a time, use Game β Loop β Sleep, Game β Step (repeat), Game β Loop β Wake.
These create a set of controls for common Phaser objects.
You can use these functions with or without the plugins.
The pane
argument is the Tweakpane pane or a folder in it. The options
argument is options for the folder.
Each function creates a folder and returns it.
If you've installed the plugins, then within a scene context (this
)
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();
Some of these folders need to be disposed manually if you destroy the target object or stop the scene it belongs to. Use
folder.dispose();
Adds a set of "active" toggles for any objects with an active
property, identified by name
.
Adds a set of "alpha" sliders for any objects with an alpha
property, identified by name
.
Adds a folder for a sprite's animation state, e.g.,
AddAnimationState(sprite.anims, pane);
Adds a folder for a game object's Arcade Physics body, e.g.,
AddArcadeBody(sprite.body, pane);
Adds a folder for a camera, e.g.,
AddCamera(this.cameras.main, pane);
Adds a folder for a tween chain.
Dispose this folder if you remove the tween chain.
Adds a folder for a game object's FX component, e.g.,
AddFXComponent(sprite.preFX, pane);
Note that Post FX controllers are always enabled.
Adds a folder for a game object's FX controller, e.g.,
const barrelEffect = sprite.preFX.addBarrel();
AddFXController(barrelEffect, pane);
Note that Post FX controllers are always active.
Adds a folder for a game object (except group).
Adds a folder for a group.
Adds a folder for a game object's interactive object, e.g.,
AddInput(sprite.input, pane);
Adds a folder for a keyboard key object.
Dispose this folder if you remove the key.
Adds a folder for an object map of keyboard key objects, such as that returned by addKeys().
Dispose this folder if you remove those keys.
Adds a folder for a light (not point light).
Adds a folder for a particle emitter.
Adds a set of "visible" toggles for the scenes, e.g.,
AddScenes(this.scene.manager.getScenes(false), pane);
Adds a folder for a sound.
Adds a folder for a timeline.
Adds a folder for a timer event.
Dispose this folder if you remove the timer event.
Adds a folder for a tween.
Adds a folder for a Video game object.
Adds a set of "visible" toggles for any objects with an visible
property, identified by name
.