Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

bar life in phaser


pranadevil
 Share

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:

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?

 

Link to comment
Share on other sites

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

Untitled.png

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

 Share

  • Recently Browsing   0 members

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