scenes
Use this skill when working with Phaser 4 scenes. Covers scene lifecycle methods, scene transitions, parallel scenes, scene communication, sleeping, pausing, restarting, and the SceneManager. Triggers on: Scene, scene lifecycle, preload, create, update, scene transition, SceneManager.
By phaserjs · 594 installs
npx skills add phaserjs/phaser --skill scenes
Source repository · Upstream listing
Scenes
Scenes are the organizational backbone of a Phaser game. Each Scene has its own lifecycle (init, preload, create, update), its own set of injected systems (this.add, this.input, this.cameras, etc.), and can be started, stopped, paused, slept, or run in parallel with other Scenes. The ScenePlugin ( this.scene ) controls all multi scene orchestration.
Key source paths: src/scene/Scene.js , src/scene/Systems.js , src/scene/SceneManager.js , src/scene/ScenePlugin.js , src/scene/Settings.js , src/scene/const.js , src/scene/events/ , src/scene/InjectionMap.js
Related skills: ../game setup and config/SKILL.md, ../loading assets/SKILL.md, ../events system/SKILL.md
Quick Start
Core Concepts
Scene Lifecycle
The lifecycle is driven by SceneManager.bootScene() and SceneManager.create() :
1. PENDING (0) Scene is registered but not yet started.
2. INIT (1) scene.init(data) is called if defined. Data comes from settings.data .
3. START (2) Systems.start() fires. Events start and ready are emitted.
4. LOADING (3) scene.preload() is called if defined. Loader runs. On completion, proceeds to create.
5. CREATING (4) scene.create(data) is called if defined. Same data as init.
6. RUNNING (5) scene.update(time, delta) called every frame. Scene renders.
7. PAUSED (6) No update, but still renders.
8. SLEEPING (7) No update, no render. State preserved in memory.
9. SHUTDOWN (8) Scene is shut down, systems emit shutdown . Can be restarted.
10. DESTROYED (9) Scene is fully destroyed. Cannot be restarted.
State constants are on Phaser.Scenes : Phaser.Scenes.PENDING , Phaser.Scenes.RUNNING , etc.
Flow when no preload exists: init() create() update() loop (preload is skipped entirely).
Flow with preload: init() preload() loader runs create() update() loop.
Scene Injected Properties
These properties are injected into every Scene instance via the InjectionMap ( src/scene/InjectionMap.js ). The left side is the Systems key, the right is the Scene property name.
Global Managers (shared across all scenes)
Scene Property Type Description
this.game Phaser.Game The Game instance
this.renderer CanvasRenderer \ WebGLRenderer The active renderer
this.anims Phaser.Animations.AnimationManager Global animation manager
this.cache Phaser.Cache.CacheManager Global cache for non image assets
this.plugins Phaser.Plugins.PluginManager Global plugin manager
this.registry Phaser.Data.DataManager Global data manager (shared between scenes)
this.scale Phaser.Scale.ScaleManager Global scale manager
this.sound NoAudio \ HTML5Audio \ WebAudioSoundManager Sound manager
this.textures Phaser.Textures.TextureManager Global texture manager
Scene Specific Systems (unique per scene)
Scene Property Type Description
this.sys Phaser.Scenes.Systems Scene systems (never overwrite)
this.events Phaser.Events.EventEmitter Scene specific event emitter
this.cameras Phaser.Cameras.Scene2D.CameraManager Scene camera manager
this.add Phaser.GameObjects.GameObjectFactory Factory: creates and adds to display list
this.make Phaser.GameObjects.GameObjectCreator Creator: creates but does NOT add to display list
this.scene Phaser.Scenes.ScenePlugin Scene manager plugin (start/stop/launch)
this.children Phaser.GameObjects.DisplayList The scene display list
this.lights Phaser.GameObjects.LightsManager Scene lights (plugin)
this.data Phaser.Data.DataManager Scene specific data manager
this.input Phaser.Input.InputPlugin Scene input manager (plugin)
this.load Phaser.Loader.LoaderPlugin Scene loader (plugin)
this.time Phaser.Time.Clock Scene time/clock (plugin)
this.tweens Phaser.Tweens.TweenManager Scene tween manager (plugin)
this.physics Phaser.Physics.Arcade.ArcadePhysics Arcade physics (if configured)
this.matter Phaser.Physics.Matter.MatterPhysics Matter physics (if configured)
Customizing the Injection Map
Scene Manager
The SceneManager ( src/scene/SceneManager.js ) is a game level system. Do not call its methods directly use this.scene (the ScenePlugin) instead. The SceneManager:
Maintains an ordered array of scenes (determines render/update order)
Processes a queue of operations (start, stop, sleep, etc.) at the start of each game step
All ScenePlugin methods are queued, not immediate (they execute next frame)
Common Patterns
Switching Between Scenes
Running Scenes in Parallel
Passing Data Between Scenes
Pausing and Resuming
Adding and Removing Scenes at Runtime
Cross Scene Event Communication
One scene emits custom events; another listens. The emitting scene is decoupled.
Configuring Plugins Per Scene
Disable all default plugins (only core plugins remain):
Include only specific plugins:
Scene Config in Constructor
Pass config to super() for per scene physics, loader, or preloaded files:
Safely Restarting Scenes
Reset state in init() , not the constructor. The constructor runs once; init() runs every start.
Events
All events are emitted on this.events (the scene specific EventEmitter) and have string values. Listen via this.events.on('eventname', callback) .
Lifecycle Events
Event String Constant Callback Signature When
'boot' Phaser.Scenes.Events.BOOT (sys) Once, when scene is first instantiated (for plugins)
'start' Phaser.Scenes.Events.START (sys) Scene systems start (for plugins)
'ready' Phaser.Scenes.Events.READY (sys, data) After start, for user code
'create' Phaser.Scenes.Events.CREATE (scene) After create() method runs, scene is now RUNNING
'preupdate' Phaser.Scenes.Events.PRE UPDATE (time, delta) Before update each frame
'update' Phaser.Scenes.Events.UPDATE (time, delta) During update each frame
'postupdate' Phaser.Scenes.Events.POST UPDATE (time, delta) After update each frame
'prerender' Phaser.Scenes.Events.PRE RENDER (renderer) Before scene renders
'render' Phaser.Scenes.Events.RENDER (renderer) After scene renders
State Change Events
Event String Constant Callback Signature When
'pause' Phaser.Scenes.Events.PAUSE (sys, data) Scene is paused
'resume' Phaser.Scenes.Events.RESUME (sys, data) Scene is resumed
'sleep' Phaser.Scenes.Events.SLEEP (sys, data) Scene is sent to sleep
'wake' Phaser.Scenes.Events.WAKE (sys, data) Scene is woken up
'shutdown' Phaser.Scenes.Events.SHUTDOWN (sys, data) Scene is shutting down
'destroy' Phaser.Scenes.Events.DESTROY (sys) Scene is being destroyed
Transition Events
Event String Constant Callback Signature Emitted On
'transitionout' TRANSITION OUT (targetScene, duration) Source scene
'transitioninit' TRANSITION INIT (fromScene, duration) Target scene (during init)
'transitionstart' TRANSITION START (fromScene, duration) Target scene (after create)
'transitionwake' TRANSITION WAKE (fromScene, duration) Target scene (if woken from sleep)
'transitioncomplete' TRANSITION COMPLETE (scene) Target scene (when done)
Game Object Events
Event String Constant Callback Signature
'addedtoscene' ADDED TO SCENE (gameObject, scene)
'removedfromscene' REMOVED FROM SCENE (gameObject, scene)
For detailed API reference tables and source file maps, see [the reference guide](references/REFERENCE.md).
Gotchas and Common Mistakes
1. Operations are queued, not immediate. Calling this.scene.start('X') does not start X synchronously. It happens at the next SceneManager update. Do not rely on the target scene's state within the same frame.
2. start() shuts down the calling scene. this.scene.start('X') stops the current scene and starts X. If you want both running, use launch() or run() .
3. switch() sleeps, start() shuts down. switch() preserves the current scene in memory (sleep), while start() triggers a full shutdown. Sleeping scenes still have their events and references live.
4. Paused scenes still render. pause() only stops the update loop. The scene is still drawn. Use sleep() to stop both update and render.
5. Do not overwrite this.sys . The Scene class JSDoc explicitly warns: overwriting this.sys will break everything.
6. this.scene.start() with no key restarts the current scene. This is equivalent to this.scene.restart() .
7. Data passed to start() / launch() is available in both init(data) and create(data) . It is stored in settings.data and accessible later via this.sys.getData() .
8. Sleeping scenes can still receive events from other scenes. If Scene A is sleeping but Scene B emits on the global registry, Scene A's listeners still fire. Be careful with active listeners on sleeping scenes.
9. Scene render order = array order. Scenes later in the array render on top. Use bringToTop() , sendToBack() , moveAbove() , moveBelow() to control layering.
10. shutdown vs destroy . Shutdown puts a scene into hibernation (can restart). Destroy permanently removes it. Listen to 'shutdown' to free resources that should be recreated on restart. Listen to 'destroy' for final cleanup.
11. Plugin properties like this.physics and this.matter are only available if the physics system is configured. They will be undefined otherwise.
12. The create event fires AFTER the create() method returns , and after the status changes to RUNNING. If you need to do post create setup, listen for this event.
13. Reset state in init() , not the constructor. The constructor only runs once when the scene is first instantiated. init() runs every time the scene starts/restarts. Place state resets there.
14. Clean up on shutdown to avoid stale references. Listen for this.events.once('shutdown', ...) to clear arrays holding game objects, remove external event listeners, etc. Stale references to destroyed game objects cause errors on restart.
15. switch() restarts a paused scene, never resumes it. If you need resume behavior, use run() instead.
16. Scenes update in reverse order, render in forward order. The top scene updates first (gets input priority), but renders last (appears on top). Establish render order in the game config scene array.