Multiple Scenes From Classes
Demonstrates how to define and run multiple active scenes simultaneously using ES6 classes within the game configuration.
800 × 600
class Background extends Phaser.Scene
{
constructor ()
{
super({ key: 'background', active: true });
}
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');
}
}
class Demo extends Phaser.Scene
{
constructor ()
{
super({ key: 'demo', active: true });
}
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('arrow', 'assets/sprites/longarrow.png');
}
create ()
{
this.arrow = this.add.image(400, 300, 'arrow').setOrigin(0, 0.5);
}
update (time, delta)
{
this.arrow.rotation += 0.01;
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.WEBGL,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'game-container',
scene: [ Background, Demo ]
};
const game = new Phaser.Game(config);