Problem with health bar progression

[Bazgir]

Hello,

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);

this.monsterProgressBar.crop(cropRect);

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

this.monsterProgressBar.updateCrop();

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.

 and 

Any assistance is appreciated.

 

Thanks

[FakeWizard]

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

[Bazgir]

Hello,

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.

Thanks

[FakeWizard]

I have made it working with cropping.. just couldn't add images to it so you gotta test it locally.

https://jsfiddle.net/5hu4kcg0/4/