The Ultimate Guide to Custom Loading/Health Bars

Resources Community Tutorials
, ,
#23

Make sure you are using the correct healthRatio

#24

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

1 Like
#25

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
#26

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

image
image867×298 31.3 KB

1 Like
#27

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
#28

Thank you. I started scripting a year ago and didnt think things like this would stop me. Have a good day.

1 Like
#29

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.

#30

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)
#31

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
#32

how do you make the clipping go the other way? instead of left to right go right to left.

#33

could you go more indept on where the script goes and how it would work for a health script

#34

What is the second variable in the called function supposed to be?

#35

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
Custom Loading Bar bottom to top?
#37

How would i be able to do this like Top To Bottom, where it loads from bottom to top

#38

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:
image

After:
image

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)```