Phaser 3 切换场景重叠文本

Question

我正在创建一个用户界面。我在主场景和子场景之间传递文本。

我打算做的是重用子场景并根据按下的按钮更改文本。在按下“按钮 1”时，转到子场景并显示“按钮 ONE 已按下”。然后在单击文本时返回主场景。在按下“按钮 2”时，转到子场景并显示“按钮二已按下”。然后点击文字返回主场景

但是在按下两个按钮后文本重叠。

我以为它会创建一个新场景，但它看起来像是在向同一场景添加新文本。我该如何解决？

scenes.js

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);

scenes.html

<!DOCTYPE html>
<html>
<body>

    <script src="phaser.min.js"></script>
    <script src="scenes.js"></script>
    
</body>

</html>

Answer 1

https://phaser.discourse.group/t/scene-switching-text-overlapping-previous-text/9376 samme

回答了这个问题

应该是

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

此外，场景构造器应该是，例如，

super({ key: 'mainscene' });
Phaser.Scene.call() can be removed.

Phaser 3 切换场景重叠文本

Phaser 3 Switching Scene Overlapping Text

phaser-framework