Add a nice time bar / energy bar / mana bar / whatever bar to your HTML5 games using Phaser 3 masks

When my games need a time or energy bar – shame on me – I usually build it using a plain rectangle sprite and adjusting its size according to the data I need to display.

This time I wanted to create something better, a more complex time meter with is container and the energy bar a little more good looking than a simple rectangle.

At the same time, I did not want to create a lot of layered images, so I ended up with only two PNGs, one for the energy bar:

and one for the container:

Now the point is how to handle the energy bar without slicing it in smaller images or creating layered PNGs.

I used a copy of the energy bar itself, and simply moved it to the left.

Look at the example:

Easy and simple, just using a mask. Try to do it without masks and it will be a nightmare.

Look at the source code:

let game;
let gameOptions = {
    initialTime: 60
}
window.onload = function() {
    let gameConfig = {
        type: Phaser.AUTO,
        backgroundColor:0x1a213e,
        scale: {
            mode: Phaser.Scale.FIT,
            autoCenter: Phaser.Scale.CENTER_BOTH,
            parent: "thegame",
            width: 750,
            height: 200
        },
        scene: playGame,
    }
    game = new Phaser.Game(gameConfig);
    window.focus();
}
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    preload(){
        this.load.image("energycontainer", "energycontainer.png");
        this.load.image("energybar", "energybar.png");
    }
    create(){
        this.timeLeft = gameOptions.initialTime;

        // the energy container. A simple sprite
        let energyContainer = this.add.sprite(game.config.width / 2, game.config.height / 2, "energycontainer");

        // the energy bar. Another simple sprite
        let energyBar = this.add.sprite(energyContainer.x + 46, energyContainer.y, "energybar");

        // a copy of the energy bar to be used as a mask. Another simple sprite but...
        this.energyMask = this.add.sprite(energyBar.x, energyBar.y, "energybar");

        // ...it's not visible...
        this.energyMask.visible = false;

        // and we assign it as energyBar's mask.
        energyBar.mask = new Phaser.Display.Masks.BitmapMask(this, this.energyMask);

        // a boring timer.
        this.gameTimer = this.time.addEvent({
            delay: 1000,
            callback: function(){
                this.timeLeft --;

                // dividing enery bar width by the number of seconds gives us the amount
                // of pixels we need to move the energy bar each second
                let stepWidth = this.energyMask.displayWidth / gameOptions.initialTime;

                // moving the mask
                this.energyMask.x -= stepWidth;
                if(this.timeLeft == 0){
                    this.scene.start("PlayGame")
                }
            },
            callbackScope: this,
            loop: true
        });
    }
};

Now you have no excuses to use those flat, ugly, cheap rectangles. Download the source code.