Multiple Game Instances

Demonstrates how to run two completely independent Phaser game instances simultaneously on the same web page, each with its own configuration and Scenes.

800 × 600

GitHub

// Game 1
class Example1 extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        this.add.image(400, 300, 'taikodrummaster');

        const chtholly = this.add.image(400, 500, 'sukasuka-chtholly').setInteractive();

        const tween = this.tweens.add({
            targets: chtholly,
            y: 600,
            ease: 'Sine.easeInOut',
            duration: 2000,
            yoyo: true,
            repeat: -1
        });

        chtholly.on('pointerdown', function () {

            if (tween.isPlaying())
            {
                tween.pause();
            }
            else
            {
                tween.resume();
            }

        });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    scene: [ Example1 ]
};

const game1 = new Phaser.Game(config);


// Game 2
class Example2 extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

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

    create ()
    {
        this.add.image(400, 300, 'taikodrummaster');

        const chtholly = this.add.image(400, 500, 'sukasuka-chtholly').setInteractive();

        const tween = this.tweens.add({
            targets: chtholly,
            x: 200,
            ease: 'Sine.easeInOut',
            duration: 2000,
            yoyo: true,
            repeat: -1
        });

        chtholly.on('pointerdown', function () {

            if (tween.isPlaying())
            {
                tween.pause();
            }
            else
            {
                tween.resume();
            }

        });
    }
}

const config2 = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container',
    scene: [ Example2 ]
};

const game2 = new Phaser.Game(config2);

More in Game Config19 examples

Pixel Art ModeDemonstrates how to enable pixel art mode in the game configuration to disable texture smoothing, keeping scaled images, tilemaps, and text crisp and sharp.

Round PixelsDemonstrates how the roundPixels configuration setting ensures Game Objects are rendered at whole integer pixel coordinates, preventing sub-pixel blur even when positions use decimal values.

Transparent Game CanvasConfigure a Phaser game to have a transparent canvas, allowing the underlying HTML page or CSS background to show through the scene.

Clear Before RenderDemonstrates how to disable canvas clearing between frames using the clearBeforeRender and preserveDrawingBuffer configuration settings to create persistent motion trails.