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>