With the introduction of the UIGradient object, we can now create efficient UI gradients.
I’ve seen some cool color pickers on here, but most have a few drawbacks.
So I thought: Why not make a nice, open sourced, easy to use color picker?
Many of them don’t allow the user to select a gradient, only a solid color. Some of the more advanced color-picker methods use a pre-generated decal and calculate the color by looking at the mouse’s relative X and Y cords. While this is clever, it’s not super easy to do this with anything other than a rainbow. (The one I remember also required you to credit the author.) No one wants to bother with generating their own decal either. (unless you’re trying to learn, in which case I’d recommend using JavaScript)
Enter UiGradient Color Picker!
An easy and efficient way to add a color picker into your project.
Any gradients you want, all the colors you want, none of the complexity you don’t want.
Here are 6 different examples of some things you can achieve:
To edit the gradient, you simply edit the UiGradient’s color sequence.
It even works on mobile!
You can use this for anything from skin-color selection, to hair color, to eye colors, to building colors.
The sky’s the limit.
(Personally, I will be using this for the character creator in my game Whisperbit)
It works by using this "getColor" function I wrote.
function getColor(percentage, ColorKeyPoints)
if (percentage < 0) or (percentage>1) then
--error'getColor percentage out of bounds!'
warn'getColor got out of bounds percentage (less than 0 or greater than 1'
end
local closestToLeft = ColorKeyPoints[1]
local closestToRight = ColorKeyPoints[#ColorKeyPoints]
local LocalPercentage = .5
local color = closestToLeft.Value
-- This loop can probably be improved by doing something like a Binary search instead
-- This should work fine though
for i=1,#ColorKeyPoints-1 do
if (ColorKeyPoints[i].Time <= percentage) and (ColorKeyPoints[i+1].Time >= percentage) then
closestToLeft = ColorKeyPoints[i]
closestToRight = ColorKeyPoints[i+1]
LocalPercentage = (percentage-closestToLeft.Time)/(closestToRight.Time-closestToLeft.Time)
color = closestToLeft.Value:lerp(closestToRight.Value,LocalPercentage)
return color
end
end
warn('Color not found!')
return color
end
You feed it a percentage (a decimal between 0 and 1), then a list of ColorKeyPoints (UiGradient.Color.Keypoints), and it returns the expected color gradient in-between any given colors.
(I used it to create this Color Picker, but you can use it for other things too, like easy visual-color lerping)
Get it here:
Feel free to credit me if you want to be nice, but you don’t have to.
Cool forks and related stuff:
