How to enter word by word or line by line in Phaser Js?
I need an animation where the messenger should be displayed word by word. I thought about splitting the message in space or point and then a timer or loop to display them. I am confused where to use this, in a function create
or update
? I also don't need the option bitmapText
.
I've seen examples like, but I don't know how to use this in the update function:
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);
}
}
Can anyone provide any ideas with some sample code?
source to share
You don't really need a refresh cycle at all. The way I would go about doing this is to split the content into lines and then split each line into an array - one word per element. Then, using the Phaser timer, I loop through the line, adding one word at a time to the line of text. When it gets to the end of the line, add a carriage return and move to the next line of content.
Here's a complete example - this was written in Phaser 2.4.2, but should work on earlier versions without issue. Sorry, quite a long time, but I've included a lot of text so you can see it workable.
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 not like I'm using,' Case heard someone say, as he shouldered his way ",
"through the crowd around the door of the Chat. `It like my body 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 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 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);
}
}
source to share
The update is performed approximately 60 times per second.
So, if you want to use a loop, don't use it in update ().
My suggestion is adding your suggestion to an array character by character and then adding characters one at a time. Here's how:
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); }
source to share