How To Create Flashing Text in Phaser 3

Creating flashing or blinking text in Phaser 3 games is easy, and can be done with just a few lines of code.  Flashing Text is great for things like 'Play Game' or 'Game Over' prompts etc.

In the example below I have wrapped the function in a 'Tween Helper' class so it can be reused throughout a game.

The flashElement method takes your Phaser 3 scene as its first argument, followed by the Text object.  The remaining arguments allow you to control the speed at which your text flashes / blinks and the style of Phaser 3 flash easing required.

A typical use of the flashElement class is as follows (this = Phaser 3 scene):

const screenText = this.add.text(600, 400, 'Play Game').setOrigin(0.5);
TweenHelper.flashElement(this, playText);

Here is the code for the TweenHelper class:

export default class TweenHelper {
    static flashElement(scene, element, repeat = true, easing = 'Linear', overallDuration = 1500, visiblePauseDuration = 500) {
        if (scene && element) {
            let flashDuration = overallDuration - visiblePauseDuration / 2;

            scene.tweens.timeline({
                tweens: [
                    {
                        targets: element,
                        duration: 0,
                        alpha: 0,
                        ease: easing
                    },
                    {
                        targets: element,
                        duration: flashDuration,
                        alpha: 1,
                        ease: easing
                    },
                    {
                        targets: element,
                        duration: visiblePauseDuration,
                        alpha: 1,
                        ease: easing
                    },
                    {
                        targets: element,
                        duration: flashDuration,
                        alpha: 0,
                        ease: easing,
                        onComplete: () => {
                            if (repeat === true) {
                                this.flashElement(scene, element);
                            }
                        }
                    }
                ]
            });
        }
    }
}

And thats all there is to adding flashing or blinking text to your Phaser 3 game scene!

If you found this article useful, why not read my other Phaser 3 game blog posts.