How To Make Advanced Health Bar

Resources Community Tutorials
,
#18

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?

2 Likes
#19

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

#20

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
Problem with health gui
#21

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

2 Likes
#22

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
#23
1 Like
#24

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.

#25

yea i think u can make it using the UI Transparency

#26

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

#27

How do I make this scale left to right instead of right to left

#28

Also to people who are wondering why this isn’t working, the “background” of the Healthbar you are using must be parented to the “background” your Healthbar is using

#29

i think u need to change the anchor point to (1,1)

#30

Great tutorial, simple and easy to follow. :+1: :+1:

Here’s how it looks

2 Likes
#31

thank you for the support <3 mate

#32

a question. how did you get the health bar numbers?

#33

image

Create a text label inside the HealthBar frame.

image
image

Set the text label properties.

After that, go to the local script and paste this line inside the UpdateHealthbar() function.

HealthLabel.Text	=	math.floor(Humanoid.Health).. '/' ..Humanoid.MaxHealth
1 Like
#36

Works, though I had to make some modifications since some variables in the scripts were unused (and you made the tweenservice time as humanoid/health/humanoid.maxhealth for some reason. Overall a decent health bar but I wouldn’t call it advanced.

1 Like
#37

ye I agree with you I made this quite a long time ago I will probably release another one with better scripts

1 Like
#38

Just sharing this script if anyone want a modified version where the screengui doesn’t have to require the resetonspawn property.

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

local Player = game:GetService("Players").LocalPlayer --Get The Player
local Healthbar = script.Parent -- Get The Health Bar

local function UpdateHealthbar(Humanoid) --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
local healthSignal
local healthSignalMax

local function updatePlrConnections(Char)
	print(Char)
	if healthSignal then
		healthSignal:Disconnect()
		healthSignal = nil
	end
	if healthSignalMax then
		healthSignalMax:Disconnect()
		healthSignalMax = nil
	end
	local Humanoid = Char:WaitForChild("Humanoid") --Get The Player Humanoid
	healthSignal = Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
		UpdateHealthbar(Humanoid)
	end)
	healthSignalMax = Humanoid:GetPropertyChangedSignal("MaxHealth"):Connect(function()
		UpdateHealthbar(Humanoid)
	end)
end
--load manualy first
local Character = Player.Character or Player.CharacterAdded:Wait()
updatePlrConnections(Character)
--load auto after
Player.CharacterAdded:Connect(function(Char)
	updatePlrConnections(Char)
end)
2 Likes
#39

Hi, are releasing another one?

Will there be a new post ?