How to use tween to make a vertical health bar

I am unsure how to make the tween work properly to make it move downwards when health is lost. I’m trying to replicate the classic healthbar from 2008 era.
image

Here is the script I have thus far.

local player = game.Players.LocalPlayer
local character = player.Character
local Humanoid = character:WaitForChild("Humanoid")

Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
	script.Parent.Bar:TweenSize(UDim2.new(Humanoid.Health / 100,0,1,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0, true)
end)
local player = game.Players.LocalPlayer
local character = player.Character
local Humanoid = character:WaitForChild("Humanoid")

Humanoid:GetPropertyChangedSignal("Health"):Connect(function()
	script.Parent.Bar:TweenSize(UDim2.new(1,0,Humanoid.Health / 100,0), Enum.EasingDirection.InOut, Enum.EasingStyle.Sine, 0, true)
end)
2 Likes

you can use :TweenSize(UDim2.fromScale(1, Humanoid.Health / Humanoid.MaxHealth), Enum.EasingDirection.Out, Enum.EasingStyle.Linear, 0.25, true)

local player = game.Players.LocalPlayer
local character = player.Character or player.CharacterAdded:Wait()
local Humanoid = character:WaitForChild("Humanoid")
local tweenService = game:GetService("TweenService")
local bar = script.Parent.Bar

local tweenTime = 0 --0 is instant, no animation
local tween = TweenInfo.new(math.max(0, tweenTime), Enum.EasingStyle.Sine, Enum.EasingDirection.InOut) --adjust as needed

bar.AnchorPoint = UDim.new(0.5, 1) --sets up the bar so it doesn't scale from both ends
bar.Position = UDim2.fromScale(0.5, -1)

Humanoid.HealthChanged:Connect(function() --the tween
    game:GetService("TweenService"):Create(bar, tween, {Size = UDim2.fromScale(1, Humanoid.Health/Humanoid.MaxHealth)}):Play()
end)

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.