Jump to content

Adding a real time level progress bar


Recommended Posts

Hey everyone,


I'm trying to add a progress bar to show level progress that looks something like this.




Right now I'm using a graphics object, initializing the black bar like this:


progress = game.add.graphics(0,0);progress.lineStyle(2, '0x000000');progress.beginFill('0x000000',1)progress.drawRoundedRect(100,500,300,27,10);progress.endFill()progress.beginFill('0x999999',1) //For drawing progress

And on my main update function, I do this to draw the gray bar showing progress:


This is not working very well - it is really slow (my FPS drops by 20 or 30 points sometimes), and sometimes it seems like it's trying to draw the bars together (I get a mix of gray and black splotches), plus it breaks down when the second rectangle is small (I get weird lines at the edges). I'm assuming I'm just going about it completely wrong - I'd appreciate pointers on how to achieve this.





Link to comment
Share on other sites

To clear the graphics do:


and re-apply all the styles, I know it is quite silly to do it like this but this is the way graphics used to work in Actionscript also so I imagine this was ported.


Now in terms of some other solution, you can have an image of the "colored bar" and increase its width.

var progress = game.add.image(0, 0, "bar");progress.width = 0;progress.initialWidth = 300 // the original image width in pixels// then on updateprogress.width = percentDone*progress.initialWidth; // percentDone should be in decimals 20% = 0.2// so this will finaly result in 1 * 300 = 100%

I hope it makes sense.

Link to comment
Share on other sites

  • 3 years later...

  • Recently Browsing   0 members

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