How To Make Advanced Health Bar

I have the Script did you rewrite that script

2 Likes

the gif looks great :+1:!
Keep at it in the tuts.

3 Likes

This is a good tutorial, thank you! :grinning_face_with_smiling_eyes:

1 Like

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.

2 Likes

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

3 Likes

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

2 Likes

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

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

2 Likes

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)

3 Likes

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

2 Likes

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

2 Likes

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

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?

1 Like

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

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!

1 Like

thank you, this helped and it will save me a lot of time and also it will make the script a lot cleaner

1 Like

Sorry for bumping. How about making a Health Bar like this? image

There’s like the character outline while being filled up with colors as the current health.

3 Likes
1 Like

Just now I was checking for some health bar UIs in the Toolbox, and found out that the one I picked, had a script executor (I didn’t check it visually but it appeared to be similar to UTG). This serves as a warning for anyone who wishes to do the same.

It’s better off making it on your own.

yea i think u can make it using the UI Transparency

yes true ppl use free models without checking them and this cause in-game problems