Jump to content

BitmapData draw countdown time


nexus_6
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...