The Ultimate Guide to Custom Loading/Health Bars

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.

4 Likes

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.

So healthRatio is just the current health divided by the max health

Make sure you are using the correct healthRatio

Is there a way to make this work with tweens? Because tweening it causes some weird behaviors.

1 Like

Thank you for this amazing tutorial, I’m trying to make a game like Boxing League and wanted a custom loading screen for the main menu. It’s exactly the one I was looking for.

1 Like

Did I mess up something? the script I attempted isnt working.

1 Like

Ok so basically, you are storing the health to the currentHealth maxHealth and healthRatio as soon as the game starts, and the variables don’t update. Define all three of those variables inside the hum.Changed function. Hope this helps!

1 Like