Phaser 3-- UI level scene on top?

Phaser 3
1

I see the example here where UI is run separately: https://labs.phaser.io/edit.html?src=src\scenes\ui%20scene.js

I’m trying to convert this to the structure I have for my game, which is separate files for separate scenes. The scenes of course run in consecutive, rather than concurrent order, though. Is there a way to build this so that if I have multiple game scenes, I can keep one UI on top of them all?

class GameScene extends Phaser.Scene{
constructor(){
    super("GameScene");
}

create ()    {
  
    for (var i = 0; i < 64; i++)
    {
        var x = Phaser.Math.Between(0, 800);
        var y = Phaser.Math.Between(0, 600);

        var box = this.add.image(x, y, 'crate');

        box.setInteractive();
    }

    this.input.on('gameobjectup', this.clickHandler, this);
}

clickHandler(pointer, box)    {

    box.input.enabled = false;
    box.setVisible(false);
    this.events.emit('addScore');
}
}

File 2:

class UIScene extends Phaser.Scene{
    constructor(){
        super("UIScene");
    }

preload(){
    this.score = 0;
    
}
create(){
      //  Our Text object to display the Score
        var info = this.add.text(10, 10, 'Score: 0', { font: '48px Arial', fill: '#000000' });

        //  Grab a reference to the Game Scene
        var ourGame = this.scene.get('GameScene');

        //  Listen for events from it
        ourGame.events.on('addScore', function () {

            this.score += 10;

            info.setText('Score: ' + this.score);

        }, this);
}

}
2

Cavern Quest is good for this. The demo shows what the scenes are doing.

1 Like