如何在Phaser Js中逐字逐句输入?

时间:2015-08-06 07:41:24

标签: javascript animation phaser-framework

我需要一个动画,其中需要逐字逐句显示配音。我正在考虑用空格或点分割sendanace,然后用计时器或循环来显示它们。在createupdate函数中,我很困惑在哪里使用它? 我也不需要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);
    }
  }

任何人都可以通过一些示例代码提出任何想法吗?

2 个答案:

答案 0 :(得分:4)

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

这是一个完整的例子 - 这是在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);
    }

}

答案 1 :(得分:0)

更新每秒运行大约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);  }