How to add Color3 tweening to this Health Bar UI

Help and Feedback Scripting Support
#1

I made this Health Bar UI, but I want the bar to tween colors as the health decreases.

2020-07-16 (2)
2020-07-16 (2)1344×343 147 KB

I want the bar to fade from green to yellow, from yellow to orange, and from orange to red, similar to how HumanoidHealthBar works.

What would be the simplest way of accomplishing this?

#2

You can use Color3:lerp()

and make sure to tween it with TweenService:Create()

#3

You could use this equation to get the color3 value:

local c = Color3.new((1 - humanoid.Health/humanoid.MaxHealth) * 2.55, (humanoid.Health/humanoid.MaxHealth) * 2.55, 0)

If they have 100 health, R would be 0 and G would be 255

#4

But won’t that just tween it from red to green? Please read my post. I said green to yellow, yellow to orange, and orange to red.

#5

Can you provide an example of what that script would look like?

1 Like
#6

If the player had 50 health, it would be right between green and red, or a shade of yellow
Edit:
You could just have my line of code and set the Color value of the health bar to c whenever the humanoid’s health is changed. I’m not exactly sure that tweening is the right term.

Fade to red depending on the value
#7

Here is a perfect explanation:

#8

2020-07-16 (3)
2020-07-16 (3)1920×1080 40.7 KB

If I did that, the red and green color wouldn’t fade well. Please refer to the example I provide above.

1 Like
#9

I would personally use Color3.fromHSV, that’s what I use for healthbars and it works great.

3 Likes
#10

Good idea. I didn’t think about using Hue. Thanks!

#11

Here’s something I did in one of my games. You don’t have to copy it word for word but it should give you a general idea of what you can do with healthbars.

local bar = script.Parent
local player = game:GetService("Players").LocalPlayer
local humanoid = (player.Character or player.CharacterAdded:Wait()):WaitForChild("Humanoid")
humanoid.HealthChanged:Connect(function()
	local hp = math.clamp(humanoid.Health/humanoid.MaxHealth,0,1)
	game:GetService("TweenService"):Create(
		bar,
		TweenInfo.new(
			0.1,
			Enum.EasingStyle.Quad
		),
		{
			Size = UDim2.new(math.clamp(hp,0,1),0,1,0),
			BackgroundColor3 = Color3.fromHSV(hp/3,1,1),
		}
	):Play()
end)
7 Likes