I would assume I would put the AnchorPoint to (0, 1)?
Yes yes I would try doing that 
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
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
Thank you. I started scripting a year ago and didnt think things like this would stop me. Have a good day.
1 Like
Hey I tried your tutorial, but it doesn’t work for me.
local character = game:GetService("Players").LocalPlayer.Character
local hum = character:WaitForChild("Humanoid")
local currentHealth = hum.Health
local maxHealth = hum.MaxHealth
local HPBarClipping = script.Parent.ImageBase.Clipping
local HPBarTop = HPBarClipping.Top
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)
end
hum:GetPropertyChangedSignal("Health"):Connect(function()
local healthRatio = currentHealth / maxHealth
resizeCustomLoadingBar(healthRatio, HPBarClipping, HPBarTop)
end)
The health bar isn’t changing.
you never update currentHealth and maxHealth, try
local character = game:GetService("Players").LocalPlayer.Character
local hum = character:WaitForChild("Humanoid")
local HPBarClipping = script.Parent.ImageBase.Clipping
local HPBarTop = HPBarClipping.Top
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)
end
hum.HealthChanged:Connect(function(currentHealth)
local maxHealth = hum.MaxHealth
local healthRatio = currentHealth / maxHealth
resizeCustomLoadingBar(healthRatio, HPBarClipping, HPBarTop)
end)
Oh my god. Thank you so much! I was trying for so long trying to do this but I was stumped. You saved me hours of forum searching, tysm.
1 Like
how do you make the clipping go the other way? instead of left to right go right to left.
could you go more indept on where the script goes and how it would work for a health script
What is the second variable in the called function supposed to be?
I got it working, however i wanted to tween the transition when the health changes, i did this and it works, however it gets some very weird output.
Any clues on how to fix this?
local player = game.Players.LocalPlayer
local character = player.Character
local humanoid = player.Character:WaitForChild("Humanoid")
local UI = player.PlayerGui.OverlayUI
local tweenservice = game:GetService("TweenService")
function resizeCustomLoadingBar(sizeRatio, clipping, top,wentdown)
if wentdown then
local tweenInfo = TweenInfo.new(0.2)
local tween2 = tweenservice:Create(clipping, tweenInfo, {Size = UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset)})
local tween1 = tweenservice:Create(clipping, tweenInfo, {Size = UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset)})
print("yo")
spawn(function()
tween1:Play()
end)
tween2:Play()
else
print("nah")
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
end
local lasthealth = player.Character:WaitForChild("Humanoid").Health
humanoid:GetPropertyChangedSignal("Health"):Connect(function(health)
local isdown
local currentHealth = character.Humanoid.Health
local maxHealth = character.Humanoid.MaxHealth
if lasthealth > currentHealth then
isdown = true
else
isdown = false
end
lasthealth =currentHealth
local healthRatio = currentHealth / maxHealth -- the ratio of the bar to be set
resizeCustomLoadingBar(healthRatio,UI.Frame.Back.Clipping ,UI.Frame.Back.Clipping.Health ,isdown)
end)
1 Like
How would i be able to do this like Top To Bottom, where it loads from bottom to top
for some reason when i take damage instead of lowering the bar it grows, i managed to fix it however the bar when it gets slow loses its quality alot since its an image
before:
After:
local Player = game.Players.LocalPlayer
local Character = Player.Character
local Humanoid = Character and Character:FindFirstChildOfClass("Humanoid")
local HealthDisplay = script.Parent
local Clipping = HealthDisplay.Parent
local MaxHealth = Humanoid and Humanoid.MaxHealth
function resizeCustomLoadingBar(sizeRatio, clipping, top)
clipping:TweenSize(UDim2.new(sizeRatio, clipping.Size.X.Offset, clipping.Size.Y.Scale, clipping.Size.Y.Offset),Enum.EasingDirection.In,Enum.EasingStyle.Sine,0.1,true)
top:TweenSize(UDim2.new(sizeRatio, 0, top.Size.Y.Scale, top.Size.Y.Offset),Enum.EasingDirection.In,Enum.EasingStyle.Sine,0.1,true)
end
Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
local CurrentHealth = Humanoid.Health
local HealthPercentage = CurrentHealth / MaxHealth
resizeCustomLoadingBar(HealthPercentage,Clipping,HealthDisplay)
end)```