unity使用ugui自制调色面板

突然想实现一个调色面板,然后开工...

首先找找有没有什么接口可调,木有找到,找到一些调用win32实现的本地颜色面板的调用,感觉不科学,反正多平台肯定是搞不定的。

既然没找到,还是老老实实的自己写吧,看看Texture2D的相关函数,可以绘制像素,这样就行了,基本搞定,http://docs.unity3d.com/ScriptReference/Texture2D.html

下面来说说,具体步骤:

1.创建一个颜色面板的脚本,初始化一些相关属性,Texture2D,RawImage,颜色数组等

    Texture2D tex2d;
    public RawImage ri;

    int TexPixelLength = 256;
    Color[,] arrayColor;
	// Use this for initialization
	void Start () {
        arrayColor = new Color[TexPixelLength, TexPixelLength];
        tex2d = new Texture2D(TexPixelLength, TexPixelLength, TextureFormat.RGB24,true);
        ri.texture = tex2d;
    }

2.开始计算像素的颜色,这里有一点定义需要先自己去观察一下,我看了一下ps和unity自身的调色面板,他们都是地下为黑色,左上为白色,右上为自定义颜色,我这里称他为endColor。知道四个角落的颜色后就开始计算中间像素的颜色,规律嘛,看代码或者自己看ps的调色板也能找出来。因为Texture2D建议用数组绘制像素,我就没有一个个去绘制,先把颜色装数组里吧

      Color[] CalcArrayColor(Color endColor)
    {
        Color value = (endColor - Color.white) / (TexPixelLength - 1);
        for (int i = 0; i < TexPixelLength; i++)
        {
            arrayColor[i, TexPixelLength - 1] = Color.white + value * i;
        }
        for (int i = 0; i < TexPixelLength; i++)
        {
            value = (arrayColor[i, TexPixelLength - 1] - Color.black) / (TexPixelLength - 1);
            for (int j = 0; j < TexPixelLength; j++)
            {
                arrayColor[i, j] = Color.black + value * j;
            }
        }
        List<Color> listColor = new List<Color>();
        for (int i = 0; i < TexPixelLength; i++)
        {
            for (int j = 0; j < TexPixelLength; j++)
            {
                listColor.Add(arrayColor[j, i]);
            }
        }
        
        return listColor.ToArray();
    }
3.获取到颜色数组后,就可以将他绘制tex2d上,然后显示在RawImage上,看一下绘制函数

    public void SetColorPanel(Color endColor)
    {
        Color[] CalcArray = CalcArrayColor(endColor);
        tex2d.SetPixels(CalcArray);
        tex2d.Apply();
    }

4.在获取到相关数据后,然后可以在调用一下SetColorPanel设置为endColor设置一个颜色,比如我这里初始化为红色,感觉跟ps里的一样呢

5.除了红色我们肯定还需要调用其他颜色,于是就需要右边的颜色作为endColor的值,右边的值呢,就是RGB三原色,其他颜色也是他们的混合出来的,然后选择一个endColor左边的颜色面板就会更新新的颜色,大概看一下计算代码,其他显示都类似

    Color[] CalcArrayColor()
    {
        int addValue = (TexPixelHeight - 1) / 3;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            arrayColor[i, 0] = Color.red;
            arrayColor[i, addValue] = Color.green;
            arrayColor[i, addValue+addValue] = Color.blue;
            arrayColor[i, TexPixelHeight - 1] = Color.red;
        }
        Color value = (Color.green - Color.red)/addValue;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = 0; j < addValue; j++)
            {
                arrayColor[i, j] = Color.red + value * j;
            }
        }
        value = (Color.blue - Color.green)/ addValue;
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = addValue; j < addValue*2; j++)
            {
                arrayColor[i, j] = Color.green + value * (j-addValue);
            }
        }

        value = (Color.red - Color.blue) / ((TexPixelHeight - 1)-addValue-addValue);
        for (int i = 0; i < TexPixelWdith; i++)
        {
            for (int j = addValue*2; j < TexPixelHeight - 1; j++)
            {
                arrayColor[i, j] = Color.blue + value * (j- addValue * 2);
            }
        }

        List<Color> listColor = new List<Color>();
        for (int i = 0; i < TexPixelHeight; i++)
        {
            for (int j = 0; j < TexPixelWdith; j++)
            {
                listColor.Add(arrayColor[j, i]);
            }
        }

        return listColor.ToArray();
    }
6.然后写一个Manager类,来管理一下相关的操作。

哎呀,略懒,写了基本思路就够了,代码都写得很粗糙,也没有去优化操作之类的东西。有兴趣,加一个alpha值,照着unity的调色面板做一个出来,也应该够用了。



工程:https://github.com/coding2233/UnityColor

原文地址:https://www.cnblogs.com/liang123/p/6325862.html