Radial Sprite Sheet Generator for Circular Progress Indicators

[evaera]

I created a web app that lets you generate radial (circular) progress indicators from any source image you give it. This is necessary because Roblox doesn’t support clipping masks for images. There are other ways to make a radial progress indicator, but nothing will match the quality of using pre-rendered images. Since UI elements are locked to integral coordinates, using dynamically rotated segments creates some pretty undesirable results.

I’m not the first one to make something like this, but I created this tool because I felt like I could improve upon what’s already been done. Notably:

• You can generate the images directly in your browser, no need to download anything or even server-side code.
• The ability to export the sprite sheet across multiple images, so you can get super-smooth quality, even for slow-moving progress indicators.
• You can preview how the animation will look right in the browser as you change the settings, no need to guess-and-check. Just set the preview speed to the slowest you think the bar will move in your game, and then tune the rest of the settings until it looks smooth.

Here is a link to the web app.

The project is open source on GitHub. The web app is hosted on GitHub Pages, so no need to worry about any servers of mine going down. You can also just build it locally if you want. A Lua module is provided along with some instructions to help you get started using this in Roblox.

Examples

https://thumbs.gfycat.com/TemptingFinishedFiddlercrab-size_restricted.gif(image larger than 10 MB)

Both clockwise and counter-clockwise are supported. Exported images are smooth and anti-aliased. Attain best results by keeping the “Size” of each image on the sprite sheet close to the size at which you display it in game.

Works with any kind of image your browser can render (even SVG!)

See the actual sprite sheet for the above image here.. This one is split across two images. The provided module handles switching between them with no extra effort on your behalf.

Final thoughts

For displaying these indicators at arbitrary sizes (i.e. not fixed offset size), consider taking these extra steps:

• Run your final sprite sheets through this process for extra sharpness and to eliminate fuzzy outlines.
• Add some transparent padding around your source image before importing it in the web app to prevent edge bleeding. (Padding may be supported as a setting in the app eventually.)

I hope you find this useful to make high quality radial progress indicators in your games. Feel free to report any problems or suggestions as an issue on the GitHub repository. Contributions welcome as well.

[Mikastrae (Mikayla)]

This is awesome. Once again, you have made another really cool web-based creation. I can’t wait to see how people will use this in future projects.

[Chaotic_Cody]

You’re a great person.

[aresko]

beautiful

[UnderMyWheel (Wheely)]

[evaera]

Updated the app so that custom formulas can now be used in the angle options. This increases the customization options drastically, because you can now have non-linear loading indicators!

Example:
https://i.eryn.io/raw/aj6070yvj5.mp4

[Avallachi]

Trying to load this image in the web app makes it return an error. Please fix this.
I’ve tried with other non-transparent images which works fine.

Image:

Error:

[evaera]

That image is really big, so your tab might be exhausting its allotted resources trying to render it. Try using a smaller image? The largest image size you can upload to Roblox is 1024x1024 anyhow. You can also use an SVG, if that’s easier.

[Avallachi]

That makes sense haha, I didn’t see that the image was that big… I was sure it was 1024x1024, but obviously it wasn’t.

Thank you, I’ll use it a lot.

[ona2000]

This is very neat I feel like I totally need to use this in my projects!

[GeorgeOfAIITrades]

@evaera

The largest image size you can upload to Roblox is 1024x1024 anyhow.

*The largest image size you can upload natively without it being compressed is 1024x1024.

[liuthemoo]

Another excellent and useful tool from evaera, once again! Keep up the great work!

[MrAsync (Async)]

I’m having trouble understanding how the configuration table is supposed to be manipulated. Could I get some help? Thanks!

[evaera]

Sure, but I need to know what you’re having trouble with first.

[MrAsync (Async)]

Actually, I don’t quite have it. I’m having issues with timing. I want the circle to start moving at a specific point and complete when the given time, number, has passed. This is what happens now. The textlabel is accurate.

https://gyazo.com/4070ba1c28f87a3a544f97c57303d7c1

[buildthomas]

Make a post in scripting support, seems off-topic here since the radial sprite sheet generator seems to have worked fine for you.

[MrAsync (Async)]

It’s not working the way I would like it to work. I thought it would make sense to respond to the creator himself to ask him instead of make a new post that he would have to find.

[reteach]

Don’t use this generator but here is how I synced up the timing for my sprite sheets

local Now = math.floor(((tick() - StartTime)/TotalTime)*140)
local Y = math.floor(Now/12)
local X = Now%12
Image.ImageRectOffset = Vector2.new(75*X,75*Y)

[MrAsync (Async)]

Where does the 12 come from in the X and Y variables? I get the 140 in Now is the number of sprites and the 75’s in the Vector2 are the size of the sprites.

[reteach]

So 12 is the number of sprites per row if you treat it like an array. Meaning that the first sprite you see is spot 0 and the second one is spot 1 and so on… I do this because the now value will start at 0 and it’s easier other ways of shifting the values.