Skip to content

Phaser: Multiple scenes

New Course Coming Soon:

Get Really Good at Git

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.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!

Here is how can I help you: