pranadevil

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

 

Share this post


Link to post
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?

 

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.