Phaser: Multiple scenes

This post is part of a Phaser series. Click here to see the first post of the series.

In the previous examples we saw how to create a scene, by passing an object with functions references to the scene property of the Phaser.Game() options object:

function preload() {}

function create() {}

new Phaser.Game({
  width: 450,
  height: 600,
  scene: {
    preload,
    create
  }
})

This is a simple scenario.

A game has usually multiple scenes. You can create each scene in its separate file, and pass them to the scene property, but this time as an array.

In this case scenes are created extending the Phaser.Scene object.

I create a Welcome scene in a separate Welcome.js file:

export default class Scene1 extends Phaser.Scene {
  constructor() {
    super('welcome')
  }

  create() {
    this.add.text(20, 20, 'Loading..')

    setTimeout(() => {
      this.scene.start('game')
    }, 2000)
  }
}

and a Game scene in Game.js:

export default class Scene2 extends Phaser.Scene {
  constructor() {
    super('game')
  }

  create() {
    this.add.text(20, 20, 'Playing game!')
  }
}

Note that we have the create() method here. We can also have preload() and update() like we did previously.

And we import them and pass them to the scene property into our main game file:

import Phaser from 'phaser'
import Welcome from './Welcome'
import Game from './Game'

const config = {
  width: 800,
  height: 600,
  backgroundColor: 0x000000,
  scene: [Welcome, Game]
}

const game = new Phaser.Game(config)

What happens now is that we get the first scene listed (Welcome) starting out, and we call this.scene.start('game') to move to the Game scene after 2 seconds.