UIでプロシージャルマテリアルの扱いについて思うことと、作ったことない人向け簡易説明【UE4】【UE5】
マテリアルでＵＩパーツを作るメリット・デメリット
ひとまずEpicGamesの人の言葉を借ります
”１つのマテリアルを使って、他のUIの一部にも拡張できる構成要素をつくったということ”
”設計の巧妙さと構想力によっては作成した少数のベースマテリアルを大量のUIアートの一部として拡張することができます”
自分なりに思っているマテリアルをＵＩで使うメリット、デメリット
メリット
・テクスチャでは作れない動的な変化に対応した表現ができる
・ＵＩのNomipmapで肥大しがちなテクスチャ容量を削減できる
・アニメーションのタイムラインでパラメーターを制御することができ、モーショングラフィックスのような表現も作れる
デメリット
・テクスチャほど複雑な形状を作れない
・作り方によっては、処理が激重マテリアルも作れてしまう（意味のない計算をさせたり、ノイズを生成するノードなどを大量に使ったりするなど）
・作るのに数学や技術的な知識が必要
なので、どこならばマテリアルのほうが良いかなどは適宜判断が必要だと思います
ひとまず簡単なものをマテリアルで作ってみて、面白かったら色々作ってみるといいかもしれません
将来的にこういうものをプロシージャルで作りたい
UIでマテリアルを使ったことない人へ
入門的に、どんな感じで作るのかを試しに書いてみます
これをすることによって、UMGのImageWidgetにマテリアルを割り当てできるようになる
Opaque->マスクなし、透明度なし
Masked->マスクあり、透明度なし
Translucent->マスクもできるし透明度もできる
Translucentが万能だけど、処理負荷は高い
でもUIアセットではジャギーがめちゃめちゃ目立つので、致し方ないところもある
今回はTranslucentに設定する
各ノードは余白で名前を入力すると候補がでてきて出せる
Maskノードをクリックした状態で、RGBAのチェックボックスのGのチェックを外す
Maksノードはかなり便利なノードで、Vectorの要素をチェック入れたものだけ取り出せる
例えばカラー情報はVector3（RGB）、Vector4（RGBA、透明度あり）で構成されてることが多く、Rだけチェックしてマスクノードに通せばRチャンネル（赤要素）だけを取り出せる
今回は、TexCoordというUV座標を生成するノードからU座標のみを取り出し、
横幅方向の０～１のグラデーションとして使用する
Param(0)となっているところはクリックしてDefaultValueを適当に0.5とかにする
ここまで出来たらいったん保存
マテリアルインスタンスを作成する
自分はマテリアルをMT_の名前でつくり、
マテリアルインスタンスをMI_で命名するのが好きです
M_がEpic公式ではよく使うけど、Mのみだと検索しにくい気がする
ScalarParameterなど編集できるノードをつないでいるとここに現れる
チェックを入れて、パラメーター部分をドラッグしたり数値入力すると
色のついたエリアが変わることが確認できる
その中にImageWidgetを配置する。
ImageWidgetのBrush->Imageの場所に先ほど作ったマテリアルインスタンスを割り当てる
マテリアルインスタンスの値を変えることでゲージが増減させられるようになる
このままでは、デフォルトのProgressBarと大して変わらないが、
ひとまずマテリアルのパラメーターを反映させたゲージがつくれた
こんな感じで、テクスチャ素材を用意せずにＵＩで使えるマテリアルを作成できる
マテリアルをちょっと改造してみる
処理内容は言葉で説明すると大変なので省略
こんな感じで動きます
実際のパラメーターは先ほどと同じくGaugeProgressで制御しますが、それとは関係なくゲージが水っぽいような不安定な感じが表現できました
こんな感じで、プロシージャルで作るＵＩマテリアルについて、つくりかたなど備忘録代わりにでも取り扱っていきたいと思います（詳細に説明するのは大変なのでやらないかも・・・）