Skip to content

Scene manager

Scene manager plugin:

  • In each scene instance: scene.scene

Add new scene

var newScene = scene.scene.add(key, sceneConfig, autoStart, data);
// var newScene = game.scene.add(key, sceneConfig, autoStart, data);
  • key : A unique key used to reference the Scene.
  • sceneConfig : The config for the Scene, or a scene class.
  • autoStart : Set true to start scene immediately after added.
  • data : Optional data object. This will be set as and passed to scene.init.

Load scene from external files

  1. load script
    scene.load.script(key, url);
  2. add new scene
    scene.scene.add(key, sceneConfig, autoStart);
    // game.scene.add(key, sceneConfig, autoStart);

Destroy scene

  • Fires destroy

Start scene

  • Launch the given Scene and run it in parallel with this one
    scene.scene.launch(key, data);
  • Shutdown this Scene and run the given one
    scene.scene.start(key, data);
  • Restarts this Scene

Pause/Resume scene

  • Pause : stops the update step but still renders
    // scene.scene.pause();  // pause myself
    • Fires pause
  • Resume : starts the update loop again
    // scene.scene.resume();  // resume myself
    • Fires resume
  • Sleep : no update, no render but doesn't shutdown
    // scene.scene.sleep();  // sleep myself
    • Fires sleep
  • Wake-up: starts update and render
    // scene.scene.wake();  // wake-up myself
    • Fires wake
  • Makes this Scene sleep then starts the Scene given

Run scene

Runs the given Scene, but does not change the state of this Scene.

If the given Scene is paused, it will resume it. If sleeping, it will wake it. If not running at all, it will be started., data);

Stop scene

Shutdown the Scene, clearing display list, timers, etc.

// scene.scene.stop();  // stop myself

Set visible

scene.scene.setVisible(value, key);  // value: true/false
// scene.scene.setVisible(value);    // set visible to myself

Read status

var isSleep = scene.scene.isSleeping(key);
// var isSleep = scene.scene.isSleeping();
var isPaused = scene.scene.isPaused(key);
// var isPaused = scene.scene.isPaused();
var isActive = scene.scene.isActive(key);
// var isActive = scene.scene.isActive();
var isVisible = scene.scene.isVisible(key);
// var isVisible = scene.scene.isVisible();
Update/isActive Render/isVisible
Run ✔ ✔
Pause ✔


  • Pause: Pause update stage.
  • Sleep: Pause update stage, and set scene invisible.
  • Stop: Shoutdown, clearing display list, timers, etc.

Get scene

var scene = scene.scene.get(key);

Order of scenes

Swaps the position of two scenes in the Scenes list.

scene.scene.swapPosition(keyA, keyB);
// scene.scene.stop(keyA);
scene.scene.moveAbove(keyA, keyB);
// scene.scene.moveAbove(keyA);

Scene B is directly above Scene A.

scene.scene.moveBelow(keyA, keyB);
// scene.scene.moveBelow(keyA);

Scene B is directly below Scene A.

// scene.scene.moveBelow();
// scene.scene.moveDown();
// scene.scene.bringToTop();
// scene.scene.sendToBack();


    target: key,
    // data: null,
    // moveAbove: false,
    // moveBelow: false,

    duration: 1000,

    // remove: false,
    // sleep: false,
    // allowInput: false,

    // onUpdate: null,
    // onUpdateScope: scene
  • target : The Scene key to transition to.
  • data : An object containing any data you wish to be passed to the target scenes init / create methods.
  • moveAbove. moveBelow : Move the target Scene to be above/below this current scene before the transition starts.
  • duration : Transition duration, in ms.
  • remove : Set true to remove this scene.
  • sleep : Set true to sleep this scene, set false to stop this scene.
  • allowInput : Set true to enable input system of current scene and target scene.
  • onUpdate ,onUpdateScope : Transition callback in each tick.
    var callback = function(progress) {
    • progress : 0 ~ 1

Execution flow

  1. Invoke scene.scene.transition method.
    • Current scene :
      • Fire 'transitionout' event.'transitionout', function(targetScene, duration){ });
      • Run transition's onUpdate callback every tick.
      • Current scene's update method is still running every tick.
    • Target scene :
      • Start target scene immediately.
      • Fire target scene's 'transitionstart' event. (Register this event in create stage)'transitionstart', function(fromScene, duration){ });
  2. When transition completed.
    • Current scene :
      • Remove or sleep current scene after transition completed.
    • Target scene :
      • Fire target scene's transitioncomplete event.'transitioncomplete', function(fromScene){ });


  • boot'transitioninit', function(fromScene, duration)){ });
  • start'transitionstart', function(fromScene, duration){ });
  • transition-out'transitionout', function(targetScene){ });
  • complete'transitioncomplete', function(fromScene){ });
  • wake : wake-up target scene if it was previously asleep'transitionwake', function(fromScene, duration){ });