How would I go about creating a radial load bar

Help and Feedback Scripting Support
#1

Creating a UI element that starts as a filled circle then arcs out following a radial form drawing a path behind it as it moves back to its original position.

Or, in other words drawing a circle.

3 Likes
#2

unit circle

for degrees = 1,360 do
local x = math.sin(math.rad(degrees))
local y = math.cos(math.rad(degrees))
end

Obviously you’ll probably want to do some “scaling” with the rotation and size of the frames, but this will give you a perfect center assuming midpoint = 0,0, and then you can just set frame rotation to = “degrees” and it will face the center

1 Like
#3

Oh, so it has to be drawn in segments. I was guessing that would be the case; that would be cool if they added a radial image slicing property for ImageLabels.

#4

Yeah it would have to be done in segments, though you could do it pretty efficiently and still have it look pretty circular if you tried.

#5

True if it is moving fast enough at smaller segments, wondering how this would impact performance on the client though; probably just fine right?

#6

I scripted something like this back when Destiny 1 came out, it didn’t seem to really impact client performance that much and I did it really inefficiently. I literally did 360 2x2 frames

if I did this today, I would probably make it like 16-24 2x(segment length) frames that use tweening to universally work at any activation speed.

#7

Alright, thank you for the advice.

#8

Sprite sheet. Something like this:

1 Like
#9

who… who made this

image
what IS THIS ORDER?!

29 Likes
#10

Uhhhh I googled it but you get the idea

3 Likes
#11

Here’s a wild idea:

(My friend @Zeumus needed the same kind of thing and this method worked fine in the end.)

The ingredients are: a background (full circle), a cap (smaller circle) and 2 half-circles. The half-circles start off exactly on top of each other. The top one is the same colour as the background, so that it looks like nothing loaded yet.

Now, the top half-circle rotates around counter-clockwise until the bottom half-circle is fully visible. Then, the top half-circle appears back on the right side and changes colour. Then, the top half-circle rotates again to the other side.

6 Likes
#12

Funny that you mention that, cause I decided to go with a similar method to this instead of using unit circles (for a couple of reasons); although I am using more arc segments so I can create cool color effects if I want to.

Yet, I am having the issue of dark edges around the arc segment images. Is there any way to get around this, or is it just an issue with Roblox ImageLabels.

2 Likes
#13

I would just like to point out that there was a mistake on the bottom ones, they look a lot more messy lol. Sorcery

I fear what happens if the person who made this tried making a more complex sprite sheet…

6 Likes
#14

You could potentially use one circular image asset and some ZIndex magic with other UI elements to fake a radial bar. However, that all depends on the UI design so I suggest segments.

#15

Only a level 10 scripter could make that sprite sheet work :joy:

3 Likes
#16

Let’s make it a devforum auto-acceptance test. If you can make it animate smoothly, you’re automatically in. you deserve it.

3 Likes
#17

Don’t know if this is still relevant, but I recently found this article by @Quenty that teaches how to solve that. Fixing images in Roblox UI. This article is going to look how you… | by James Onnen (Quenty) | Roblox Development | Medium

5 Likes