pranadevil Posted June 14, 2016 Share Posted June 14, 2016 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 More sharing options...
WombatTurkey Posted June 14, 2016 Share Posted June 14, 2016 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) Link to comment Share on other sites More sharing options...
pranadevil Posted June 14, 2016 Author Share Posted June 14, 2016 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 More sharing options...
Tom Atom Posted June 15, 2016 Share Posted June 15, 2016 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. pranadevil 1 Link to comment Share on other sites More sharing options...
shohan4556 Posted June 15, 2016 Share Posted June 15, 2016 Hi, I have made this just now , please have a look making health bar DiegoMontania and pranadevil 2 Link to comment Share on other sites More sharing options...
Recommended Posts