An attempt to create a simple and customizable healthbar for Phaser.js games.

I made a tutorial in French that explain how to create this health bar from scratch, you can check it out here.

Demo

If you are using a CommonJS implementation (Browserify) :

var HealthBar = require('path/to/HealthBar.js');

if not, just include the HealthBar.standalone.js in the html file. example :

<script src="path/to/HealthBar.standalone.js"></script>

in the game/state create function instantiate a Healthbar like this:

create: function() {	
	var barConfig = {x: 200, y: 100};
	this.myHealthBar = new HealthBar(this.game, barConfig);
}

• width
• height
• x: initial x position
• y: initial y position
• bg.color: background color
• bar.color: color of the actual bar
• animationDuration: control the animation when the bar value is changed
• flipped: if true the bar will change size from left to right

this is the default configuration :

{
    width: 250,
    height: 40,
    x: 0,
    y: 0,
    bg: {
      color: '#651828'
    },
    bar: {
      color: '#FEFF03'
    },
    animationDuration: 200,
    flipped: false
  };

set the width of the bar to the passed percentage value.

example:

 this.myHealthBar = new HealthBar(this.game, {x: 200, y: 200, width: 120});

 // the width will be set to 50% of the actual size so the new value will be 60
 this.myHealthBar.setPercent(50); 

change the position of the bar to the provided coordinates.