How do you make a color changing health bar (formula to use)?
Hello!
I have been digging my head for a while now, trying to find the formula to change the color of a health bar depending of the humanoid's health.
I want to change the Color3 depending of the health.
Let me show you what I've done so far :
Let's say the variable hp is the Health, and mh is the MaxHealth.
First, I'm working on the first half (100% to 50% health), changing the color from green to yellow.
local hp = script.Parent.Humanoid.Health
local mh = script.Parent.Humanoid.MaxHealth
local bar = script.Parent.BillboardGUI.ImageLabel.Frame
while wait(0.2) do
if hp > mh/2 then
bar.BackgroundColor3 = Color3.new(hp/(mh/2),1,0)
end
end
The issue with this is, when the health bar is full, the color is greenish-yellow, kind of like goo. What I'm striving for is a "healthy" green color. I tried to fix this by adding a -0.5,
bar.BackgroundColor3 = Color3.new(hp/(mh/2)-0.5,1,0)
But then, when it reaches half, it gets to the goo color and not the "New Yeller" color. To recap, my question is : What is the formula I should use to change the color smoothly from 100% to 50%?
Oh, and if you have the time and patience, please, can you do the same for yellow to red? I tried my (awful) formula by inverting all numbers (positive to negative) but then it goes to red and yellow. I'm awfully confused, please help! Thanks. **
2 answers
Here's something I worked on a while back for a health/thirst bar for a survival game. This is a lot simpler than some of the color formulas I've made before and this one doesn't need sign changes for increases/decreases in RGB.
EDIT: This function is similar to :Lerp() if you've ever used that before.
Here's what I have:
function TransitionColor(FirstColor, SecondColor, TransPercent)
local HighRed = math.max(FirstColor.r, SecondColor.r)
local HighGreen = math.max(FirstColor.g, SecondColor.g)
local HighBlue = math.max(FirstColor.b, SecondColor.b)
local LowRed = math.min(FirstColor.r, SecondColor.r)
local LowGreen = math.min(FirstColor.g, SecondColor.g)
local LowBlue = math.min(FirstColor.b, SecondColor.b)
local CalculatedColor = Color3.new(LowRed + ((HighRed - LowRed) * TransPercent), LowGreen + ((HighGreen - LowGreen) * TransPercent), LowBlue + ((HighBlue - LowBlue) * TransPercent))
return CalculatedColor
end
EDIT: This format is easier to read for the color3 calculation :p
local CalculatedColor = Color3.new(
LowRed + ((HighRed - LowRed) * TransPercent),
LowGreen + ((HighGreen - LowGreen) * TransPercent),
LowBlue + ((HighBlue - LowBlue) * TransPercent))
Hey not sure if this helps but if you look up rgb color picker on google you can see the progression of the color from green to red. For example I started out with rgb(30,160,30) and as I approached red r increased until it was equal to 160(The green value), after that the green actually decreased until it was 30. So it went from rgb(30,160,30) to rgb(160,160,30) to finally rgb(160,30,30). So obviously it goes like this red rises to be equal to green, green lowers to be equal to the original red value. So now you have to realize that 160-30 = 130 and 130*2 = 260. Then you just do 260/100 which is 2.6 so now you know each point of hp is worth 2.6. So start out with increasing red by 2.6 for each hp point until the player reaches below 50. After the player reaches below 50 start subtracting 2.6 from green!