Color changing health bar?

Help and Feedback Scripting Support
#1

How would I go about having a healthbar tweening color between two set colors? E.g. when on 100 hp color1, and on 0 hp color2?

6 Likes
#2

You can do this by using TweenService!

This is a list of everything that TweenService can tween:

  • number
  • bool
  • CFrame
  • Rect
  • Color3
  • UDim
  • UDim2
  • Vector2
  • Vector2int16
  • Vector3

The code is pretty simple. You’re able to edit how the tween acts by changing the properties of Info.

local TweenService = game:GetService("TweenService")
local Goal = {Color = Color3.fromRGB(255, 255, 255}

local Info= TweenInfo.new(
    2, --  The time it takes to tween
    Enum.EasingStyle.Linear, -- EasingStyle
    Enum.EasingDirection.Out, -- EasingDirection
    0, -- How many times it repeats, if less than 0 then it'll loop
    false, --  If it reverses or not
    0 -- The time it waits between each tween
)

TweenService:Create(UI, Info, Goal):Play()
3 Likes
#3

My fault, I want to get an exact color3 without using tweenservice so I can set it. It isn’t technically for a health bar its for the health of my blocks in my game which will be displayed with their color.

I basically need an exact color3 from a health / maxhealth, where I can set the two colors with color1 being full health and color2 being dead.

#4

Could you explain this a bit differently? I’m finding it confusing for some reason.

#5

I don’t understand your question, it doesn’t make sense.

#6

Color3 has a useful little method called lerp that lets you calculate the linear interpolation between two colors based on an alpha (or percentage). If you’re looking for a different easing style and you absolutely need to know the value and set it, you’ll have to find a pure-lua implementation of that easing style and write your own interpolator.

Here’s an example of using the lerp method:

local color1 = Color3.fromRGB(123, 45, 67);
local color2 = Color3.fromRGB(98, 76, 54);

local newColor = color1:lerp(color2, alpha);
-- where alpha is the % between the two, e.g. 0.5 for 50%
-- this can be health/maxHealth

Edit: Also note that you can use TweenService to smoothly interpolate between the old and new color.

12 Likes
How to add Color3 tweening to this Health Bar UI
#7

Thanks, and sorry for making it sound so confusing :smile:

1 Like