uGUIで2色補完する(黒を○色、白を○色にする)

f:id:wkpn:20170609133118p:plain

こういう3種類の絵を出したい時に、色違いのテクスチャーを用意するのってめんどくさいですよね？

見た目の色違いだけなのに、テクスチャに色を乗算するだけではどうにもならないし...　けどなんとか、左端の白黒のテクスチャ1枚で済ませたい。

黒色の部分を○○色に、白色の部分を○○色に...っと指定できたら良いのになぁ... っとは全人類が思うところです。

ということで自作。

って言っても大したことはしていません。

シェーダーの用意

まず、Shaderを用意します。Unityのビルトインシェーダーを元に作っていくので、まずは以下からダウンロード。

Unity - Update

f:id:wkpn:20170609133629p:plain

シェーダーをダウンロードしたら、中にあるUI-Default.shader（builtin_shaders-***\DefaultResourcesExtra\UI\UI-Default.shader）をUnityのプロジェクトにインポートします。

シェーダーのカスタマイズ

1. UI-DefaultをリネームしてUI-Complement2っていう名前にします。

2. Shader内の頭の部分を以下の用に修正します。

Shader "UI/Default"

↓

Shader "UI/Complement2"

3. プロパティ部分(Properties{}の中)に以下を追加します。

_ComplementColor0 ("Complement Color 0", Color) = (0,0,0,0)
_ComplementColor1 ("Complement Color 1", Color) = (1,1,1,1)

4. CGPROGRAM〜ENDCGの間のどこかテキトーな場所に以下を追加します。

fixed4 _ComplementColor0;
fixed4 _ComplementColor1;

5. カラー計算部分を以下のように修正します。

half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

↓

half4 tex_color = tex2D(_MainTex, IN.texcoord);
half4 color;
color.rgb = lerp( _ComplementColor0, _ComplementColor1, tex_color.r ) * IN.color.rgb;
color.a = tex_color.a;

_TextureSampleAddは、Alpha8モードのときに必要らしいけど、Alpha8モードは想定していないので、除外します。

マテリアルを作って設定する

Shaderを右クリックしてCreate -> Materialとすると、そのシェーダーを使ったマテリアルができます。

インスタンスごとに色を変える

上記のマテリアルをImageに割り当てるととりあえず動くのですが、全インスタンスでマテリアルが共有されちゃうので同じ色になっちゃいます。

なので、こんなスクリプトを書いてコンポーネントとして追加します。

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

public class ComplementTestObj : MonoBehaviour {
    [SerializeField]
    Image image;

    [SerializeField]
    Material matPrehab;

    [SerializeField]
    Color color0 = Color.black;

    [SerializeField]
    Color color1 = Color.white;

	void Start () {
        var mat = Instantiate( matPrehab );
	mat.SetColor("_ComplementColor0", color0);
	mat.SetColor("_ComplementColor1", color1);
        image.material = mat;
    }
}

あとは、以下のようにImage、Material、Color0、Color1を指定すればOK。

f:id:wkpn:20170609135352p:plain