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，并根据结果切换 Text - GameObject。

这是一个简短的工作演示，展示了主要思想：

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:{ y: 100 },
            debug: true
        }
    },
    scene: {
        create
    },
    banner: false
}; 

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", 
  "this is the forth 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',  _ => {
        if(currentLine < messages.length){
            currentLine++;
            let nextLine = messages[currentLine];
            
            // stop running tween
            if(tween){
               tween.stop();
            }
            
            // Just be sure none is seen
            line0.setAlpha(0);
            line1.setAlpha(0);
            
            //switch between two text gameobjects
            if( currentLine % 2 == 0){
                line0.setText(nextLine);
                // Just to make the fade animation
                tween = this.tweens.add({
                    targets: [ line0 ],
                    alpha: 1,
                    duration: 500
                });
            } else {
                line1.setText(nextLine);
                // Just to make the fade animation
                tween = this.tweens.add({
                    targets: [ line1 ],
                    alpha: 1,
                    duration: 500
                });
            }
        } else {
            // Just for the demo so that the messages loop
            currentLine = -1
        }
    })
}

new Phaser.Game(config);

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