nexus_6

BitmapData draw countdown time

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.

 

Share this post


Link to post
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/

Share this post


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

Share this post


Link to post
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/

 

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.

Share this post


Link to post
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);

Share this post


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

Guest
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.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.