環境
- Unity5.4.2f1
uGUIでテクスチャ(画像)を表示させるためには Imageまたは RawImage コンポーネントを使用します。これらのクラスにはテクスチャの色を変更する color プロパティが実装されています。
加算、乗算、除算、減算、覆い焼き、焼き込みなど様々なカラー変更(合成)方法がある中、UnityがuGUIに対してデフォルトで用意しているのは乗算のみです。
UIデザインをしていると、Photoshopの描画モードをUnityで使いたくなります。ただし、何が使えて何が使えないのかを知らないと先いへは進めません。本記事は色の加算合成について説明していきます。
※使えない描画モードは無いと思いますが、デフォルトで揃っているもの、新しい描画モードを開発するときのおおよその工数について知っておいたほうが良いと思います。
そもそもカラーの乗算合成とは
元の色に対して合成する色を、各色毎(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) となり、赤一色のテクスチャが描画されます。
元のカラーが黒色の場合
黒(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) となり、黒一色のままです。
カラー乗算の特徴は、元の色が白に近ければ、反映度が高く、黒に近づけば低くなります。
元の色が黒だったら色を変更することは出来ないということです。
加算合成の実装
冒頭で説明したように世の中には様々なカラー合成方法がありますので、そのどれかを今回実装してみます。
私の経験上、乗算と並んでデザインに登場するのは 加算 です。
それではuGUIの加算シェーダを書いてみます。
本家からビルトインシェーダをダウンロードする
Unity - Download Archiveへアクセス。
使用している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情報が加算されます。
これで加算シェーダの出来上がりです。
全ソースはこちら
あとは先程作成したシェーダをアタッチしたMaterialを作成し、ImageまたはRawImageコンポーネントのMaterialにくっつけてください。
Colorパレットの色を変更すると、先程と違って加算合成されているかと思います。
 |
 |
|---|---|
| 乗算合成 | 加算合成 |
まとめ
ご覧の通り加算シェーダ自体は簡単です。乗算、加算以外にもいろんな色の重ね方があるため、別の合成shaderを書いてこのブログで紹介していこうと思います。
大事なことを1つだけ
Photoshopの描画モードの乗算や加算は単純な描画処理ではない(と思われる)です。なぜならUnityで単純計算させたものよりPhotoshop上での成果物の方が断然美しいからです。
デザイナーの方々へ、「Photoshopの乗算と全く同じでお願いします」という依頼は厳しいかもしれません。近しいところまで作れても完璧に色を合わせることは厳しいと思います。
しかしプロダクトを度外視し、研究として全く同じシェーダを探求して書いてみるっていうのは、それはそれで面白そうです。