How do I go about making this a health bar

I’m trying to make the red bar in the GUI work as a health bar, but I can’t figure it out. The problem is that the GUI bar doesn’t scale properly and goes all over the screen, and the slight tilt at the end doesn’t help either.

I looked up solutions for this, but none tackle the same issue I’m facing.

Here’s the GUI:
image
“healthbar” is the red part that I want to script
image

Maybe it has something to do with it being an ImageLabel?

I’ve tried copying the following script but it just scales randomly whenever a change occurs to my health.

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

copied it from How To Make Advanced Health Bar

1 Like