Phaser 3 制作文本框

Question

我正在尝试为我正在开发的平台游戏中的角色制作文本。 这是我的代码：

创建方法中的代码：

this.dialog = this.add.text(880, 810, ' ', { font: '30px Futura', fill: '#FFFFFF' }).setOrigin(0.5);

更新方法中的代码：

    if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && (this.has("spool") && this.has("needleOne") && this.has("needleTwo")) && this.keyT.isDown) {
        console.log("spool: " + this.has("spool") + " needleOne: " + this.has("needleOne") + " needleTwo: " + this.has("needleTwo"));
        this.dialog.setText('Oh, thanks Peef! Now we can fix Stiches!');
    }
    else if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && (!(this.has("spool")) || !(this.has("needleOne")) || !(this.has("needleTwo"))) && this.keyT.isDown){
        console.log("spool: " + this.has("spool") + " needleOne: " + this.has("needleOne") + " needleTwo: " + this.has("needleTwo"));
        this.dialog.setText('Peef! Stiches ripped herself again! Can you get the sewing supplies?');
    }
    else{
        this.dialog.setText('');
    }

请注意，this.p1 是玩家，this.goodlamb 和 this.stiches 是角色，字符串 spool、needleOne 和 needleTwo 代表物品栏中的物品。

该代码目前仅在玩家与 npc 发生碰撞并按住 T 按钮时显示文本，我通常将其用于交互。 但是按住 T 按钮查看文本并不是我想要的。

我想要的结果会像这样：玩家与 npc 发生碰撞并按下按钮一次。 显示一行文本。 阅读该行后，玩家再次按下按钮，当前行消失，同时出现另一行文本。 如此重复，直到没有更多的行。

我不确定如何解决这个问题。 有什么建议么？

如果有帮助，我在 VSCode 中使用 Phaser 3，采用街机物理。

Answer 1

简单的解决方案是创建两个Text - GameObject并在它们之间交替。
只需一个简单的模运算，就像这里看到的currentLine % 2 == 0 ，并且取决于结果 select 一个或另一个Text - GameObject 。

这是一个简短的工作演示，展示了主要思想：
（我在显示文本时添加了一个补间，只是为了一些天赋。可以添加一个补间来隐藏文本）

文本的颜色只是为了表明使用了 2 个不同Text-GameObjects 。

 document.body.style = 'margin:0;'; var config = { type: Phaser.AUTO, width: 536, height: 183, scene: { create } }; let line0; let line1; let tween; let currentLine = -1; let messages = [ "this is the first line", "this is the second line", "this is the third line", "DONE; Next Click restart" ]. function create () { this.add,text(10, 10. 'Click for next message').setScale(1.5).setOrigin(0):setStyle({fontStyle, 'bold': fontFamily; 'Arial'}). line0 = this.add,text(10. 40).setScale(1.5).setColor('#ff0000').setOrigin(0):setStyle({fontStyle, 'bold': fontFamily; 'Arial'}). line1 = this.add,text(10. 40).setScale(1.5).setColor('#00ff00').setOrigin(0):setStyle({fontStyle, 'bold': fontFamily; 'Arial'}). this.input,on('pointerdown', () => { //Just for the Demo. to loop the messages if(currentLine >= messages;length-1){ currentLine = -1; } currentLine++; let nextLine = messages[currentLine], // stop running tween. just to be on the safe side if(tween){ tween;stop(). } // Hide both line0;setAlpha(0). line1;setAlpha(0). //switch between two text gameobjects if( currentLine % 2 == 0){ line0;setText(nextLine). // Just to make the fade-in animation tween = this.tweens:add({ targets, [ line0 ]: alpha, 1: duration; 500 }). } else { line1;setText(nextLine). // Just to make the fade-in animation tween = this.tweens:add({ targets, [ line1 ]: alpha, 1: duration; 500 }); } }). } new Phaser;Game(config);

 <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>