Adding a real time level progress bar

[MoragX]

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:

BH.progress.drawRoundedRect(101,501,298*percentDone,25,10);

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.

 

Thanks,

-MoragX

 

[redsheep]

If you try to add processing bar during preload, I'll suggest you use game.load.setPreloadSprite method. 

you can check the method in http://docs.phaser.io/Phaser.Loader.html#setPreloadSprite

I don't know much about 'graphics' object, just don't use it during update(seems graphics object would not clear itself)

[MichaelD]

To clear the graphics do:

progress.clear();

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.

[MoragX]

Thanks! Clearing got it working fine - I must have been building up graphics objects and slowing things down that way.

[nag0121]

great one