Time / Energy / Mana Bar Tutorial

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

Emanuele Feronato shows how to use Phaser masks to create nicely animated stats bars: "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."

Read More