Complete Multi-Scene Game Template

A comprehensive example showing how to structure a Phaser game with multiple scenes, including a boot sequence, preloader, main menu, arcade physics gameplay, a UI overlay, and a game over screen.

800 × 600

GitHub

import { Boot } from './scenes/Boot.js';
import { Game } from './scenes/Game.js';
import { GameUi } from './scenes/GameUi.js';
import { GameOver } from './scenes/GameOver.js';
import { MainMenu } from './scenes/MainMenu.js';
import { Preloader } from './scenes/Preloader.js';

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 1000 },
            debug: false
        }
    },
    scene: [
        Boot,
        Preloader,
        MainMenu,
        Game,
        GameOver,
        GameUi
    ]
};

let game = new Phaser.Game(config);

More in My First Game5 examples

Multi-Scene Game ArchitectureA complete game structure demonstrating scene transitions, a preloader with a progress bar, and a parallel UI overlay scene for managing HUD elements and audio independently from the main game logic.Sprite Keys MappingDemonstrates centralizing asset keys within a single object to avoid hard-coded strings and ensure consistency across the game logic.Animation Key ConstantsDemonstrates organizing animation keys into a central constant object to manage asset strings safely and avoid typos throughout a project.Audio Key ConstantsDemonstrates organizing sound effect asset keys into a central constant object to ensure consistency and maintainability when referencing audio throughout a game.