Main loop

1. game.events prestep event. Global Managers like Input and Sound update.
   1. trigger game.sound.update()
2. game.events step event. User-land code and plugins
   • Register event

     scene.game.events.on('step', function(time, delta){
         //
     }, scope);
     

3. Update the Scene Manager and all active Scenes
   1. scene.events preupdate event
      • Register event

        scene.events.on('preupdate', function(time, delta){
            //
        }, scope);
        

      • InputPlugin.preUpdate()
      • TweenManager.preUpdate() to arrange active targets
      • UpdateList.preUpdate(), to arrange game objects in UpdateList
   2. scene.events update event
      • Register event

        scene.events.on('update', function(time, delta){
            //
        }, scope);
        

      • TweenManager.update(), to run active tweens
      • UpdateList.update
        • gameObject.preUpdate
      • Update arcade world
   3. scene.update()
   4. scene.events postupdate event
      • Register event

        scene.events.on('postupdate', function(time, delta){
            //
        }, scope);
        

4. game.events poststep event. Final event before rendering starts.
   • Register event

     scene.game.events.on('poststep', function(time, delta){
         //
     }, scope);
     

5. game.renderer.preRender()
6. game.events prerenderclear event
   • Register event

     scene.game.events.on('prerenderclear', function(){
         //
     }, scope);
     

7. game.events prerender event
   • Register event

     scene.game.events.on('prerender', function(){
         //
     }, scope);
     

8. SceneManager.render()
   1. Sort display list
   2. scene.events prerender event
      • Register event

        scene.events.on('prerender', function(renderer){
            //
        }, scope);
        

   3. Render cameras
   4. scene.events render event
      • Register event

        scene.events.on('render', function(renderer){
            //
        }, scope);
        

9. game.renderer.postRender()
10. game.events postrender event. Final event before the step repeats.
    • Register event

      scene.game.events.on('postrender', function(renderer, time, delta){
          //
      }, scope);
      

Note

Each scene is a standalone system.

Flow chart

Game loop

graph TB

subgraph Render
GameRenderPreRender["game.renderer.preRender()"]
GameEventPreRenderClear>"game.events: prerenderclear"]
GameEventPreRender>"game.events: prerender"]
SceneManagerRender["SceneManager.render()<br>...See 'Scene steps'..."]
GameRenderPostRender["game.renderer.postRender()"]
GameEventPostRender>"game.events: postrender"]
end

subgraph Step
GameEventPreStep>"game.events: prestep<br><br>sound.update()"]
GameEventStep>"game.events: step"]
SceneManagerUpdate["SceneManager.update()<br>...See 'Scene steps'..."]
GameEventPostStep>"game.events: poststep"]
end


GameEventPreStep --> GameEventStep
GameEventStep --> SceneManagerUpdate
SceneManagerUpdate --> GameEventPostStep
GameEventPostStep --> GameRenderPreRender
GameRenderPreRender --> GameEventPreRenderClear
GameEventPreRenderClear --> GameEventPreRender
GameEventPreRender --> SceneManagerRender
SceneManagerRender --> GameRenderPostRender
GameRenderPostRender --> GameEventPostRender
GameEventPostRender --> GameEventPreStep

Scene steps

graph TB

subgraph Render
SceneEventPreRender>"scene.events: prerender"]
SceneCameraRender["scene.cameras.render()"]
SceneEventRender>"scene.events: render"]
end

subgraph Update
SceneEventPreUpdate>"scene.events: preupdate<br><br>InputPlugin.preUpdate()<br>TweenManager.preUpdate()<br>UpdateList.preUpdate()"]
SceneEventUpdate>"scene.events: update<br><br>TweenManager.update()<br>UpdateList.update()<br>gameObject.preUpdate()"]
SceneUpdate["scene.update()"]
SceneEventPostUpdate>"scene.events: postupdate"]
end


SceneEventPreUpdate --> SceneEventUpdate
SceneEventUpdate --> SceneUpdate
SceneUpdate --> SceneEventPostUpdate

SceneEventPostUpdate -.-> SceneEventPreRender
SceneEventPreRender --> SceneCameraRender
SceneCameraRender --> SceneEventRender

Rendering order

• For each scene from bottom to top, in game
  • For each camera from bottom to top, in scene
    • For each game object from bottom to top in scene's displayList
      • Render this game object
        • Render children game objects, if game object is a container or a layer

Note

A game object can be seen by all cameras of this scene, therefore game object could be rendering more than one times.

See also Ignore game object