Refer to another scene: update text in UI scene

Phaser 3
1

I’m testing some UI that is to remain across all my many scenes.
I’ve got 3 scenes: start (gameScene), the UI (UI) and scene 3.
I’ve got the UI propagating from start to scene 3, but I can’t update it.
How can I for instance update the text in a UI from another scene?

gameScene

class GameScene extends Phaser.Scene{
    constructor(){
        super({key: 'GameScene'});      
    }
    preload ()
    {
    }
    
    create ()
    {
        this.input.on('pointerdown', function(){
           t.scene.start('Scene3');
       });
    }
}

UI

class UI extends Phaser.Scene{
constructor(){
super({key: ‘UI’, active: true});
}
preload(){}
create(){
this.numCoins = 5;
let myGame = this.scene.get(‘gameScene’);
this.coinText = this.add.text(20,30, this.numCoins);
}
}

Final scene: here I want to add some coins and update the UI

class Scene3 extends Phaser.Scene{
constructor(){
super({key: ‘Scene3’});

}

preload ()
{


}

create ()
{
        UI.numCoins = 10;  //undefined
   this.coinText.text = '10'; //undefined
    this.coinText.updateText(); //undefined
 
}

}//end scene

How can I update the text that is in UI? thank you.

2

In this instance, you would save the UI scene as a variable in whatever scene you’re in

this.uiScene = this.scene.get('UI')

then update the text on the cointText object

this.uiScene.coinText.text = whatever;

Question though, how are you running the UI scene? You don’t have that code in the example above.

1 Like
3

Awesome, that works!
Right now, the UI scene is just listed in the config as another scene…there is only the code provided plus the config.

1 Like
4

I see. If I’m understanding you correctly, you might need to call the UI Scene to run in parallel with whatever your current game scene is.

Check this example out: Launching Parallel Scenes

But if it’s working for you, I probably am misunderstanding something. Nice!

1 Like
5

No, it was a typo. my bad. It works!

6

Another question: How would I go about changing the value if I wanted to just add 10 coins, so that the text would update the value?
so something like this.uiScene.numcoins += 10;
then this.uiScene.coinText.text.updateText(); //but that doesn’t work

7

You can use the registry and the event “changedata” like in this example:
http://labs.phaser.io/edit.html?src=src\scenes\registry%20data%20exchange%20es6.js

Regards.

1 Like