Phaser 3 切换场景重叠文本
Posted
技术标签:
【中文标题】Phaser 3 切换场景重叠文本【英文标题】：Phaser 3 Switching Scene Overlapping Text 【发布时间】：2021-04-18 21:44:51 【问题描述】：我正在创建一个用户界面。我在主场景和子场景之间传递文本。
我打算重用子场景并根据按下的按钮更改文本。 在按下“按钮 1”时，转到子场景并显示“按下按钮 1”。然后在单击文本时返回主场景。 在按下“按钮 2”时，转到子场景并显示“按下按钮 2”。然后点击文本返回主场景。
但是在按下两个按钮后文本会重叠。
我以为它会创建一个新场景，但看起来它正在向同一个场景添加新文本。我该如何解决这个问题？
场景.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);
场景.html
<!DOCTYPE html>
<html>
<body>
<script src="phaser.min.js"></script>
<script src="scenes.js"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：这是由 samme
在https://phaser.discourse.group/t/scene-switching-text-overlapping-previous-text/9376 中回答的应该是
class SubScene extends Phaser.Scene
// …
goBack()
this.scene.start('mainscene');
另外，场景构造函数应该是，例如，
super( key: 'mainscene' );
Phaser.Scene.call() can be removed.
【讨论】：
以上是关于Phaser 3 切换场景重叠文本的主要内容，如果未能解决你的问题，请参考以下文章