How to make a health bar in Phaser 3

Anyone who has ever made an RPG game knows how important health bars can be to a game. However, this technique can also be used for timer bars or loading progress. This uses Phaser’s built-in graphics class and uses no images.

class SceneMain extends Phaser.Scene {
    constructor() {
    preload() {}
    create() {
        //make 3 bars
        let healthBar=this.makeBar(140,100,0x2ecc71);

        let powerBar=this.makeBar(140,200,0xe74c3c);

        let magicBar=this.makeBar(140,300,0x2980b9);

    makeBar(x, y,color) {
        //draw the bar
        let bar =;

        //color the bar
        bar.fillStyle(color, 1);

        //fill the bar with a rectangle
        bar.fillRect(0, 0, 200, 50);
        //position the bar
        bar.x = x;
        bar.y = y;

        //return the bar
        return bar;
    setValue(bar,percentage) {
        //scale the bar
        bar.scaleX = percentage/100;
    update() {}

Leave a Comment