Jump to content

Radial progress bar


Lordubik
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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:
 

 

Link to comment
Share on other sites

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!!

Link to comment
Share on other sites

@mattstylesI was thinking the same thing (what happens when you have many bars :P ). 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).

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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