How would i make a round EXP / Health bar?

I am trying to make a round Health bar for now, i am using scrolling frames to try acheive the current effect, however it’s not working out too well:

https://gyazo.com/6e9e1c45a13c3d4327f4950bc10bc72e

Is there a better way to do this?

1 Like

When I would make an XP bar or health bar with rounded edges I usually split the bar up in to 2 different images.
mid - right
image
Now I create a frame which covers the entire bar, I will call this maxFrame. Then create another frame which will have the size of 0,0,1,0 also enable clipsdescendants, this bar will be called progFrame.
Parent mid to progFrame and parent progFrame & right to maxFrame.
Mid’s size should be in pixels and not in scale. Same goes for left.
Now the frames should something like:
image
To get to the actual scripting side of things. You will need to resize progFrame each time the user gets XP. progFrame.Size = UDim2.new(UserXp/XpRequired,0,1,0). This will make mid bigger or smaller depending on the users xp. You can tween this if you wish. Now we also have right. We should position right at the right side of mid. This is quite simple, just get the (absolute) position of mid and the size of mid, add them together and we’re done!
right.Position = UDim2.new(0,mid.AbsolutePosition.X+mid.AbsoluteSize.X,)

Notes:
maxFrame is the ‘absolute size’ of the bar. Increase the Y of this an the Y of the bar will increase too.
The size of mid and right combined should be the same as maxFrame or it will look off.
Don’t mess with the size of progFrame. The script should handle the size automaticly.

If you got questions ask me, I’ll be happy to awnser them!

2 Likes

Well, one way to do it is to have the background of the bar on top of everything with the middle being transparent. (Where the color would fit).
These two elements would be parented to a container frame. (Your bar background and the color of the bar)
The container frame would have its “ClipDescendants” set to true. That way, if you move the colored bar’s position, it won’t render beyond the parent’s frame boundaries.

A small hierarchy example:

  • Container frame
    Colored bar
    Background bar (With a higher ZIndex than the colored bar)

You can use the SliceCenter property and just scale it normally. There’s a tutorial on how to use it here:

1 Like

This may not fit in line with the texture of the bar, but perhaps this may help you out:

1 Like

I would use this plugin here: https://www.roblox.com/library/2233768483/Roundify

Then create 1 frame behind and another in front.
You can then scale the one in front based on the health or xp they have!