Unity由于要自定义角色皮肤颜色,所以写了个取色板ColorPalette

理论任何环境下可用,包括手机运行时...

效果如下:

ColorPalette.gif

代码如下(只写了一点简单的注释,逻辑也不是很复杂,有空再补吧):

using System;
using UnityEngine;
using UnityEngine.UI;

public class ColorPalette : MonoBehaviour
{
    //C_DragHandler为自己封装的Event事件,可以自己通过IBeginDragHandler, IDragHandler, IEndDragHandler实现是一样的,这里用自己的库就懒得改了
    C_DragHandler drag_SaturationPanel;
    //C_PointerDownAndUpHandler同理,实际上也就是继承IPointerDownHandler, IPointerUpHandler即可
    C_PointerDownAndUpHandler dau_SaturationPanel;
    RectTransform mark_SaturationPos;

    C_DragHandler drag_HuePanell;
    C_PointerDownAndUpHandler dau_HuePanell;
    RectTransform mark_HuePos;

    C_DragHandler drag_TransparentPanel;
    C_PointerDownAndUpHandler dau_TransparentPanel;
    RectTransform mark_TransparentPos;

    Image SaturationPanel;
    Image HuePanel;
    Image TransparentPanel;
    Image CurrentColorPanel;

    RectTransform rect_SaturationPanel;
    RectTransform rect_HuePanel;
    RectTransform rect_TransparentPanel;

    Sprite sprite_Saturation;
    Sprite sprite_Hue;
    Sprite sprite_TransparentPanel;

    public Button Btn_Apply;

    private Color color_Hue = Color.red;

    Color current_color = Color.white;

    public Action<Color> OnColorPaletteSelectedColor;

    public void Awake()
    {
        Btn_Apply = this.transform.Find("Container/Btn_Apply").GetComponent<Button>();

        SaturationPanel = this.transform.Find("Container/SaturationPanel").GetComponent<Image>();
        HuePanel = this.transform.Find("Container/HuePanel").GetComponent<Image>();
        TransparentPanel = this.transform.Find("Container/TransparentPanel").GetComponent<Image>();
        CurrentColorPanel = this.transform.Find("Container/CurrentColorPanel").GetComponent<Image>();

        drag_SaturationPanel = SaturationPanel.GetComponent<C_DragHandler>();
        drag_HuePanell = HuePanel.GetComponent<C_DragHandler>();
        drag_TransparentPanel = TransparentPanel.GetComponent<C_DragHandler>();

        dau_SaturationPanel = SaturationPanel.GetComponent<C_PointerDownAndUpHandler>();
        dau_HuePanell = HuePanel.GetComponent<C_PointerDownAndUpHandler>();
        dau_TransparentPanel = TransparentPanel.GetComponent<C_PointerDownAndUpHandler>();

        rect_SaturationPanel = SaturationPanel.GetComponent<RectTransform>();
        rect_HuePanel = HuePanel.GetComponent<RectTransform>();
        rect_TransparentPanel = TransparentPanel.GetComponent<RectTransform>();

        mark_SaturationPos = rect_SaturationPanel.GetChild(0).GetComponent<RectTransform>();
        mark_HuePos = rect_HuePanel.GetChild(0).GetComponent<RectTransform>();
        mark_TransparentPos = rect_TransparentPanel.GetChild(0).GetComponent<RectTransform>();

        BindingEvent();

        DrawStaurationPanel();
        DrawHuePanel();
        DrawTransparentPanel();
    }

    /// <summary>
    /// 绑定所有的拖拽,点击事件之类的
    /// </summary>
    void BindingEvent()
    {
        //点击确定按钮后就将打开面板前绑定的事件注销
        Btn_Apply.onClick.AddListener(() =>
        {
            this.gameObject.SetActive(false);
            if (OnColorPaletteSelectedColor != null)
            {
                Delegate[] delegates = OnColorPaletteSelectedColor.GetInvocationList();
                for (int i = 0; i < delegates.Length; i++)
                {
                    OnColorPaletteSelectedColor -= delegates[i] as Action<Color>;
                }
            }
        });

        //以下全为3个面板的事件绑定,
        dau_SaturationPanel.Add_PointerDownEvent((data) =>
        {
            mark_SaturationPos.gameObject.SetActive(true);
            mark_SaturationPos.transform.position = data.position;
        });

        drag_SaturationPanel.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_SaturationPanel, data.position))
            {
                mark_SaturationPos.transform.position = data.position;
            }
        });

        dau_SaturationPanel.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_SaturationPanel.rect.width / 2 + mark_SaturationPos.anchoredPosition.x);
            int y = (int)(rect_SaturationPanel.rect.height / 2 + mark_SaturationPos.anchoredPosition.y);
            Color pixelColor = sprite_Saturation.texture.GetPixel(x, y);
            current_color = new Color(pixelColor.r, pixelColor.g, pixelColor.b, current_color.a);
            OnSelectColorChanged();
        });


        dau_HuePanell.Add_PointerDownEvent((data) =>
        {
            mark_HuePos.gameObject.SetActive(true);
            mark_HuePos.transform.position = data.position;
        });

        drag_HuePanell.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_HuePanel, data.position))
            {
                mark_HuePos.transform.position = data.position;
            }
        });

        dau_HuePanell.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_HuePanel.rect.width / 2 + mark_HuePos.anchoredPosition.x);
            int y = (int)(rect_HuePanel.rect.height / 2 + mark_HuePos.anchoredPosition.y);
            color_Hue = sprite_Hue.texture.GetPixel(x, y);

            DrawStaurationPanel();

            int x2 = (int)(rect_SaturationPanel.rect.width / 2 + mark_SaturationPos.anchoredPosition.x);
            int y2 = (int)(rect_SaturationPanel.rect.height / 2 + mark_SaturationPos.anchoredPosition.y);
            Color pixelColor = sprite_Saturation.texture.GetPixel(x2, y2);
            current_color = new Color(pixelColor.r, pixelColor.g, pixelColor.b, current_color.a);
            OnSelectColorChanged();
        });


        dau_TransparentPanel.Add_PointerDownEvent((data) =>
        {
            mark_TransparentPos.gameObject.SetActive(true);
            mark_TransparentPos.transform.position = data.position;
        });

        drag_TransparentPanel.Add_DragEvent((data) =>
        {
            if (RectTransformUtility.RectangleContainsScreenPoint(rect_TransparentPanel, data.position))
            {
                mark_TransparentPos.transform.position = data.position;
            }
        });

        dau_TransparentPanel.Add_PointerUpEvent((data) =>
        {
            int x = (int)(rect_TransparentPanel.rect.width / 2 + mark_TransparentPos.anchoredPosition.x);
            int y = (int)(rect_TransparentPanel.rect.height / 2 + mark_TransparentPos.anchoredPosition.y);
            Color pixelColor = sprite_TransparentPanel.texture.GetPixel(x, y);
            current_color = new Color(current_color.r, current_color.g, current_color.b, pixelColor.a);
            OnSelectColorChanged();
        });
    }

    /// <summary>
    /// 每当面板颜色变化会调用这个方法,外部绑定这个OnColorPaletteSelectedColor委托
    /// </summary>
    void OnSelectColorChanged()
    {
        CurrentColorPanel.color = current_color;
        OnColorPaletteSelectedColor?.Invoke(current_color);
    }

    //绘制透明面板(最下面那个)
    private void DrawTransparentPanel()
    {
        sprite_TransparentPanel = Sprite.Create(new Texture2D((int)rect_TransparentPanel.rect.width, (int)rect_TransparentPanel.rect.height), new Rect(0, 0, rect_TransparentPanel.rect.width, rect_TransparentPanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_TransparentPanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_TransparentPanel.rect.width; i++)
            {
                float uv_x = i / rect_TransparentPanel.rect.width;

                Color pixelColor = Color.white;
                pixelColor.a = uv_x;
                sprite_TransparentPanel.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_TransparentPanel.texture.Apply();
        TransparentPanel.sprite = sprite_TransparentPanel;
    }

    //绘制色调面板(中间那个)
    private void DrawHuePanel()
    {
        sprite_Hue = Sprite.Create(new Texture2D((int)rect_HuePanel.rect.width, (int)rect_HuePanel.rect.height), new Rect(0, 0, rect_HuePanel.rect.width, rect_HuePanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_HuePanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_HuePanel.rect.width; i++)
            {
                float uv_x = i / rect_HuePanel.rect.width;

                Color pixelColor = GetHueColor(uv_x);
                sprite_Hue.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_Hue.texture.Apply();
        HuePanel.sprite = sprite_Hue;
    }

    //绘制饱和度面板(最大的那个面板)
    private void DrawStaurationPanel()
    {
        sprite_Saturation = Sprite.Create(new Texture2D((int)rect_SaturationPanel.rect.width, (int)rect_SaturationPanel.rect.height), new Rect(0, 0, rect_SaturationPanel.rect.width, rect_SaturationPanel.rect.height), Vector2.zero);
        for (int j = 0; j < (int)rect_SaturationPanel.rect.height; j++)
        {
            for (int i = 0; i < (int)rect_SaturationPanel.rect.width; i++)
            {
                float uv_x = i / rect_SaturationPanel.rect.width;
                float uv_y = j / rect_SaturationPanel.rect.height;

                Color pixelColor = GetSaturationPixelColor(color_Hue, uv_x, uv_y);
                sprite_Saturation.texture.SetPixel(i, j, pixelColor);
            }
        }
        sprite_Saturation.texture.Apply();
        SaturationPanel.sprite = sprite_Saturation;
    }

    /// <summary>
    /// 计算面板uv对应的颜色
    /// </summary>
    /// <param name="hue_color">当前选择的hue颜色</param>
    /// <param name="x">这里的x,已经除以了面板的宽度,所以范围是0-1,相当于uv_x</param>
    /// <param name="y">这里的y,已经除以了面板的高度,所以范围是0-1,相当于uv_y</param>
    /// <returns></returns>
    private static Color GetSaturationPixelColor(Color color_Hue, float x, float y)
    {
        Color pixelColor = Color.white;
        pixelColor.r = 1 + (color_Hue.r - 1) * x;
        pixelColor.g = 1 + (color_Hue.g - 1) * x;
        pixelColor.b = 1 + (color_Hue.b - 1) * x;
        pixelColor *= y;
        pixelColor.a = 1;
        return pixelColor;
    }

    /// <summary>
    /// 将颜色分成6块,挨个过渡融合即可
    /// 原本只取了RGB三个块，然后渐变叠加，这样导致最后过渡色取不到，比如黄色取不到，所以要单独加入
    /// </summary>
    public readonly static Color[] colors = new Color[] { Color.red, Color.red + Color.green, Color.green, Color.green + Color.blue, Color.blue, Color.blue + Color.red, Color.red };
    private static Color GetHueColor(float uv_x)
    {
        Color pixelColor = Color.white;
        float uv_x_mut_6 = uv_x * 6;
        int index_floor = Mathf.FloorToInt(uv_x_mut_6);
        int index_ceil = Mathf.CeilToInt(uv_x_mut_6);
        var index_in_block = uv_x_mut_6 - index_floor;
        pixelColor = colors[index_floor] + (colors[index_ceil] - colors[index_floor]) * index_in_block;
        //pixelColor = (colors[index_floor] * (1 - index_in_block)) * (colors[index_ceil] * index_in_block);
        return pixelColor;
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 193,968评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,682评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,254评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,074评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 60,964评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,055评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,484评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,170评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,433评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2赞 308
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1赞 325
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,184评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,545评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2赞 335