javascript 阶段3制作文本框

w8f9ii69 于 2023-02-02 发布在 Java

关注(0)|答案(1)|浏览(164)

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

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

update方法中的代码：

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按钮进行交互，但按住T按钮查看文本并不是我想要的。
我的目标是这样的：玩家与npc发生碰撞，按一下按钮，显示一行文字，阅读完后再按一次按钮，当前行消失，出现另一行文字，如此反复，直到没有行文字。
我不知道该怎么做。有什么建议吗？
如果有帮助的话，我在VSCode中使用Phaser 3，使用街机物理。

JavaScript

来源：https://stackoverflow.com/questions/75313902/phaser-3-making-a-text-box

1条答案

按热度按时间

bd1hkmkf1#

简单的解决方案是创建为Text - GameObject并在两者之间交替。
只需要一个简单的模运算，就像currentLine % 2 == 0，然后根据结果切换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>

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 阶段3制作文本框

1条答案

相关问题

热门标签

最新问答