I’m trying to make a bar get darker as the value gets higher, but I lack all of the knowledge to do so. I’ve found some community resources like this one:
One of the most common questions that I get from friends or people in my communication servers is, “How do you make a health bar that changes its color to represent a value?.” Anyways, I will be writing this short tutorial so I can help future people who ask, and anyone who was wondering in general.
Map Function
Some of you that use javascript and many other programming languages may have used this built-in function before, but what does it do? The map function takes two ranges and returns a n…
This works perfectly but its the opposite of what I want to do. It gets redder as the value gets lower, as intended. But how do I achieve the opposite of this effect?
My current code:
StructureBar.BackgroundColor3 = Color3.fromHSV((Structure/MaxStructure)*0.1344, 0.9328, 0.9333)
That makes it go from this color
I’d like it to go from yellow when it’s lower in value, to the red when it’s higher in value.
Yellow HSV = 0.1344, 0.9328, 0.9333238, 195, 16
Red HSV = 0.0155, 1, 0.9294237, 22, 0
Just perform the opposite operation on the other two, subtraction instead of multiplication, so it reduces instead of growing.
StructureBar.BackgroundColor3 = Color3.fromHSV((Structure/MaxStructure)*0.1344,
0.9328*(MaxStructure - Structure),
0.9333*(MaxStructure - Structure)
2 Likes
That’s what I thought too, but it just turns the bar into a strobe light with a bunch of colors
Roblox accually has an API for this in the DevHub docs . Use the Color3:lerp() function.
In your case it would look like
local yellowColor = Color3.fromHSV(0.1344, 0.9328, 0.9333)
local redColor = Color3.fromHSV(0.0155, 1, 0.9294)
StructureBar.BackgroundColor3 = yellowColor:lerp(redColor, (Structure / MaxStructure))
(I’m assuming Structure is the length of the bar and MaxStructure is the max length of the bar)
2 Likes
You can lerp colours.
For example, you can simply lerp the colour depening on the X Scale value
Edit: @scotch101tape already has said this
1 Like
You assumed right! Thank you, I guess I didn’t do enough searching.
1 Like
