Scene From ES6 Class

Demonstrates how to define a Phaser Scene using ES6 class syntax, including the constructor and standard lifecycle methods.

800 × 600

GitHub

class MyScene extends Phaser.Scene {

    constructor (config)
    {
        super(config);
    }

    preload ()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        this.face = this.add.image(400, 300, 'face');
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'game-container',
    scene: MyScene
};

const game = new Phaser.Game(config);

More in Scenes52 examples

Scene From FunctionLearn how to define a Scene using a standard JavaScript constructor function and prototype pattern.

Scene From InstanceDemonstrates how to define a Scene by creating a new Phaser.Scene instance and manually assigning its lifecycle functions such as preload and create.

Scene From ObjectDemonstrates how to define a Scene using a standard JavaScript object within the Game Configuration, mapping lifecycle functions like preload and create.

Scene Injection MapDemonstrates how to remap standard Scene systems like 'add' and 'load' to custom property names using the scene configuration map.