The Ultimate Guide to Custom Loading/Health Bars

Hello everyone!

In this brief tutorial I will explain how to get a loading bar/health bar effect like these:


image
image
image

And


HOW TO CREATE ROUNDED LOADING BAR


Firstly, create a Frame called “FrameBase”. Put a UICorner in it to make it rounded. Change the BackgroundColor3 to whatever color you want.

image

image

Next, insert a Frame called “Clipping”.

image

Set these properties on this clipping frame:

image
image
image

Now, insert another Frame into the clipping frame and name it “Top”. Make sure to put a UICorner in it to make it rounded.

image

Set the top frame’s size to {1, 0, 1, 0}. Change the BackgroundColor3 to whatever color you want.

image

If you did everything correct, the whole thing should look like this:

image

Now all that is left is the scripting! Scroll down to the very bottom to see what to do for that.


HOW TO CREATE AN IMAGE BASED LOADING BAR


Firstly, create an ImageLabel named “ImageBase”. It is recommended to change the ImageColor3 to a darker color so you can see the difference between the two images at the end.

image

image

Next, insert a Frame called “Clipping”.

image

Set these properties on this clipping frame:

image
image
image

Now, insert another ImageLabel into the clipping frame and name it “Top”.

image

Set the top ImageLabel’s size to {1, 0, 1, 0}.

image

If you did everything correct, the whole thing should look like this:

image

All that is left to do is the scripting! Scroll down to the very bottom to see what to do for that.

SCRIPTING PORTION

So before doing any scripting, if you were to adjust the size of the Clipping frame (the size ratio is 0.7 here for example), you would get a very weird result:

image

In order to make it scale correctly, all you have to do is set the size of Top frame to 1 / ClippingSize. Upon doing so will make it look like this:

image

Fortunately, there is a handy function that will do it all instantly :sunglasses:

function resizeCustomLoadingBar(sizeRatio, clipping, top)
    
    clipping.Size = UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset)
    top.Size = UDim2.new((sizeRatio > 0 and 1 / sizeRatio) or 0, top.Size.X.Offset, top.Size.Y.Scale, top.Size.Y.Offset) -- Extra check in place just to avoid doing 1 / 0 (which is undefined)
    
end

In order to change the size of the bar, all you have to do is call that function, like this:


local healthRatio = currentHealth / maxHealth -- the ratio of the bar to be set

resizeCustomLoadingBar(healthRatio, HPBarClipping, HPBarTop)

That’s it!

If you have any questions, feel free to ask, and I hope you enjoyed the tutorial! :stuck_out_tongue:

– Moonvane

124 Likes

Hey there. I followed the steps and I did not understand the health part. Since I am trying to do the loading screen I don’t know what should I put to make it load. Not sure if I misread but since I am not very experienced I was not able to achieve it. Could you please help? Thanks.

2 Likes

Oh are you stuck on the UI part or the scripting part?

2 Likes

I am stuck in the scripting part. Since I did not exactly understand it.

2 Likes

My bars positioning is in the middle and is screwing up

2 Likes

Ok yes this is because this tutorial was how to make the bar fill from left to right. If you want to make it do this from the middle, you can actually just do this with one step less: you can just delete the Clipping frame and have the Top parented to the BaseFrame.

2 Likes

Oh so basically, in the scripting part, it essentially makes the “Clipping” frame resize to the loading bar ratio that you want, and since the “Top” frame is inside of the clipping, in order for the loading bar to retain its original size, you have to resize the Top frame so it is larger than the clipping.

1 Like

This was a good tutorial but personally the scripting part was not enough for me. This function is nice, but I want to be able to understand things so I can change them or make them better to implement them into my own game. A simple “here’s the script” is not favorable for me. However good tutorial otherwise.

2 Likes

yeah do whatever you want with it, but just calling that function will make the bars work as intended. What part do you need me to explain?

1 Like

Not much, I just figured it out. Not meant to be personal. I understand everything except the (sizeRatio > 0 and 1 / sizeRatio) or 0 part. Is that meant to be an if statement? like if sizeRatio is over 0 then 1/sizeratio but if not its 0?

Basically, anything divided by 0 is undefined (technically infinity) so I just use a ternary operator to make sure I don’t make the size of the bar infinity.

ok thank you that clears it up. Just found ternary operators on the devforum.

1 Like

It helped a lot! Though, is it possible to tween? I have tried tweening and there is this weird thing when it almost bounces for a second. Should I tween only the top or the clipping?

Oh for a tween, I recommend you tween both bars to their respective positions. (The Clipping and the Top).

Thank you for this,
I’ve been trying to figure out how to do this for like months on end

Also, do you have any idea how to make the image go from bottom to top?
I already tried it but it goes from top to bottom.

1 Like

Yeah just change the AnchorPoint and put the Y Scale Position at 1

I would assume I would put the AnchorPoint to (0, 1)?

Yes yes I would try doing that :cowboy_hat_face:

So I tried it out and it just gave me some weird number like Udim2.new(5,0,1,0) for clipping, how would you fix this?

Where does the script go? I would imagine it’s a LocalScript somewhere…

This isn’t working. The script is inside StarterGui but I have no idea what to set the healthRatio variable to.