bar life in phaser

[pranadevil]

hi everyone there,

 

does anybody have an a idea to create a life bar in phaser? i've thinking to use tweens and crop. but how i can restart it or reverse it when the player for example touches a heartlife? i know pretty well how to decrease its life but how can i add life to the bar?

 

any advice would be awesome

 

[WombatTurkey]

https://github.com/bmarwane/phaser.healthbar

This might help you

Warning: uses bitmap, so be careful with too many, will use a lot of draws (if above monsters name -- make sure bar changes visibility when out of range, etc)

[pranadevil]

5 hours ago, WombatTurkey said:

https://github.com/bmarwane/phaser.healthbar

This might help you

Warning: uses bitmap, so be careful with too many, will use a lot of draws (if above monsters name -- make sure bar changes visibility when out of range, etc)

thanks, but how i use it? download the .js and add to my folder then how i call it and where? in play.js?

 

[Tom Atom]

Hi, creating simple lifebar is easy. I have these:

object hierarchy for every ship looks like this:

whole object (Phaser.Group)
 |_ Ship (Phaser.Group) (btw, complex skeletal animation)
 |_ LifeBar (Phaser.Group)
        |_ Lifebar backgroud (Phser.Sprite)
        |_ Lifebar inner (Phser.Sprite)

 Ship has two properties: maxLife and currentLife. All parts of lifebar are made of sprites with size 8x8:
 These sprites are stretched as needed according to maxLife and currentLife values

 Define some DEFAULT_BAR_HEIGHT and DEFAULT_BAR_WIDTH and stretch your Lifebar background sprite like this:

 this.width = DEFAULT_BAR_WIDTH;
 this.height = DEFAULT_BAR_HEIGHT;

 For inner calculate width of current bar:

var ratio = ship.currentLife / ship.maxLife ;
var currentWidth = Math.floor(ratio * (DEFAULT_BAR_WIDTH - 2));  // -2 for 1px border
this.width = currentWidth;
this.height = DEFAULT_BAR_HEIGHT  - 2; // again -2 for border
// optionally change frame to change colors of bar
if (ratio < 0.2) {
   this.frameName = "red"
} else if (ratio < 0.5) {
   this.frameName = "orange"
} else {
   this.frameName = "green"
}

 

You can decouple Ship from Lifebar with Phaser.Signals - let your objects (like Ship) send signal when hit and let listen your Lifebar for these signals.

 

[shohan4556]

Hi, I have made this just now , please have a look 

making health bar