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

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

效果如下:

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

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;
    }
}