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?
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?
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!
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:
You can use the SliceCenter
property and just scale it normally. There’s a tutorial on how to use it here:
This may not fit in line with the texture of the bar, but perhaps this may help you out:
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!