Jump to content

bar life in phaser


Recommended Posts

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


Link to comment
Share on other sites

5 hours ago, WombatTurkey said:


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?


Link to comment
Share on other sites

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: BarBlack.pngBarGreen.pngBarOrange.pngBarRed.png
 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.


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...