Skip to main content


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.

Scene Directory


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


// ....


// Main game scene
export default class Runner extends Phaser.Scene {
constructor() {
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.

.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],