Awesome

Phaser.HealthBar

An attempt to create a simple and customizable health bar 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

Demo

Usage

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(this.game, barConfig);
}

Configuration

• 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
  };

Methods

setPercent(value):

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); 

setPosition(x, y):

change the position of the bar to the provided coordinates.

setBarColor(newColor)

change the bar color, use the hex color format. example :

this.myHealthBar.setBarColor('#fc9802');

setFixedToCamera(fixedToCamera);

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

setToGroup(group);

add bar to some group

removeFromGroup();

remove bar from current group and add back to game.world group

kill();

will kill the HealthBar.

License

Phaser.HealthBar is released under the MIT License.