Multi-Scene Desktop Environment

Demonstrates a window-based desktop environment using multiple simultaneous Scenes. Each 'window' is a separate Scene instance mapped to a draggable Zone using camera viewports.

1024 × 768

GitHub

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: window.innerWidth,
    height: window.innerHeight,
    backgroundColor: '#0055aa',
    parent: 'game-container',
    scene: Controller,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: { y: 0 }
        }
    }
};

const game = new Phaser.Game(config);

window.addEventListener('resize', function (event) {

    // game.resize(window.innerWidth, window.innerHeight);

}, false);

More in Scenes52 examples

Multiple Instances of a SceneDemonstrates how to dynamically add and run multiple simultaneous instances of the same Scene class, with each instance operating independently.

Multiple Scenes and Multiple CamerasDemonstrates running two active scenes simultaneously, with one scene using multiple camera viewports to create a tiled display of its content.

Multiple Scenes From ClassesDemonstrates how to define and run multiple active scenes simultaneously using ES6 classes within the game configuration.

Multiple Scenes from Configuration ObjectsDemonstrates how to define and run multiple simultaneous scenes using configuration objects. It covers scene-specific asset loading via pack files, custom render functions, and setting scene positions and dimensions.