πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.
How to Make Multiple Scenes in Phaser 3

How to Make Multiple Scenes in Phaser 3

Ferenc Almasi β€’ Last updated 2021 July 13 β€’ Read time 2 min read
  • twitter
  • facebook
JavaScript

You can create multiple scenes in Phaser 3, by simply using an array for the scene property in your config, when you create the game:

Copied to clipboard! Playground
const config = {
    width: window.innerWidth,
    height: window.innerHeight,
    physics: {
        default: 'arcade'
    },
    scene: [
        Boot,
        Menu,
        Game
    ]
};

new Phaser.Game(config);
phaser.js

The scenes you define will be loaded in order, meaning that for the example above, first the Boot scene will be loaded, then the Menu, and lastly, the Game. You can think of scenes as separate stages of a game. A common practice is to create different scenes for the boot screen, for the main menu, the game itself, or a scene for different views, such as a world map. Scenes have four different built-in methods you can use:

Copied to clipboard! Playground
class Boot extends Phaser.Scene {

    constructor () {
        super('Boot');
    }

    init() {
        // Used to prepare data
    }

    preload() {
        // Used for preloading assets into your scene, such as
        // β€’ images
        // β€’ sounds
    }

    create(data) {
        // Used to add objects to your game
    }

    update(time, delta) {
        // Used to update your game. This function runs constantly
    }
}

export default Boot;
Boot.js

Note that for the constructor, you have to call super where you pass an identifier. This is what the name of your scene will be, and this is how you can reference it later on.

You can create as many scenes as you want, and you can also add scenes dynamically from other scenes with this.scene.add.

Copied to clipboard!
this.scene.add('Main');
Scene.js

To switch between scenes, all you have to do is call this.scene.start, passing the identifier of the scene you want to start.

Copied to clipboard!
this.scene.start('Main');
Scene.js

And lastly, you also have the option to play multiple scene simultaneously.

Building The Game Breakout Using JavaScript
  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access 100+ interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Prepare for technical interviews
Become a Pro

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.