初めに
本記事では、Texture をグレースケールにするための Shader を Shader Graph で作ります。その中で、Add ノード、Multiple ノードなどから、色の加算、乗算についても触れます。
Index
イメージ
作り方
手順
- Sprite Unlit Shader Graph を作成
- Blackboard に Texture2D を追加し、名前を MainTex に変更
- MainTex ノード、Sample Texture2D ノード、Add ノード、Multiple ノードを画像のように追加し、ネットワークを繋ぐ
- Multiple ノードの数値を R=0.2126、G=0.7152、B=0.0722 に変更
- Save Asset をクリックして保存
Shader Graph 完成図
Shader Graph の解説
Add ノード
Add ノードは、入力Aと入力Bを加算した結果を返します。
色の加算は次のように算出されます。
R,G,Bそれぞれの値を以下の式で計算を行います。
結果色 = 基本色 + 合成色
ただし、値が255以上になった場合は 255 にする。
結果色の値は、必ず基本色より大きくなるため、加算を行うと色が明るくなります。
Multiple ノード
Multiple ノードは、入力Aと入力Bを乗算した結果を返します。
色の乗算は次のように算出されます。
R,G,Bそれぞれの値を以下の式で計算を行います。
結果色 = 基本色 * (合成色 / 255)
結果色は必ず基本色より小さくなるため、乗算を行うと色が暗くなっていきます。
R=0.2126、G=0.7152、B=0.0722 の意味
グレースケールをするときの乗算の仕方はいろいろな方法があります。本記事は、こちらを参考にしました。
使い方
Material の割り当て
Material を作成し、先ほど作成した Shader を割り当てます。
グレースケールしたい Sprite の Material を変更します。
課題
ドット絵でやると次の画像のように透明な部分にも色がついたりします。頂点と頂点を結ぶように Shader が演算しているためだと思われます。解決方法が見つかり次第、記事にします。
