Player Health bar - error

[xronn]

So I'm trying to display a players health this is what I've come up with so far - 

Create -

healthbar = this.add.sprite(38, 616, 'healthbar');healthbar.fixedToCamera = true;healthbar.cropEnabled = true;maxHealth = 100;player.alive = true;

Update - 

healthbar.crop.width = (player.health / maxHealth) * healthbar.width;

Basically when a player takes damage the player.health will drop below the maxHealth which would hopefully crop the health bar, unfortunately I don't get any errors and when I take damage say down to 67 hp the crop doesn't run on the healthbar and it remains are full width.

[WombatTurkey]

Please create a jsfiddle

[jmp909]

I think crop width might be a read only property and you actually need to set it with a rectangle. I can check tomorrow , but have a look at the docs again. I also posted a Minimap example somewhere , see if you can find that as I think it uses crop

[xronn]

This exact code worked before in 1.2 I think it was so I'm not sure whats changed these days, I've had a look and I think crop should be working 

[Tom Atom]

Hi, I believe, that you have to call updateCrop() after changing width in update method. This is part of my game code:

 

create:

            // top            this._top = new Sprite(aGame, 0, 0, "UI", "LimitTimeTop");            var topFrame = aGame.cache.getFrameByName("UI", "LimitTimeTop");            this._topHeight = topFrame.height;            this._topCropRect = new Phaser.Rectangle(0, 0, topFrame.width, topFrame.height);            this._top.crop(this._topCropRect, false);

sets new crop rect as big as original sprite's frame.

 

update:

            // top            var newHeight = Math.floor(this._topHeight * topPercent);            this._topCropRect.y = this._topHeight - newHeight;            this._topCropRect.height = newHeight;            this._top.updateCrop();            this._top.y = this._topHeight - newHeight;

chnges and updates cropping.

 

Anyway, if your health bar is colored rectangle bar, then it may be better and easier for you just set sprite's width to needed number of pixels.

[xronn]

Hi,

 

I had a go using the updateCrop but not errors, or changes to the width of my sprite unfortunately. My healthbar isn't just a red rectangle, its a rounded shape with multiple colours. I'll keep working on it and if I find a solution I'll post it here 

[xronn]

bump :S 

[jmp909]

As mentioned, create a jsfiddle or phaser sandbox please

[xronn]

I will do but I need external assets, how can i bring in external sprites to demo in the phaser sandbox?

[WombatTurkey]

I will do but I need external assets, how can i bring in external sprites to demo in the phaser sandbox?

 

 

You need to add the --disable-web-security argument to your Chrome.exe target path.

 

 

[jmp909]

see the single sprite sandbox example

 

    game.load.baseURL = 'http://examples.phaser.io/assets/';    game.load.crossOrigin = 'anonymous';

make sure cross domain policy is allowed on your server