Lordubik

Radial progress bar

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.

Share this post


Link to post
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 %.

Share this post


Link to post
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:
 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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!!

Share this post


Link to post
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).

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.