I’m trying to create progress bar that has shape of the ring and it will look something like this:
http://www.youtube.com/watch?v=QL7hlSkXhW4
I know how to create ring:
local circle = display.newCircle (100,100,200)
circle:setFillColor(0,0,0,0)
circle.strokeWidth = 5
circle:setStrokeColor(0,255,0)
but I’m not sure how to do this animation. Is it posible to something like this in Corona?
Thanks in advance!
If you have the time to render a bunch of images, you can do it a ‘quick and dirty’ method and replace a display object’s image with the object.fill method.
local progressBar = display.newImageRect( "percent100.png", 64, 16 ) progressBar.x, progressBar.y = display.contentWidth \* 0.5, display.contentHeight \* 0.5 local percentage = 100 local function changeBar( amount ) -- make sure it's a multiple of 10 and within the range amount = math.round( amount \* 0.1 ) \* 10 if amount \< 0 then amount = 0 else if amount \> 100 then amount = 100 end -- change the image of the display object progressBar.fill = { type = "image", filename = "percent" .. amount .. ".png" } end timer.performWithDelay( 1000, function() percentage = percentage - 10 changeBar( percentage ) end, 10 )
This is assuming you have files called percent100.png, percent90.png, percent80.png, and so on all the way down to percent0.png. With this method, you can make the image as nicely detailed as possible, instead of having to just render one on the fly, and you could make it any shape or icon, i.e. a clock, an hourglass, etc.
Graphics 2.0’s new object.fill is a very appreciated method that makes it easy to change the image of an already-established display object without having to deal with setting up spritesheets and animation sequences.
Thanks BeyondtheTech!
Something like this was my plan B :) I’l try to implement this using Sprite sheet.
I thought that maybe there is some simple method without using images.
Thanks again!
Cheers!
You could grab the progressView widget source code off GitHub and try to get its straight bar draw method replaced with a circle arc draw. Just an idea.
maybe I’m just not seeing it but I’ve watched the video 4 times and have not seen a progress ring just a yellow timer bar.
@ksan thanks, I’ll take a look at this. Sounds interesting.
@jstrahan You’re seeng right :). There is no ring progress in this video. My idea is to make ring shaped progress bar that has the same behavior as that yellow timer bar.
I’ve posted this video just to give an example what I want to do.
If you have the time to render a bunch of images, you can do it a ‘quick and dirty’ method and replace a display object’s image with the object.fill method.
local progressBar = display.newImageRect( "percent100.png", 64, 16 ) progressBar.x, progressBar.y = display.contentWidth \* 0.5, display.contentHeight \* 0.5 local percentage = 100 local function changeBar( amount ) -- make sure it's a multiple of 10 and within the range amount = math.round( amount \* 0.1 ) \* 10 if amount \< 0 then amount = 0 else if amount \> 100 then amount = 100 end -- change the image of the display object progressBar.fill = { type = "image", filename = "percent" .. amount .. ".png" } end timer.performWithDelay( 1000, function() percentage = percentage - 10 changeBar( percentage ) end, 10 )
This is assuming you have files called percent100.png, percent90.png, percent80.png, and so on all the way down to percent0.png. With this method, you can make the image as nicely detailed as possible, instead of having to just render one on the fly, and you could make it any shape or icon, i.e. a clock, an hourglass, etc.
Graphics 2.0’s new object.fill is a very appreciated method that makes it easy to change the image of an already-established display object without having to deal with setting up spritesheets and animation sequences.
Thanks BeyondtheTech!
Something like this was my plan B :) I’l try to implement this using Sprite sheet.
I thought that maybe there is some simple method without using images.
Thanks again!
Cheers!
You could grab the progressView widget source code off GitHub and try to get its straight bar draw method replaced with a circle arc draw. Just an idea.
maybe I’m just not seeing it but I’ve watched the video 4 times and have not seen a progress ring just a yellow timer bar.
@ksan thanks, I’ll take a look at this. Sounds interesting.
@jstrahan You’re seeng right :). There is no ring progress in this video. My idea is to make ring shaped progress bar that has the same behavior as that yellow timer bar.
I’ve posted this video just to give an example what I want to do.
Hi, did you manage to get something working? I *think* im trying to do the same. Are you trying to get a cicular image where a ring moves around it?
Well we created progress bar as a sprite sheet containing 6 images(frames): for 0 percent, 20 percent, 40 percent… Then we changed frame according to the percent value. Hope this will help you.
Hi, did you manage to get something working? I *think* im trying to do the same. Are you trying to get a cicular image where a ring moves around it?
Well we created progress bar as a sprite sheet containing 6 images(frames): for 0 percent, 20 percent, 40 percent… Then we changed frame according to the percent value. Hope this will help you.
If you are still looking more information on this subject, check out Jason Schroeder’s Ring Progress Bar here:
http://www.jasonschroeder.com/
It’s pretty slick.
Thanks for the kind words, James! Glad that my little module is helping folks out. 
No Problem Jason!
The guys at Corona Geek have been talking about it for awhile…it’s really slick! Nice work!
UPDATE: With daily build #2015.2544, Corona Labs fixed the finalize() bug that prevented objects’ finalize events from being triggered when their parent display group was removed. Woohoo! However, my progressRing module had a bug that only manifests itself now that finalize() is working again. I had utilized a workaround developed by @sergeylerg, but there was an error in my implementation of that fix that causes a crash when run on build 2015.2544 and later. I fixed that error by adding a 1ms timer when checking to see if finalize events are being triggered as they should. The finalize() fix is not necessary for up-to-date Corona builds, but I’m leaving it in for folks who might be running legacy Corona builds.
Please get the updated version of the progressRing module at http://www.jasonschroeder.com/2014/12/21/progress-ring-module-for-corona-sdk/
If you are still looking more information on this subject, check out Jason Schroeder’s Ring Progress Bar here:
http://www.jasonschroeder.com/
It’s pretty slick.