Scene From Function

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

800 × 600

const MyGame = {};

MyGame.Boot = function ()
{
    this.face = null;
};

MyGame.Boot.prototype.constructor = MyGame.Boot;

MyGame.Boot.prototype = {

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

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

};

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.CANVAS,
    parent: 'game-container',
    width: 800,
    height: 600,
    scene: MyGame.Boot
};

const game = new Phaser.Game(config);

More in Scenes52 examples

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.

Scene Injection Map with UTF-8Demonstrates how to use the Scene injection map to alias standard Scene systems, such as 'add' and 'load', to custom UTF-8 property names.