2025/11/26 Unity Shader Graph で uGUI のグラデーション
from 2025/11/23 Unity uGUI で遊ぶ
Unity uGUI で特定領域をグラデーションさせたい
UI における Shader
ふつうに Fragment Shader を書くこともできる
https://shibuya24.info/entry/unity-ui-additive
デフォルトの Shader のソースコードをダウンロードして、改変していくという流れみたい
2023.2 からは Shader Graph で UI 用のシェーダ―を定義できるようになった
手で書くよりはこちらのほうが手順が簡単で良さそう
https://www.youtube.com/watch?v=PV195gBqxKA
グラデーションの実装
UV 座標をもとに左上からグラデーションをかけてみた。
https://scrapbox.io/files/6923101f936cc6594f20aa6f.png
UV 座標が左下原点なので、座標の2個目の値 $ V を負にして 1 を足すことで左上原点の座標に変換した。
https://scrapbox.io/files/6923108301f1edddb4f4edfd.png
UV 座標を使っている都合上、横に引き伸ばすとグラデーションの境界線も横長になってしまう。
Position を使った実装
https://scrapbox.io/files/6923e160cbaf044092552690.png
https://scrapbox.io/files/6923e7816de57cf64aab793e.png
Position の$ x, y座標を足し、Propertyで定義したGradientSizeで割った。
これにより座標(0, GradientSize)から(GradientSize, 0)に向けてのグラデーションができる。
GradientSizeを、矩形のサイズに合わせて手動入力しなければならないのが嬉しくない。
Alpha もグラデーションさせるようにしたので、Sample Gradient から Split で RGBA を分け、さらに Vector3 で RGB をまとめている。
個人的な結論
いろいろ試したが、Rect Transform の Width に合わせて UV 空間でのグラデーションの傾きを計算するのは難しそうだった
妥協案として、一番すっきりする形で整理することにした
https://scrapbox.io/files/69268575b962694dce2dbee8.png
次のプロパティを定義している
float slope: グラデーションの傾き
float offset: グラデーションの切片
color colorFrom, colorTo: グラデーションに使う色
Material のプレビュー
https://scrapbox.io/files/692685cf817c43538a1f6e9b.png
https://scrapbox.io/files/692685f77cd4234d4aab35e3.png
シンプルだが、画面サイズの変更で見た目が変わってしまう。
要件によってはもっと複雑な Shader が必要だと思う。
Position ノードの値について
0～1の範囲ではないことに注意する。
0～1ではないので、たとえば色として直接 Position を指定すると、負～0の部分（と0～1の部分）、1～正の部分で色が分かれる。
https://scrapbox.io/files/6923fb9d72fd16f7968801ae.png
Preview 2D では、 Position ノードの値は -0.5 から 0.5 っぽい？
値は画面上のフラグメントの位置？
https://scrapbox.io/files/6923ff2ba0a808bfa338de8a.png
フラグメントが原点から見てどの座標にあるのかを取得するには、どうしたらよいだろうか。
Scene > Object ノードの Position と、Fragment の Position の差を取って何かできないだろうか？
Object ノードの Position は、(0, 0)だったのでダメ