Jump to content

Problem with health bar progression


Recommended Posts


I'm trying to have a health bar that goes down (or up) depending on the monster's current health, however while it loads the sprite for the health bar, it doesn't crop whenever the monster takes damage or heals. I can get away with cropping a texture because there is only ever going to be one use of this texture and one monster at a time.

I have the following code for loading the health bar: 

this.monsterProgressBar = this.monsterInfoUI.addChild(this.game.add.sprite(143, 370, 'progressbar'));

var cropRect = new Phaser.Rectangle(0, 0, this.monsterProgressBar.width, this.monsterProgressBar.height);


And then this snippet of code included to run in the function that applies damage to the monster on player click:


Any ideas what I'm doing wrong?

I tried searching and most of what I'm using comes from the following two threads, however I'm not quite able to get it to click in my mind and get it to work in the code.


Any assistance is appreciated.



Link to comment
Share on other sites

Well, it maybe easier just cropping the image, but what if you need the health bar to change color dynamically when you're facing a specific enemy type ..or when your health goes below certain threshold and you'd like the player to be aware that he's low on health .. etc.. 

So in such cases,  I found it easier to implement hp bars with Phaser.Graphics,  See my below example. 

https://jsfiddle.net/5hu4kcg0/1/  ( without dynamically updated color )

https://jsfiddle.net/5hu4kcg0/3/   ( with dynamically updated color )

For sake of simplicity I didn't add the hp-drain effects.  Which would select the portion of the HP (width white color)  that has been taken and slowly reduces the size to 0 and leaving you just the remaining amount of HP. But if you would like to see that in action as well, just give me a nudge :)

Link to comment
Share on other sites


Thank you for the reply. Fortunately I don't need the health bars to dynamically change color, but my issue is that the image doesn't crop with the code I'm currently using. It displays just fine, but when you damage the monster the health bar doesn't budge. I'll take a look at the code you've provided for me and see if I can't get it to work.


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