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

Posted on 10th Mar 2020. Follow @phaser_ and get the Phaser World newsletter.


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

Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a PC role-playing game inspired by classics of the 16-bit era. Free forever, and available now for Windows, Mac, and Linux.

The first book on the creation of HTML5 cross platform games using Phaser 3 and other free software.
  • By Emanuele Feronato
  • 155 Pages
  • 28 Source Code Examples
  • Build a complete game from start to finish
  • Cross Platform
  • Scaling for devices
Buy Now