みかんばこ

プログラミングとかその他有益だと思ったことをメモ.主にUnity

Unityでドット絵を描く(4)~カラーピッカーを作る

今回はお絵描きツールを作るに当たって、塗るための色を自由に選択するUIを作りたいと思います。(カラーピッカーというらしい)
Unityにも付属していてますし、よく利用します。
f:id:mikanbox55:20170820005830p:plain

さすがにここまで作り込むと時間がかかるので、簡単なやつを作ろうと思います。
デザインはこんな感じ。
f:id:mikanbox55:20170820010123p:plain

ヒエラルキは以下の通りです。
f:id:mikanbox55:20170820010213p:plain

右のスライダ,HSideSliderで色相を選択し、 真ん中に表示されるwindowに対してX,YSliderで座標を指定し、指定した色を返します。

Canvasにアタッチしたスクリプトは下の通りです。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;

public class colorPicWindow : MonoBehaviour {

    [SerializeField]private Image pick;
    [SerializeField]private Image slider;
    private Texture2D pickwindow;
    private Texture2D sliderwindow;

    [SerializeField]private Image NowColor;
    [SerializeField]private Image NextColor;

    private float color_h = 0;
    private float color_s = 0;
    private float color_v = 0;

    [SerializeField]private Slider slider_h;
    [SerializeField]private Slider slider_s;
    [SerializeField]private Slider slider_v;


    public delegate void Delefunc(Color value);
    public Delefunc child;

    public Color nowColorVector;

    void Start () {
        NowColor.color = nowColorVector;
        Color.RGBToHSV(nowColorVector,out color_h,out color_s,out color_v);
        slider_h.value = color_h;
        slider_s.value = color_s;
        slider_v.value = color_v;

        pickwindowCreate();
        SliderbackCreate();
    }

    private void pickwindowCreate() {
        int w = 256, h = 256;
        pickwindow = new Texture2D(w, h);
        for (int j = 0; j < h; j++) {
            for (int i = 0; i < w; i++) {
                float s = (float)i / 255f;
                float v = (float)j / 255f;
                pickwindow.SetPixel(i, j, Color.HSVToRGB(color_h, s, v));
            }
        }
        pickwindow.Apply();
        pick.sprite = Sprite.Create(pickwindow, new Rect(0, 0, w, h), Vector2.zero);
    }

    private void SliderbackCreate() {
        sliderwindow = new Texture2D(1, 256);
        for (int j = 0; j < 256; j++) {
            sliderwindow.SetPixel(0, j, Color.HSVToRGB((float)j / 255f, 1f, 1f));
        }
        sliderwindow.Apply();
        slider.sprite = Sprite.Create(sliderwindow, new Rect(0, 0, 1, 256), Vector2.zero);
    }

    public void H_SLiderMove(float vlaue) {
        color_h = vlaue;
        pickwindowCreate();
        setNextColor();
    }

    public void setColor_s(float value) {
        color_s = value;
        setNextColor();
    }
    public void setColor_v(float value) {
        color_v = value;
        setNextColor();
    }

    private void setNextColor(){
        NextColor.color = Color.HSVToRGB(color_h, color_s, color_v);
    }

    public void destroythis(){
        Destroy(this.gameObject);
    }

    public void Okbuttonclick(){
        if (child!=null)child(Color.HSVToRGB(color_h, color_s, color_v));
        Destroy(this.gameObject);
    }

    public static void CreatePrefab(Color nowc,Delefunc func){
        GameObject tmp = Instantiate(Resources.Load("Prefabs/ColorPicCanvas")) as 
        GameObject;
        tmp.GetComponent<colorPicWindow>().nowColorVector = nowc;
        tmp.GetComponent<colorPicWindow>().child = func;
    }
}


おおざっぱに説明すると
[SerializeField]ありのフィールド
:インスペクタでオブジェクトを設定。

pickwindowCreate関数
:色を選ぶためのウィンドウを色相に応じて生成する。空のテクスチャを生成してグラデーションを設定し、対象のImageに新しく設定したSpriteをセット。

SliderbackCreate関数
:pickwindowCreate関数と同様にして、右の彩度を設定するスライダーの背景、backgroundに対してグラデーションを設定する。

Okbuttonclick関数
:OKを押したときに、呼び出し側で登録した関数childを実行し、保存していたHSV値をRGBに変換して返す。

CreatePrefab関数
:staticで設定し、生成する際に外部から呼び出す。

setColor_ 関数
各スライダーのOnvalueChangeから呼び出し、valueの値をhsvとして保存する。

だいたいこんな感じです。

完成するとこんな感じのウィンドウが生成され、OKを押すとRGBを返します。
f:id:mikanbox55:20170820012935p:plain