如何在 Phaser Js 中逐字或逐行输入？

Question

我需要一个动画，其中一个句子需要逐字显示。我正在考虑将 sentanace 拆分为 space 或点，然后使用计时器或循环来显示它们。我很困惑在哪里使用它，在 create 或 update 函数中？我也不需要 bitmapText 选项。

我看过类似的示例，但我不知道如何在更新功能中使用它：

animateTextShow: function(textObject,message,fps){
    if(!fps || fps == 0){
      textObject.setText(message);
    }else{
      var nextWordIndex = 1;
      var id;
      var words = message.split(' ');
      id = setInterval(function(){
        textObject.setText(words.slice(0,nextWordIndex).join(' '));
        ++nextWordIndex;
        if(nextWordIndex >= words.length){
          clearInterval(id);
        }
      },1000/fps);
    }
  }

任何人都可以提供一些示例代码的想法吗？

Answer 1

更新每秒大约运行 60 次。

因此，如果您想使用循环，请不要在 update() 中使用它。

我的建议是将你的句子一个字符一个字符地添加到数组中，然后一个字符一个字符地添加，就像这样：

create:function(){

    var  sentencearr="your sentence".split('');
        var i =-1;
              game.time.events.loop(Phaser.Timer.SECOND*2, function() {

                  i++;
                  game.add.text(i*5,0,sentencearr[i]);

        }, this);  }

Answer 2

您实际上根本不需要更新循环。我这样做的方法是将内容分成几行，然后将每一行分成一个数组——每个元素一个词。然后使用 Phaser Timer 遍历该行，一次向文本字符串添加一个单词。当它到达行尾时添加一个回车return并前进到内容的下一行。

这是一个完整的示例 - 这是在 Phaser 2.4.2 下编写的，但应该可以在早期版本上正常工作。抱歉，它很长，但我包含了很多文字，因此您可以看到它正常工作。

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create });

var content = [
    "The sky above the port was the color of television, tuned to a dead channel.",
    "`It's not like I'm using,' Case heard someone say, as he shouldered his way ",
    "through the crowd around the door of the Chat. `It's like my body's developed",
    "this massive drug deficiency.' It was a Sprawl voice and a Sprawl joke.",
    "The Chatsubo was a bar for professional expatriates; you could drink there for",
    "a week and never hear two words in Japanese.",
    "",
    "Ratz was tending bar, his prosthetic arm jerking monotonously as he filled a tray",
    "of glasses with draft Kirin. He saw Case and smiled, his teeth a webwork of",
    "East European steel and brown decay. Case found a place at the bar, between the",
    "unlikely tan on one of Lonny Zone's whores and the crisp naval uniform of a tall",
    "African whose cheekbones were ridged with precise rows of tribal scars. `Wage was",
    "in here early, with two joeboys,' Ratz said, shoving a draft across the bar with",
    "his good hand. `Maybe some business with you, Case?'",
    "",
    "Case shrugged. The girl to his right giggled and nudged him.",
    "The bartender's smile widened. His ugliness was the stuff of legend. In an age of",
    "affordable beauty, there was something heraldic about his lack of it. The antique",
    "arm whined as he reached for another mug.",
    "",
    "",
    "From Neuromancer by William Gibson"
];

var line = [];

var wordIndex = 0;
var lineIndex = 0;

var wordDelay = 120;
var lineDelay = 400;

function create() {

    text = game.add.text(32, 32, '', { font: "15px Arial", fill: "#19de65" });

    nextLine();

}

function nextLine() {

    if (lineIndex === content.length)
    {
        //  We're finished
        return;
    }

    //  Split the current line on spaces, so one word per array element
    line = content[lineIndex].split(' ');

    //  Reset the word index to zero (the first word in the line)
    wordIndex = 0;

    //  Call the 'nextWord' function once for each word in the line (line.length)
    game.time.events.repeat(wordDelay, line.length, nextWord, this);

    //  Advance to the next line
    lineIndex++;

}

function nextWord() {

    //  Add the next word onto the text string, followed by a space
    text.text = text.text.concat(line[wordIndex] + " ");

    //  Advance the word index to the next word in the line
    wordIndex++;

    //  Last word?
    if (wordIndex === line.length)
    {
        //  Add a carriage return
        text.text = text.text.concat("\n");

        //  Get the next line after the lineDelay amount of ms has elapsed
        game.time.events.add(lineDelay, nextLine, this);
    }

}

如何在 Phaser Js 中逐字或逐行输入？

How to Type word by word or line by line in Phaser Js?

javascript

animation

phaser-framework