Scenes

As you might have already noticed, in index.js we pass two scenes into the config object that is used to initialize phaser.

import Menu from "./scenes/Menu.js"
import Runner from "./scenes/Runner.js"

//....

var config = {
  // Initializes both the menu and runner scene
  scene: [Menu, Runner],
}

// Creates new instance of phaser game
const game = new Phaser.Game(config)

//....

We have a scene for the Menu which includes both the Main Menu and Customization Menu and a scene which handles all of our gameplay logic called Runner.

Menu.js

// Main menu and customization scene
export default class Menu extends Phaser.Scene {
  constructor() {
    super('menu')

    this.selectSFX
    this.switchSFX

// ....

Runner.js

// Main game scene
export default class Runner extends Phaser.Scene {
  constructor() {
    super('runner')
    this.environmentManager = null
    this.groundManager = null
    this.obstacleManager = null
    this.userInterface = null
    this.playerCharacter = null

// ....

The code below in Menu.js is an example of how we switch scenes from the Menu to Runner and pass data through such as our selected sprite for the character, obstacle and cloud.

startButton.setInteractive()
  .on(Phaser.Input.Events.GAMEOBJECT_POINTER_DOWN, () => {
    this.scene.start('runner', {
      characterSprite: this.characterPicker.allImgRefs[this.characterPicker.selectedIndex],
      obstacleSprite: this.obstaclePicker.allImgRefs[this.obstaclePicker.selectedIndex],
      cloudSprite: this.cloudPicker.allImgRefs[this.cloudPicker.selectedIndex],
    })
    this.selectSFX.play()
  })