f:id:esakun:20150730215258g:plain:w450

環境

Unity5.4.2f1

uGUIでテクスチャ(画像)を表示させるためには Imageまたは RawImage コンポーネントを使用します。これらのクラスにはテクスチャの色を変更する color プロパティが実装されています。

加算、乗算、除算、減算、覆い焼き、焼き込みなど様々なカラー変更(合成)方法がある中、UnityがuGUIに対してデフォルトで用意しているのは乗算のみです。

UIデザインをしていると、Photoshopの描画モードをUnityで使いたくなります。ただし、何が使えて何が使えないのかを知らないと先いへは進めません。本記事は色の加算合成について説明していきます。

※使えない描画モードは無いと思いますが、デフォルトで揃っているもの、新しい描画モードを開発するときのおおよその工数について知っておいたほうが良いと思います。

そもそもカラーの乗算合成とは

f:id:esakun:20161025020410p:plain

元の色に対して合成する色を、各色毎(RGBそれぞれ)で掛け算します。

元のカラーが白色の場合

UnityにはColor型の構造体が定義されており、各色(0〜1)の値を取ります。

白を表現するためには、(R : 1, G : 1, B : 1)となります。そこで乗算する色を赤(R : 1, G : 0, B : 0)に設定してみます。

お互いの数値を掛けた数が結果の色となります。

(R : 1☓1, G : 1☓0, B : 1☓0) = (R : 1, G : 0, B : 0) となり、赤一色のテクスチャが描画されます。

f:id:esakun:20161025020623p:plain

元のカラーが黒色の場合

黒(R : 0, G : 0, B : 0) に先程と同じように赤(R : 1, G : 0, B : 0)を乗算してみます。

(R : 0☓1, G : 0☓0, B : 0☓0) = (R : 0, G : 0, B : 0) となり、黒一色のままです。

f:id:esakun:20161025020800p:plain

カラー乗算の特徴は、元の色が白に近ければ、反映度が高く、黒に近づけば低くなります。

元の色が黒だったら色を変更することは出来ないということです。

加算合成の実装

冒頭で説明したように世の中には様々なカラー合成方法がありますので、そのどれかを今回実装してみます。

私の経験上、乗算と並んでデザインに登場するのは 加算 です。

それではuGUIの加算シェーダを書いてみます。

本家からビルトインシェーダをダウンロードする

Unity - Download Archiveへアクセス。

f:id:esakun:20161014000001p:plain
使用しているUnityバージョンとOSを選んでプルダウンから ビルトインシェーダ を選択してダウンロードしだくてください。

uGUIのシェーダを変更する場合は、uGUIで使用されているシェーダをカスタマイズしたほうが良いです。

理由としては、独自で書いてしまうと、uGUIが元々実装している機能が使えなくなる場合があります(マスク等)。

UI-Default.shader の中身をまるまるコピーして、新規シェーダを作成します。

変更するのは1箇所

フラグメントシェーダのcolor.rgbに対し、IN.color.rgbを加算し、rgb.aに対して、IN.color.aを乗算します。

fixed4 frag(v2f IN) : SV_Target
{
    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
    color.rgb += IN.color.rgb;
    color.a *= IN.color.a;
    color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);

    #ifdef UNITY_UI_ALPHACLIP
    clip (color.a - 0.001);
    #endif

    return color;
}

このように処理することで、uGUIのcolorプロパティ(IN.colorで渡される値)のrgb情報が加算されます。

これで加算シェーダの出来上がりです。

全ソースはこちら

gist.github.com

あとは先程作成したシェーダをアタッチしたMaterialを作成し、ImageまたはRawImageコンポーネントのMaterialにくっつけてください。

f:id:esakun:20161025023502g:plain