Switching Scenes

Once your game reaches a certain size, you will want to start switching between scenes. That might be switching from a intro or menu to the game or from one level to another.

The most important function to know here is WL.scene.load(), which will replace the current scene with a .bin filename or URL you pass it for loading.

This could be an example of a component that switches to another scene after a certain amount of time:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
WL.registerComponent('load-after-delay', {
    scenefile: {type: WL.Type.String, default: "AnotherScene.bin"},
    delaySeconds: {type: WL.Type.Float, default: 10},
}, {
    start: function(dt) {
        setTimeout(() => {
            WL.scene.load(this.scenefile);
        }, this.delaySeconds*1000);
    },
});

Preloading Scenes

While the scene will keep running while the next is loading, it will still cause a delay between when the load was initiated and the next scene appearing for the user.

To minimize this scene, you can put the following HTML tags into the <head> or your index.html:

1
2
3
  <!-- not needed <link rel="preload" href="First.bin" ...> -->
  <link rel="preload" href="Next.bin" as="fetch" crossorigin async>
  <link rel="preload" href="Last.bin" as="fetch" crossorigin async>

Caveats

Loading a scene will currently not clear event listeners you might have registered to DOM elements. You are responsible for removing event listeners when the next scene loaded to avoid unexpected behaviour:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
const keyUpHandler = e => { /* ... */ };
WL.canvas.addEventListener('keyup', keyUpHandler);

/* Also remember to stop audio */
this.sound = this.object.getComponent('howler-audio-source');

/* Remove listener for scene reloads, otherwise keypress is
 * handled multiple times or handled in the next scene also */
WL.onSceneLoaded.push(() => {
    WL.canvas.removeEventListener('keyup', keyUpHandler);

    this.sound.stop();
});

Preloading Scenes

Caveats

Subscribe to our newsletter