Hi,
I use progress rings in my new game from Progress Ring Module for Corona SDK site. I don’t why it doesn’t work properly. Look image below
Source code on github. I use progress rings in headings.lua file.
Hi @ldurniat:
Thanks for reaching out to me in a DM. I figured I’d answer you here so that others could potentially benefit from your question and (hopefully) my answer.
The progress ring module is pretty old at this point, and I’ve done a bad job of maintaining it, but I think I can get it working for you.
The biggest issue with it is that I was trying to be clever and auto-generate the bitmap masks used to create the circular and/or donut shape of the ring. It works fine under very controlled situations, but because mask images have very specific pixel-size requirements, and you can’t control the resolution that a saved image will have on every device, you can end up with invalid mask images being auto-generated, and that’s when you get the wonky-looking rings.
That’s bad news for me, as I’d hoped to make the progress ring module a “one and done” type solution, where you wouldn’t need to add anything to your project except for the module itself. But it’s good news for you, because you can just include your own pre-rendered mask images that you know will always work, since you’ll know the size of your rings in advance.
The code you would need to replace begins on line 223 of the module. Basically you can remove most of the code that “creates circular mask for slices.” Instead of all that effort to create and save a mask image (which doesn’t always save to the spec required by Corona for mask images when using dynamic scaling, just load your own mask image as it does on line 253 and then set the mask on the “bg” object (see line 256) and the “sliceGroup” object (see line 258). That’s a distillation of exactly what you’ll need to do, but it should get you on your way. Give it a go on your own, and if you hit any specific hurdles, mention them here and I’ll help you work it through, so that others can use it as a resource.
Thanks for using the module - sorry it’s not better out of the box! Maybe one of these days I’ll dust it off and turn it into a proper plugin, where I can include pre-rendered mask files easily. 
Jason, any chance you could make a version that includes those changes and uses such pre-rendered mask images?
Interesting - just changed config file to scale = “adaptive” and it seems to work on the simulator with any device chosen.
@lessmsios: sorry for the long delay in replying to your question - I am working on a revamped plugin version of the progress ring that will always look correct no matter the device resolution, and with better performance. I’m working to make it fully backwards-compatible with the old module, so if you already use the module you can just switch to the plugin painlessly.
The plugin will be paid, but it’ll be a one-time purchase and low-priced. I’m thinking $5 or less. Of course, you can continue to use the old module and make any necessary resolution fixes yourself (using pre-rendered mask images, etc), but if you want a nice simple plug & play way to get a progress ring in your app, the plugin will do the trick.
I’m finishing up the code now, and then have to submit to Corona, but I’ll post a link here when it’s up in the marketplace.
That would be nice schroederapps. I was wrong in my previous post - setting the scale = “adaptive” did help but there was 1 device that continued to display wrong.
Hope you’re successful with your update!
@lessmsios: thanks for the support. Corona Labs just approved my plugin submission, so you can now purchase it for $2.99 and have progress rings that will work on any device, at any resolution, regardless of your scaling method. The syntax is pretty much identical to the plugin, so it should be “plug and play” with your existing code.
This new plugin version uses fewer display objects to achieve the progress indicator rotation effect, and also skips the attempt at generating unique mask files on the fly, so not only does it work better, it’s streamlined and I think a lot nicer. Hope you can use it!
Here’s the link to the plugin on the marketplace: https://marketplace.coronalabs.com/plugin/progress-ring
Bought it - looks very good yet has a couple of problems:
1 - Using composer put one ring on one composer page and another on a 2nd composer page. The slider works on the first page but if you view the 2nd page and go back to the 1st, the ring is displayed but does not respond to changes using
myRing:goTo or
myRing.position
2 - myRing:reset() does not work, gives an error: “attempt to call method ‘reset’ (a nil value)”
Hi @lessmsios. Sorry I didn’t reply to this sooner. I’m unable to reproduce this in my testing, but there are a lot of variables that could be causing the differrnces. Can you zip up a self-contained example that demonstrates the problem and attach it to this thread? That will allow me to try and fix it if it’s a plugin issue or diagnose any issues that might not be plugin-related.
@lessmsios: actually, scratch that request for a self-contained example. I’ve diagnosed an issue with the plugin, in that I attach enterFrame listeners directly to the ring objects themselves, and for some reason the Composer library removes those listeners when switching scenes in a way that prevents from being re-attached when the scene is restored. I will implement a fix in the next day or so that will get things working right again.
Thanks for buying the plugin, and for helping to make it better!
That plugin cost 2$. is there any free plugin
@lessmsios: I just pushed updated plugin code to CoronaLabs’ plugin servers. They say it could take up to an hour for the code to get pushed to users, but by the end of the day for sure things should “just work” within Composer scenes. It’s working fine in my testing, but please confirm that it fixes your specific use-case if you don’t mind. Thanks!
@schroederapps: tried it and it appears to be fine. I don’t use the delay since all movements are within my code, so am wondering if you’re setting up enterFrame listeners even if no delay (aka, 0 delay) is set?
A suggestion if you ever get bored: Knowing how you previously created the ring with segments would it be difficult to set a gradient option for the ring setting the color from G1 to G2?
BTW - your price is very cheap - practically free, thanks!
@lessmsios: glad that the update fixed things for you. I like the simplicity of an enterframe listener because it allows a nice smooth transition, as well as a simple update of the position by adjusting the object’s .position property. It sounds way more expensive an operation than it is. Think of it as akin to updating an object’s .x and .y properties on every frame. No particularly heavy lifting required: I just asjust 2 display rect’s rotations to reflect the ring’s position.
As for supporting gradient, I’ll give it some thought, but I may not get around to implementing it too soon. I’m picky about having those things look seamless, and part of the optimizations for the plugin involved reducing the number of display objects nested in the ring object: I no longer use many pie-shaped segments, but instead use just 2 rects: one for each hemisphere (left & right). So I’d need to rethink that strategy to support a gradient fill.
But thanks for buying, and for helping to make it better with your notes!
If I wish to allow the user to change bgColor and/or ringColor to a color of their choice after the ring is created, how can this be done? PLEASE don’t say the ring has to be recreated!
@lessmsios: unfortunately, at the moment you’d need to recreate the ring object to change the color. I’ll put adding :setBgColor and :setRingColor methods on my to-do list.
@schroederapps: Thanks! Perhaps add other properties like:
-
radius
-
boarder
-
boarder color
-
refresh (property changes take effect when called)
I’ll just recreate it for now.
David
I’ve pushed up an update to the plugin that adds methods for changing the strokeWidth, strokeColor, bgColor and ringColor of your ring object on-the-fly, after they’re created.
Changing the size of the object is best handled using the xScale and yScale properties of the ring object, and that doesn’t require any new changes to the plugin.
It could take an hour or more before the changes are actually live. In the meantime, you can check the updated documentation at https://schroederapps.github.io/progress_ring/
Looks good, thanks! More efficient than deleting/creating over and over.
Hi @ldurniat:
Thanks for reaching out to me in a DM. I figured I’d answer you here so that others could potentially benefit from your question and (hopefully) my answer.
The progress ring module is pretty old at this point, and I’ve done a bad job of maintaining it, but I think I can get it working for you.
The biggest issue with it is that I was trying to be clever and auto-generate the bitmap masks used to create the circular and/or donut shape of the ring. It works fine under very controlled situations, but because mask images have very specific pixel-size requirements, and you can’t control the resolution that a saved image will have on every device, you can end up with invalid mask images being auto-generated, and that’s when you get the wonky-looking rings.
That’s bad news for me, as I’d hoped to make the progress ring module a “one and done” type solution, where you wouldn’t need to add anything to your project except for the module itself. But it’s good news for you, because you can just include your own pre-rendered mask images that you know will always work, since you’ll know the size of your rings in advance.
The code you would need to replace begins on line 223 of the module. Basically you can remove most of the code that “creates circular mask for slices.” Instead of all that effort to create and save a mask image (which doesn’t always save to the spec required by Corona for mask images when using dynamic scaling, just load your own mask image as it does on line 253 and then set the mask on the “bg” object (see line 256) and the “sliceGroup” object (see line 258). That’s a distillation of exactly what you’ll need to do, but it should get you on your way. Give it a go on your own, and if you hit any specific hurdles, mention them here and I’ll help you work it through, so that others can use it as a resource.
Thanks for using the module - sorry it’s not better out of the box! Maybe one of these days I’ll dust it off and turn it into a proper plugin, where I can include pre-rendered mask files easily.