Letter By Letter Text Effect

While working on Glen’s Invaders, one of the challenges was coming up with a nice letter-by-letter text reveal for Phaser Bitmap fonts. Gives it a more legit Space Invaders coin-op vibe.

I ended up with something like this:

Turns out the solution was relatively straighforward: making use of a custom timer to fire once for each letter, then rendering a substring from 0 to the lettercount.

IF you want to try this at home:

1. Setup a timer to fire every 80ms, and get it to fire once for each letter in your message.
2. Pass your timer function a bit of context (the message you want to render, the text object you want to render it on, and the counter for how many letters to render right now).
3. Inside your displayNextLetter() routine, use the substr function to grab the first X letters of the text, and render that.
4. Increment your counter to point to the next letter
5. Rinse and repeat

Easier to see than describe:

function create() {
    var message = "Glen's Invaders";

    var textObject = game.add.bitmapText(game.world.centerX, eighthScreen * 1, 'minecraftia', message, fontHeight);
    textObject.x = game.width / 2  - textObject.textWidth / 2;
    
    displayLetterByLetterText(textObject, message, function() {
        // stuff you want to do at the end of the animation
        // eg. this.input.onDown.addOnce(this.start, this);
    });
}


function displayNextLetter() {

    this.textObject.text = this.message.substr(0, this.counter);
    this.counter += 1;

}

function displayLetterByLetterText(textObject, message, onCompleteCallback) {

    var timerEvent = game.time.events.repeat(80, message.length, displayNextLetter, 
                                { textObject: textObject, message: message, counter: 1 });

    timerEvent.timer.onComplete.addOnce(onCompleteCallback, this);

}

Thought I write it up in case anyone needs to do this down the track.