[UE4]UMGで使えるでシンプルなグラデーションを作り方あれこれ

こんにちは。

使ってますか？グラデーション。

今回はUMGで使えるグラデーションマテリアルの作成方法を書いていこうかと思います。

マテリアルを作成したら、Material Domeinを User Interfaceに変更します。

１．シンプルな水平方向・垂直方向のグラデーション

よくある（？）テクニック、コンポーネントマスクを使ったグラデーションです。Maskを(R)ではなく(G)になるようにチェックすれば垂直方向に変わります。

※TexCoordはUVを作成するものですが、X座標が横軸、Y座標が縦軸で原点が左上とする座標系なので、マスクを使いで片方を取り出すと単純な０から１に向かうグラデーションになるわけです。

２．グラデーションの色数や分布をもっと自由に設定したい

カーブ＋カーブアトラスを使ってみましょう。

①カーブアセット(CurveLinerColor)を作成し、０から１の間の横軸を使って好みのグラデーションを作成します。

②カーブアトラスに作成したカーブを登録します。

③マテリアルエディタで「CurveAtlasRowParameter」ノードを配置し、作成したカーブアトラスを設定・その後にカーブを指定します。

④先ほどと同じようなTexCoordからコンポーネントマスクを使用して０－１の入力値を取り出し、それをCurveTimeに繋ぎます。

これで作成したカーブのグラデーションの値がマテリアル内で使用できます。

３．斜めのグラデーション

斜めのグラデーション、PhotoshopやIllustratorではよく使いますね！

マテリアルエディタには回転させるためのノードがあります。

「CustomRotator」を使ってみましょう。

回転を分かりやすくするために、パラメータの入力値を度数法に変換しています。（３６０度で一周）

これで回転するはず・・・！

回った回った・・・ん！？

思ったのとちがーう！！

Illustratorなどのグラデーションと同じように、端から端までスムーズにグラデーションして欲しいわけです。

UE4のCustomRotatorを使用するだけだと、こんな感じになっています。

長さが足りないのか・・・じゃあ伸ばせばいいじゃん？

と、いうことで、角度に応じてスケーリングする処理を追加します。

と、いうわけで計算で求めます。いえ、解けなかったので描画系エンジニアさんに解いてもらいました。（ありがとうございます）

すらっと解けなかったので図に答えを書いておきました。L=sinθ+cosθです。

sinθとcosθはマイナスの値になるため絶対値を取ります。

もちろん、２番の自由なグラデを掛け合わせて使えます。

後は各々でマスクを設定したり、透明度を設定することでいろんなグラデーションや形状を作れそうですね。

UIではNoMipMapでテクスチャを使用するので、マテリアルで作成すればテクスチャ容量を削減できます。

これは試してみるっきゃない。

おまけ