nexus_6 Posted August 7, 2014 Share Posted August 7, 2014 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 ! havethis.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 timerthis.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 More sharing options...
lewster32 Posted August 7, 2014 Share Posted August 7, 2014 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/ cloakedninjas, clark, Jirka1111 and 1 other 4 Link to comment Share on other sites More sharing options...
nexus_6 Posted August 8, 2014 Author Share Posted August 8, 2014 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. lewster32 1 Link to comment Share on other sites More sharing options...
Jirka1111 Posted October 25, 2014 Share Posted October 25, 2014 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 More sharing options...
Jirka1111 Posted October 26, 2014 Share Posted October 26, 2014 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 More sharing options...
lewster32 Posted October 28, 2014 Share Posted October 28, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts