How To Make Advanced Health Bar

[Zinou_TM (Gojo)]

About The Health Bar

Its a little gui that show the player health and only client “Player” can see it and its animated using TweenService

Setting Up The Health Bar

The Size and the Position of the Frame in the red border Should Be Like this:

Enable The Reset on Spawn Property in the Health Gui

The Script

Put the script in the local script

local TW = game:GetService("TweenService")--Get Tween Service

local Player = game:GetService("Players").LocalPlayer --Get The Player
local Character = Player.Character or Player.CharacterAdded:Wait() --Wait For The Player Humanoid
local Humanoid = Character:WaitForChild("Humanoid") --Get The Player Humanoid

local Healthbar = script.Parent -- Get The Health Bar

local function UpdateHealthbar() --Health Bar Size Change Function
	local health = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1) --Maths
	local info = TweenInfo.new(Humanoid.Health / Humanoid.MaxHealth,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,false,0) --Tween Info
	TW:Create(script.Parent,info,{Size = UDim2.fromScale(health, 1)}):Play() -- Create The Tween Then Play It
end

UpdateHealthbar()--Update The Health Bar

Humanoid:GetPropertyChangedSignal("Health"):Connect(UpdateHealthbar) --Update The Health Bar When The Health Change
Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(UpdateHealthbar) --Update The Health Bar Wheb The MaxHealth Change

Shout out to this guy csqrl for the script he posted in the Last Tutorial

[MyHeadisMelting]

This is a great tutorial but i do have a complaint
Maybe try having a video on the final product that way people will be more eager to try it knowing what they will get.

[Zinou_TM (Gojo)]

ik there is a gif but it didnt work i updated it and still didnt work

[MyHeadisMelting]

Ok then maybe try instead of a gif a video?

[Zinou_TM (Gojo)]

i cant upload video to the dev forum this is not allowed

[Zinou_TM (Gojo)]

i fixed the gif now u can see it

[A3Quil]

I have the Script did you rewrite that script

[MyHeadisMelting]

the gif looks great !
Keep at it in the tuts.

[Tortum (katie)]

This is a good tutorial, thank you!

[Atlas_Detected]

I have made some changes to your system i also recommend you to make clear advice on this system as the position change didn’t work for me.

Correct position on my system is {0, 0},{0.98, 0} and size {0.272, 0},{0.02, 0}

And since i did that i worked perfectly here take the model to see the improvements.

Health Gui - Roblox

[Zinou_TM (Gojo)]

hey btw the size in the tutorial is for the frame inside the the frame u can move it whet ever u want in the screen

[Zinou_TM (Gojo)]

no i just get the script from other guy and edit it and added tween (animation)

[lceyDex (Real_IceyDev)]

Heya! I don’t get it, it’s not working. Is it correct?

Setup:

Is it supposed to be hidden?

Health Gui’s Frame = {0,1,0,1}
Frame’s Frame (aka: the health bar) = {3.6, 0},{1, 0}
Possisions are different

Local Script:

local TW = game:GetService("TweenService")

local Player = game:GetService("Players").LocalPlayer
local Character = Player.Character or Player.CharacterAdded:Wait() --Wait For The Player Humanoid
local Humanoid = Character:WaitForChild("Humanoid")

local Healthbar = script.Parent -- Get The Health Bar

local function UpdateHealthbar()
	local health = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1)
	local info = TweenInfo.new(Humanoid.Health / Humanoid.MaxHealth,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,false,0)
	TW:Create(script.Parent,info,{Size = UDim2.fromScale(health, 1)}):Play()
end

UpdateHealthbar()

Humanoid:GetPropertyChangedSignal("Health"):Connect(UpdateHealthbar)
Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(UpdateHealthbar)

I just don’t get why it isn’t working, I followed all the steps.

[Zinou_TM (Gojo)]

make the first frame in any size or position you want then make the size of the second frame (1,0,1,0)
and the position (0,0,0,0)

[lceyDex (Real_IceyDev)]

I fixed it! I’m sorry to bother you mate! I actually made my own system based off yours, I am going to leave you in the credit section…thanks!

-Signed, lceyDex

[Zinou_TM (Gojo)]

you dont have to put me in credit section its just a tutorial i posted and everyone can use it and you dont have to say sorry

[EqualAxoly (equal)]

What is the size, and posistion of the health bar?

[Nerbzzz (Nikki)]

Hey! I noticed this is more of a beginner healthbar than it is an advanced health bar, Could you consider adding a damage bar effect?

[Zinou_TM (Gojo)]

i can add that i will be great to add like a red effect in the boarders and maybe a healing effect and most of the beginner healthbar do not have animations

[Courageous_Canister (Canister)]

Hi! I’ve noticed you’ve been using tweenservice. If you want to tween GUI size or position, use the :TweenSize(), :TweenPosition() and :TweenSizeAndPosition() functions that are already implemented as functions of the GuiObject class.

For example:

Your current code:

local function UpdateHealthbar() --Health Bar Size Change Function
	local health = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1) --Maths
	local info = TweenInfo.new(Humanoid.Health / Humanoid.MaxHealth,Enum.EasingStyle.Linear,Enum.EasingDirection.InOut,0,false,0) --Tween Info
	TW:Create(script.Parent,info,{Size = UDim2.fromScale(health, 1)}):Play() -- Create The Tween Then Play It
end

Would be reformatted into this:

local function UpdateHealthbar() --Health Bar Size Change Function
	local health = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1) --Maths
	script.Parent:TweenSize(UDim2.fromScale(health, 1), Enum.EasingDirection.InOut, Enum.EasingStyle.Linear, Humanoid.Health / Humanoid.MaxHealth, true)
end

Keep in mind that TweenSize/Position/SizeAndPosition always have EasingDirection first, then EasingStyle, unlike TweenInfo.new()

I also recommend trying out different easing styles like Sine and Quad

Anyways, nice tutorial; keep it up!
Hope this helps!