How To Make Advanced Health Bar

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

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

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

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

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

Here’s how it looks

2 Likes

thank you for the support <3 mate

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

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

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

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

1 Like