Radial progress bar

[Lordubik]

Hi, is it possible with Phaser make a radial progress bar, like the progress bar on 'clash royale' for loading a unit? 

Thanks for help!!

[mattstyles]

I done this before using standard canvas drawing tools, I can't remember exactly but its either drawing a line or drawing an arc, translating % load into arc coordinates. I did this by changing the colour of the line/arc from red to green (which made sense in my case as it wasn't a load indicator) too.

Pretty sure Phaser exposes standard canvas drawing operations so you can do the same.

[alex_h]

It's also possible to do this using two semi-circle sprites and a cut out chunk of your background. The limitation is that the circles need to be flat colour, unless you use them as a mask somehow. Set the anchor for both semi circles to half way down the straight edge, and position them both at the same point. Make one of them have its curved side on the left and be layered behind the chunk of cut out background. Make the other have its curve on the right side, and set it visible = false. For progress 0 - 50% rotate the first semi circle 180 degrees, effectively revealing it from behind the chunk of background. Then show the second semi circle and rotate it 180 degrees for the subsequent 50 - 100 %.

[samid737]

Here is an example of how to draw a radial progress bar using phaser.graphics according to @mattstyles his explanation. 

graphics.arc draws the arc with the angle as a parameter: 

The lineColor is interpolated from color red to color green:

 

This might be a solution., but I don't know if its the best solution when looking at performance. Also note that the color goes to a darker orange halfways. But you could apply two interpolations (from red to "real orange" until halfway and "real orange" to green when you are halfway). Or you could interoplate in HSV color space (a  feature in v.2.9.0:
 

 

[mattstyles]

Yeah I had some real issues with perf doing this, but I was using it on mobile devices in a list of about 40 items, each with their own radial gauge. I started animating each of the radial gauges all at once but switched to doing it only when they were in view and so limiting the number of concurrent animations.

[Lordubik]

Thanks for replays... A circle radial I done, more or less... but I have a problem to create a rectangle with radial progress bar, is for enable a element on menu item. The element has a rectangle shape.

 

Thanks for help!!

[samid737]

@mattstylesI was thinking the same thing (what happens when you have many bars  ). also I actually tested it on my mobile and it cannot even complete the circle( it slows down over time). I profiled it in my firefox browser and I also see the framerate drop over time, but I don't really know what is causing it to slow down. Maybe it was not a good idea to use Phaser graphics in the update function (or interpolation)..

EDIT: fixed now, I used a tween(but you can also use a counter within update) to change the angle and I added graphics.clear() (without clear()-->disaster), now it works smoothly (forgive me).