How Scenes Work

Updated: 22nd February 2018 by Richard Davey   @photonstorm

In Phaser 3 the Scene Manager maintains and runs multiple scenes, in parallel if required. In v2 and early betas these were called States. Scenes have been elevated considerably from their humble origins in Phaser 2, and are now complete game worlds in their own right. In Phaser 2 there was a concept of the Game World, in which all Game Objects lived. In Phaser 3 this has gone, replaced with the Scenes, which maintain their own "worlds".

All of the Scene files live in src/scene.

There is a global Scene Manager. This parses, creates and maintains all of the Scenes. When the game boots it creates an instance of the Scene Manager which is responsible for handling the Scene set-up.

A Base Scene is a quite small class that contains just one key property called sys which is a reference to the Scene Systems manager. It's the only property you cannot and should not overwrite within a Scene.

Scene Systems

The Scene Systems controller is in src/scene/Systems.js, and the systems themselves reside in the scene/systems sub-folder. Basically Scene Systems are all the various systems that a Scene needs in order to work. Examples of Scene Systems are:

  • The Game Object Factory
  • The Loader
  • The Main Loop
  • The Update Manager
  • A Camera
  • Event Dispatcher

... and so on.

Remember in Phaser 2 how you could do this.add.sprite from within your Scene? The add part of that was the Game Object Factory. In Phaser 2 the Factory was global, belonging to the Game instance itself, and the Scene just referenced it. In V3 the Game no longer holds any systems (other than Textures), they now all belong to the Scenes themselves. So in v3 this.add.sprite is actually talking to the scene/systems/GameObjectFactory instead. There are lots of other systems in there, and lots more to come.

In V2 Scenes used to be populated with masses of properties (over 30 of them), references to all the various systems. In V3 this is now under your control via the Scene Settings object, so they can decide which gets exposed and what doesn't.

Important When a Scene System needs to reference another Scene System, it must do so via the scene.sys property. For example say one system needs to add an item to the display list, it should call scene.sys.add and not scene.add, because that property may have been excluded via the Scene Settings.