Radial Sprite Sheet Generator for Circular Progress Indicators


#1

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

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.


Progress Circle UI Element
Making a pie chart style load UI
Prompt user to load/save file from plugin
#2

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. :slight_smile:


#3

You’re a great person.


#4

beautiful


#5

:heart:


#6

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:


#7

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:


#8

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.


#9

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.


#10

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


#11

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


#12

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