BitmapData draw countdown time

[nexus_6]

I want to use bitmapdata to draw a bar to be used as a visual countdown timer (and later for health bars). I can't seem to get anything to draw on screen. Following this example as best I can.

 

In my create() function ! have

this.powerup1_bar = this.add.bitmapData(this.width, this.height);this.powerup1_bar.context.fillStyle = '#fff';// Add the bmd as a texture to an Image object.// If we don't do this nothing will render on screen.this.add.sprite(0, 0, this.powerup1_bar);

and in my function that is looped by my timer

this.powerup1_bar.context.fillRect(10, 510, 20 * this.powerup1_remaining, 20);

where this.powerup1_remaining is an integer decremented by 1 every second. I can draw this number to the screen but not a rectangle representing it.

 

[lewster32]

Two things are important for this - clearing the context before you update the bar, and ensuring you set the BitmapData object's dirty property to true, otherwise when using webGL you'll never see the sprite update. I've put a little jsfiddle together to demonstrate it working: http://jsfiddle.net/lewster32/shodch8x/

[nexus_6]

Thanks, that really helped. I think the issue I was having was not clearing the context before I updated the bar and getting messed up with positioning the bitmapdata. I think I was rendering it off screen or something, I thought the arguments in this.add.bitmapData() had to be the width & height of the game.

[Jirka1111]

Two things are important for this - clearing the context before you update the bar, and ensuring you set the BitmapData object's dirty property to true, otherwise when using webGL you'll never see the sprite update. I've put a little jsfiddle together to demonstrate it working: http://jsfiddle.net/lewster32/shodch8x/

 

Lewster, how can I add an extra time? I want to code progress bar like in the Timber Man. One success (for example killing an enemy) and add 500 ms.

[Jirka1111]

Ok, so, expanding of bar is easy:

 

 

 

Now I have to manage time...

 

(I am writing this because of future users)

 

EDIT:

OK, I've got this.

 

You need just add these two lines:

 

this.progressBar.width += 100;

this.tween = this.game.add.tween(this).to({barProgress: 0}, this.time + 300, null, true, 0, 0);

[lewster32]

The example I provided wasn't a timer, just a generic progress bar example to demonstrate how you'd draw it. A more robust solution would replace the absolute barProgress value with a percentage or a fraction; 0 to 1 for empty to full.