特にUMGでマテリアルのUV座標ノードを使ってグラデーションをつけるのは常套手段である。
ドット・バイ・ドットでのきれいなグラデーションを付けられるし(語弊アリ)、いろいろなサイズのグラデーションテクスチャを作らずに済む。
ここに、ただリニアに変化するだけのグラデーションだけでなく、色の変化の割合などを操作する方法をメモしておく。
要するに、すぐ忘れてしまう自分向けのメモです。
参考サイト
シンプルなグラデーション
良くあるパターン。
TexCoordのRチャンネル(U方向)かGチャンネル(V方向)をAlphaにして、２色をLerpする。
こういう絵になる。
※V方向のグラデーションはComponent MaskをGチャンネルに変えればOK。
Powerでコントラストをつける
Epic公式サンプルのマテリアルでもPowerノード(べき乗ノード)を使ってコントラストをつけるパターンは多い。
ここでもPowerノードを使ってお手軽にコントラストをつけてみる。
パラメータContrastが1の時、リニアなグラデーションと同じになり、1より小さければグラデーション開始側に寄り、1より大きければ逆側に寄る。
Easeでコントラストをつける
そもそもPowerによる式はEase Inの式と同じ。であれば、Ease OutやEase In/Outも用意すればグラデーションにバリエーションを出せるであろう、という考え。
結果は下の図のような感じ。
Ease InはExpが大きくなるにつれ水色が強くなっていく。Ease Outはその逆。
Ease In/Outはそもそも0.5を境にEase InとEase Outを切り替える仕組みなので、中央(0.5)に寄っていく。
マテリアルでのEaseは、BlueprintのEaseノードのC++コードを参考にして(目コピして)、マテリアル関数を用意した。
マテリアル関数 MF_EaseIn
マテリアル関数 MF_EaseOut
マテリアル関数 MF_EaseInOut
Ease In/Outはアルファ値0.5でEase InとOutを切り替える必要があり、ノードグラフで組むよりHLSLのほうが書き易かったので、Customノードを使用した。
Customノード「[HLSL] Ease In Out」の中身はこちら：
float Alpha = saturate(InAlpha);
return (Alpha < 0.5)
? lerp(0.0, 1.0, pow(Alpha * 2.0, InExp)) * 0.5
: lerp(0.0, 1.0, 1.0 - pow(1.0 - (Alpha * 2.0 - 1.0), InExp)) * 0.5 + 0.5;
グラデーションの回転
グラデーションの回転は、ヒストリアさんのUMGで使えるシンプルなグラデーションのつくり方あれこれを参考にさせていただきました。
例えば、グラデーションを45度回転させると、グラデの端(水色と青)がウィジット矩形の端に来ず、グラデーションしていない面積が増えてしまう。
上記のヒストリアブログには、これを対処するための、傾きによってグラデーションをスケールさせてやる方法が載っている。
- 【左: Default】シンプルにUVを45度回転させただけのもの。
- 黒い矩形が元のUV(0,0)-(1,1)に相当する。
- 黒い矩形の外側はアルファ値が負の値(0側)や1より大きい値(1側)になってしまう。
- ※上の図はアルファ値を0と1の間にクランプしてある。
- 【右: Normalized】ヒストリアさんの方法でウィジットの矩形の端が必ずアルファ0, 1になるように元のUV(0,0)-(1,1)をスケールさせたもの。
- ざっくり sinθ+cosθ 倍すればよい。
動画で見ると挙動が分かりやすい：
マテリアルグラフ
マテリアル関数 MF_RotateGradients_Normalized
おまけ
(おわり)