https://github.com/bmarwane/phaser.healthbar
https://github.com/bmarwane/phaser.healthbar
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bmarwane/phaser.healthbar
- Owner: bmarwane
- License: mit
- Created: 2015-08-30T23:29:59.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-12-04T11:40:20.000Z (over 7 years ago)
- Last Synced: 2024-05-17T12:33:10.083Z (about 2 years ago)
- Language: JavaScript
- Size: 752 KB
- Stars: 70
- Watchers: 9
- Forks: 21
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
- awesome-phaser - Healthbar - An attempt to create a simple and customizable healthbar for Phaser.js games. (Uncategorized / Uncategorized)
README
# 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](http://apprendre-le-js.com/phaser-js-healthbar-tutorial/ "apprendre-le-js.com healthbar tutorial").
## Demo
[Demo](http://apprendre-le-js.com/tuto_examples/healthbar/4/)
## Usage
### 1 - Import HealthBar file
If you are using a CommonJS implementation (Browserify) :
```javascript
var HealthBar = require('path/to/HealthBar.js');
```
if not, just include the HealthBar.standalone.js in the html file.
example :
``` html
```
### 2 - create a HealthBar :
in the game/state create function instantiate a HealthBar like this:
```javascript
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 :
```javascript
{
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:**
```javascript
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 :
```javascript
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](https://opensource.org/licenses/MIT).