こんにちわ、オオバです。

UIデザイナーにはおなじみの 加算
Photoshopのモード名でいうと「 スクリーン 」。

Unityでいざ 加算 しようとしても

エンジニア「Unityデフォルト機能ではできないです」

といわれたUIデザイナーの方いませんか。
そう、 Unityのデフォルト機能で加算はできない のです。

ただ安心して下さい。

簡単なシェーダーを書くだけで
加算表現は実装できます。

オオバ
オオバ
本記事では加算シェーダーの作り方を丁寧に解説します!

ぜひともこの記事をUIデザイナーの方に読んでもらい、
その流れでエンジニアの方に勧めてください。

シェーダーを作ってもらって
加算表現をUnityに取り入れていきましょう。

シェーダーを3箇所変更するだけ

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

UI-Default.shader
フラグメントシェーダーに変更を加えます。

  1. 乗算処理を削除
  2. color.rgbにIN.color.rgbを加算
  3. rgb.aに対して、IN.color.aを乗算
fixed4 frag(v2f IN) : SV_Target  
{
    // 変更1. 乗算処理を削除(IN.colorの乗算処理を削除)  
    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);  
    // 変更2. color.rgbにIN.color.rgbを加算  
    color.rgb += IN.color.rgb;  
    // 変更3. color.aにIN.color.aを乗算  
    color.a *= IN.color.a;  
~~~~~~~~  

これで加算シェーダーの完成です。
そんなに難しくないと思います。

とはいえ、シェーダーをあまり書いたことがないと
難易度が高いですよね。

これから詳細を解説していきます。

この記事の内容

色の乗算は色が暗くなる合成処理

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

Unityに実装されているカラー乗算について解説します。

色の乗算をわかりやすく図で説明

白と赤を乗算してみます。

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

RGB
1.01.01.0
1.00.00.0
乗算後1.00.00.0

乗算後の色 (R:1.0, G:1.0, B:1.0)と赤色になります。

色の乗算の特徴は
暗くはなるが、明るくはならない
ということです。

色の加算は色が明るく合成処理

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

加算とは色を足し合わせるため、
乗算とは真逆で明るくなります。

色の加算をわかりやすく図で説明

白と赤を加算してみます。

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

RGB
1.01.01.0
1.00.00.0
加算後1.0(1以上は1)1.01.0

加算後の色 (R:1.0, G:1.0, B:1.0)と白色になります。

👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

加算用シェーダーを作成する

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

Unityには乗算シェーダーしかないため
加算シェーダを新規で作成する必要があります。

シェーダーが怖い人へ、安心して下さい
シェーダーコードの変更は3箇所だけです。

加算シェーダの作成から適用まで4ステップです。

  1. 公式サイトからシェーダーをダウンロード
  2. UI-Default.shaderUI-ColorAdditive.shaderにリネーム
  3. 加算シェーダーに書換え
  4. マテリアルにシェーダーをセット

このような手順で進めていきます。

ステップ1.Unity公式サイトからシェーダーをダウンロード

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

開発環境はMac、Unityエディタ2020.3.19で
加算シェーダを作ります。

Unityダウンロードアーカイブを開きます。
👉 Unityダウンロードアーカイブはコチラをクリック

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

  1. Unity2020.3.19の Downloads(Mac) ボタンをクリック
  2. Built in shadersをクリック

↑の動画の通りこの手順で
シェーダーをダウンロードします。

Mac環境をベースに解説していますが、
お使いのマシンがWindowsなら
Windowsのビルトインシェーダーをダウンロードしましょう。
基本的には同じ操作です。

builtin_shaders-2020.3.19f1.zip
ダウンロードされるので解凍します。

ステップ2. UI-Default.shaderをUI-ColorAdditive.shaderにリネーム

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

解凍するとbuiltin_shaders-2020.3.19f1が現れます。

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

DefaultResourceExtraフォルダ を開きます。

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

UIフォルダの中に UI-Default.shader
目当てのシェーダーです。

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

本記事ではわかりやすくするために
シェーダーファイルをAssets直下に置いてます。
プロジェクトごとの適切な場所に配置 して下さい。

👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

ステップ3. 加算シェーダーに書換え

💻ソースコード : UI-ColorAdditive.shaderのフラグメントシェーダー部分
fixed4 frag(v2f IN) : SV_Target  
{
    // 変更1. 乗算処理を削除(IN.colorの乗算処理を削除)  
    half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);  
    // 変更2. color.rgbにIN.color.rgbを加算  
    color.rgb += IN.color.rgb;  
    // 変更3. color.aにIN.color.aを乗算  
    color.a *= IN.color.a;  
~~~~~~~~  

【注意】新規でuGUI加算シェーダーを書くのは危険

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

今回公式サイトからダウンロードした
ビルトインシェーダーをカスタマイズしています。
これを新規で作成するのはオススメしません。

といったuGUI独自の描画機能があるためです。
それらを実装するのは難易度が高いため
素直にビルトインシェーダーを使いましょう。

uGUIシェーダー全般に言えることです。

↑uGUIのシェーダのカスタマイズでuGUI機能が
動かなくなることがあります。

ステップ4.マテリアルにシェーダーをセット

UnityプロジェクトにUI-ColorAdditiveという名で
マテリアルを作成します。

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

マテリアルにUI-ColorAdditive.shaderをセット。
シェーダーをマテリアルにドラッグアンドドロップ します。

オオバ
オオバ
シェーダーとマテリアル名を一緒にすると分かりやすいです
👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

完成した加算シェーダでUIを作ってみよう

ImageコンポーネントのMaterial
UI-ColorAdditiveマテリアル をセット。

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

設定は完了。

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

ImageコンポーネントのColor
変更してみましょう。

乗算加算
【Unity】UIデザイナー向け!uGUIで色の加算をする方法_16
【Unity】UIデザイナー向け!uGUIで色の加算をする方法_16
オオバ
オオバ
乗算と加算を並べてみると分かりやすいですね

白黒逆転します

乗算と加算シェーダーでは
白と黒の考え方が間逆なので注意が必要です。

まとめ : uGUIで色の加算をする方法

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

記事の内容を簡単にまとめます。

こんな感じです。

uGUIシェーダーを作ること自体は簡単です。

ただし複数のシェーダーを使うことは
新たな問題を引き起こします。

どのUIが乗算で、加算なのかを判別できないことです。
プログラムからカラーを変更することはよくあります。

そのとき乗算加算で白黒逆なため
予期しない描画になるでしょう。

※明るくしたいのに真っ黒になるみたいな

など。工夫が必要だということを
最後に共有して本記事を締めたいと思います。

UI-ColorAdditiveシェーダーは、
変更点も少なく汎用性が高いため、
いろんなプロジェクトで使えます。

オオバ
オオバ
個人プロジェクトで使いまわしてますね

加算シェーダを作ってUIの表現の幅を
広げてもらえればと思います。

サンプルの全ソースはコチラ

GitHubに全ソース公開しています。

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

UI-ColorAdditive.shaderだけコピーすれば大丈夫です。
変更点をコメントアウトで残しているので参考にして下さい。

※Unity2020.3.19f1で作成済み
オオバ
オオバ
GitHub右上のStarを押してもらえるとオオバはうれしいです

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

もしUnity2020.3以外で使用する場合は、
変更箇所を参考にお使いのUnityバージョンの
ビルトインシェーダをカスタマイズした方が安全です。


Unity初心者、UIデザイナー向けの発信をTwitterをやってます!
ぜひフォローしてみてください!
👉フォローはこちら!

YouTubeも始めました!!「Unity初心者大学」
チャンネル登録お願いします!

最後まで読んでいただきありがとうございました!
すばらしいuGUIライフをお過ごしください。

オススメ記事
検証環境