How To Make Advanced Health Bar

Resources Community Tutorials
,
#15

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

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

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

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