No description or website provided.
Latest commit f48f4c4 Jun 11, 2016 Marwane Fix method kill declaration.
update readme


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.




1 - Import HealthBar file

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>

2 - create a healthBar :

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

create: function() {    
    var barConfig = {x: 200, y: 100};
    this.myHealthBar = new HealthBar(, 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.


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

 // the width will be set to 50% of the actual size so the new value will be 60

setPosition(x, y):

change the position of the bar to the provided coordinates.


fixedToCamera must be true or false value (boolean type). method allows fixed to camera.


will kill the healthbar.