Scene switching text overlapping previous text

Phaser 3
1

Hi Guys

I’m suffering from an issue when switching between UI scenes. have two scenes, Scene A and Scene B. I have two buttons on Scene A which when pressed changes scene to Scene B and then prints the text of which button was pressed. Unfortunately it appears that the text overlaps the previous text instead of completely clearing and overwriting. How can I solve this ? This is just a minimal example of what I’m trying to acheive, its important that the text doesn’t overlap previous text.

Code is below

class MainScene extends Phaser.Scene 
{
constructor ( )
{
    super();

    Phaser.Scene.call(this, { key: 'mainscene' });
}

create()
{
    const button1 = this.add.text(100, 100, 'button1', { fill: '#0f0' });

    button1.setInteractive();

    button1.on('pointerdown', this.button1Pressed, this); 

    const button2 = this.add.text(100, 200, 'button2', { fill: '#0f0' });

    button2.setInteractive();

    button2.on('pointerdown', this.button2Pressed, this); 
}

button1Pressed () 
{
    this.scene.start('subscene', { text_to_print: "button ONE pressed"});
}

button2Pressed () 
{
    this.scene.start('subscene', { text_to_print: "button TWO pressed" });
}
}

class SubScene extends Phaser.Scene 
{
constructor ( )
{
    super();

    Phaser.Scene.call(this, { key: 'subscene' });

    this.text_to_print = null;
}

init ( data )
{
    this.text_to_print = data.text_to_print;
}

create()
{
    
    
    var style = { font: "65px Arial", fill: "#777777", align: "center" };
    var text = this.add.text(100, 100, this.text_to_print, style);

    text.setInteractive();

    text.on('pointerdown',this.goBack,this);
}

goBack()
{
    this.scene.switch('mainscene');
}
}


var config = {
type: Phaser.AUTO,
scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 960,
    height: 540
},
scene: [MainScene, SubScene ]
};

var game = new Phaser.Game(config);

I put my question on stackoverflow also in case any one wants to see more info

Phaser 3 Switching Scene Overlapping Text - Stack Overflow

2

:wave:

It should be

class SubScene extends Phaser.Scene {
    // …
    goBack() {
        this.scene.start('mainscene');
    }
}

Also, the scene constructors should be, e.g.,

super({ key: 'mainscene' });

Phaser.Scene.call() can be removed.

3

Thanks so much - I’m writing a UI for kids at school to practice writing characters , now the words are not overlapping, yay. :grinning: