koobas.hobune.stream
RGB UI Color Slider
Hey, guys!
So I am just doing some research on creating a color slider, something like this: 
People would just slide the button to the color they want and then the color would preview the selected color.
I hoped if someone could steer me in the right direction of creating something like this because I cannot find anything useful on Google...
Thanks anyway!
You could use a UI Slider with :
the image of your Hue bar as a background
A min value of 0, a max value of 1
A listener to the onValueChanged event setting the color of your handle as follow (code not tested)
// Drag & drop slider public UnityEngine.UI.Slider slider ; // Drag & drop handle public UnityEngine.UI.Image handle ; public void Start() { mySlider.onValueChanged.AddListener(delegate {ValueChangeCheck(); }); } // Invoked when the value of the slider changes. public void ValueChangeCheck() { handle.color = Color.HSVToRGB(mySlider.value, 1, 1); }
That texture should be easy to create procedurally. Actually a 4x1 texture should be enough. Just use the 4 colors: red, green, blue, red:
var hueTex = new Texture2D(4,1);
hueTex.SetColors(new Color[]{Color.red, color.green, Color.blue, Color.red});
hueTex.Apply();
Those colours do not create the gradient that OP has. Use
hueTex.SetPixels(new Color[] { Color.red, Color.yellow, Color.green, Color.cyan, Color.blue, Color.magenta, Color.red });
Color[] colors = new Color[]
{
new Color(1, 0, 0),
new Color(1, 1, 0),
new Color(0, 1, 0),
new Color(0, 1, 1),
new Color(0, 0, 1),
new Color(1, 0, 1),
new Color(1, 0, 0)
} ;
var hueTex = new Texture2D(colors.Length,1);
hueTex.SetPixels( colors );
hueTex.Apply();
hueImage.sprite = Sprite.Create( hueTex, new Rect( Vector2.zero, new Vector2( colors.Length, 1 ) ), Vector2.one * 0.5f );
you can display your picture of the slider with a UI. then use texture2d.getpixel from your calculated mouse position to get your color!!!! here is a quick example:
// drag your picture of the slider into the next variable
// the import settings of your image must be set for read/write enabled
// under import settings of the image in the inspector select advanced
// then tick read/write enabled
public Texture2D myslider;
public Texture2D picked ;
public int x = 20;
public int y = 20;
public int h = 50;
public int w = 400;
public Color select = Color.black;
void Start(){
picked = new Texture2D(1,1);
}
void Update(){
if (Input.GetMouseButton(0)) {
float MX = Input.mousePosition.x;
float MY = Screen.height - Input.mousePosition.y;
if(MX>x&&MX<x+w){
if(MY>y&&MY<y+h){
float ratiox = (float)myslider.width/(float)w;
float ratioy = (float)myslider.height/(float)h;
int getx = Mathf.FloorToInt((MX-x)*ratiox);
int gety = Mathf.FloorToInt((MY-y)*ratioy);
gety = myslider.height-gety;
select = myslider.GetPixel(getx,gety);
picked.SetPixel(0,0,select);
picked.Apply();}}}}
void OnGUI(){
GUI.DrawTexture (new Rect (x, y, w, h), myslider);
GUI.DrawTexture (new Rect (200,200,50,50), picked);
}
