How would i make a round EXP / Health bar?

[AdaptabiI (Adaptabil)]

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?

[jaschutte]

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

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:

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!

[Exeplex]

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)

[posatta (pasta)]

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

How to use SliceCenter (Roblox's 9-Slice GUI Property)

Ever wanted to create borders for your UI that you can stretch however you want without distorting the image? Your solution is using 9-Slice scaling. The concept of 9-Slice scaling has been around for quite some time. So you want something like this? [image] And you want to use one image without getting results like this? [image] Well all you have to do is make a template, like this. [image] The corners of the image never stretch, the 4 sides only stretch to their respective directions, a…

[colbert2677 (ImagineerColbert)]

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

Rounded Loading Bar

Sure! Here’s my Explorer setup: [image] Here’s the Base ImageLabel, just set up as you usually would: [image] You can position and size it however you like. Nothing crazy about the image settings either: [image] Inside that, I have a frame called Clipping: [image] It’s just an invisible frame with ClipsDescendants enabled, and it’s sized to match the current progress. For example, if the current progress is 25%, the size of that frame will be {0.25, 0}, {1, 0}, where the 0.25 represent…

[OutlookG (Outlook)]

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!