How to reveal text word by word

Phaser 3
1

Hi,
I’m currently working on a text-based project, and I would need to reveal text word by word or letter by letter but with a fade.

I was doing a typewriter effect like this:

  typewriteText(text) {
    let i = 0;
    let delayedCallback;
    let textLenght = text.length;

    this.time.addEvent({
      callback: () => {

        // We feed our text object with a paragraph from Ink.
        this.textObject.text += text[i]
          ++i

        // Callback after typewriter text is complete.
        // Delay before the choices appear in the screen (in ms)
        if (i >= textLenght) {
          i = 0;
          delayedCallback = this.time.delayedCall(200, this.addChoiceArray, [], this); 
        }
      },
      repeat: textLenght - 1,
      delay: 40 + textLenght * 0.05  
    })
  }

But there’s a few problems that arise since I need the text to be justified.
So my best bet seems to be setting the formatted text and unveiling it word by word.

So how is it possible to fade in word by word?

I tried spliting the sentence by two methods:

// We can split the sentence.
var words = text.split(" ");
for (i = 0; i < words.length - 1; i++) { words[i] += "" }
console.log(words);

// Or we can use Regex instead.
var wordsRegex = text.match(/\b(\w+)'?(\w+)?\b/g);
console.log(wordsRegex);

But I’m unable to figure out what to do after this step.

Thanks

*I’m attempting to obtain a result similar to this post in Gamasutra:

2

This will work with justified text, but it doesn’t skip whitespace:

3

Thanks for your solution @samme
Sadly, it doesn’t solve my issue completely. I’m trying to figure out how I can add styling to the paragraph in a similar way to the example from Gamasutra.

4

I’ve been fiddling with it further and it sort of works. But far from what I need.

  typewriteText(text) {
let i = 0;
let delayedCallback;
let textLenght = text.length;     // The total lenght of the paragraph.

this.textObject.text  += text;     // We set our current text.
this.textObject.text = text.substring(0, i) + '[color=#181818]' + text.substring(i - 1) + '[/color]';

this.time.addEvent({
  callback: () => {
    this.textObject.text = text.substring(0, i) + '[color=#181818]' + text.substring(i - 1) + '[/color]';
      ++i
    // Callback after typewriter text is complete.
    // Delay before the choices appear in the screen (in ms)
    if (i >= textLenght) {
      i = 0;
      delayedCallback = this.time.delayedCall(200, this.addChoiceArray, [], this); 
    }
  },
  repeat: textLenght - 1,
  delay: textLenght * 0.1  
})

}

The problem still the same. My solution would be to add (using BBCode plugin) [color=#mycolor] [/color] so I end up with first semi-visible character half-visible, and second visible char back to index 0, set it to visible ( in this case a white color);

The persisting problem is that I need to figure out how to format the text, then simply change the color of the characters to simulate they are fading in.

test
test1045×761 120 KB

I set the font in the back slightly visible to we can perceive it keeps being reformat.