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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...