こんにちわ、Unityエンジニアのオオバです。

uGUIでテクスチャ(画像)を表示させるためには、
Imageまたは RawImage コンポーネントを使用します。

これらのクラスにはテクスチャの色を変更する color プロパティが実装されています。

など、さまざまなカラー合成方法がある中、
UnityがuGUIに対してデフォルトで用意しているのは乗算のみです。

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

📝 目次

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

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_39

元の色に対して合成する色を、各色毎(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) となり、赤一色のテクスチャが描画されます。

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_55

元のカラーが黒色の場合

黒(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) となり、黒一色のままです。

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_64

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

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

加算合成の実装

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

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

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

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

Unity - Download Archive

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_86

使用している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情報が加算されます。

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

全ソースはこちら

UI-Default5_4_2f1.shader · GitHub

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

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_128

Colorパレットの色を変更すると、先程と違って加算合成されているかと思います。

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_132【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法_132
乗算合成加算合成

まとめ

ご覧の通り加算シェーダー自体は簡単です。乗算、加算以外にもいろんな色の重ね方があるため、別の合成shaderを書いてこのブログで紹介していこうと思います。

大事なことを1つだけ

Photoshopの描画モードの乗算や加算は単純な描画処理ではない(と思われる)です。なぜならUnityで単純計算させたものよりPhotoshop上での成果物の方が断然美しいからです。

デザイナーの方々へ、「Photoshopの乗算と全く同じでお願いします」という依頼は厳しいかもしれません。近しいところまで作れても完璧に色を合わせることは厳しいと思います。

しかしプロダクトを度外視し、研究として全く同じシェーダーを探求して書いてみるっていうのは、それはそれで面白そうです。

👉 オススメ記事

2021秋 Asset Refreshセール
100以上のアセットがなんと50%OFF!!オオバもいくつか買いました!
期間 : 10月2日午後3時59分まで

👩‍💻 検証環境