[UE5]UIデザイナー向け！虹色の後光を作りながら学ぶマテリアルのキホン　後編

こちらの記事は前後編の後編です。

ぜひ前編からお読みください。

こんにちは。

エフェクトっていいですよね。前回も書いたことなので以下省略。

前回に引き続き、UIデザイナーが使えるマテリアルを作っていきましょう。

目指すは、【ぐるぐる回るグラデーション後光～若干の拡縮を添えて～】！

完成イメージはこんな感じです。

　前編で基本となる形を作成できたと思いますので、今回は動きを付けてみましょう。

　複雑な部分もありますが、合言葉は「一つ一つ」です。

　UIマテリアルで使えるノードをひとつのマテリアルに詰め込みましたので、一連の流れを踏まえながら、ぜひ一緒にマテリアルの基礎を覚えていきましょう。

　超初心者向けの内容から説明しますので、初心者の方は１から順に、中～上級者諸兄は飛ばしながらお読みください。

◎動かしてみよう

　形が決まったら、いよいよマテリアルの本領、動かし続けるフェーズに入ります。

　今回の理想では、①まず回転させて、②若干拡縮させたい　です。

　まずは①回転を作っていきましょう。

〇回転させる

　マテリアルを回転させるには、「CustomRotator」というノードを使います。Rotation Angleピンに数値を入れるとその通りに角度が変わってくれるので、今回はぐるぐる回すためにも「Time」ノードで時間を取得してみましょう。

　時間を取得すると、永続的に変化し続ける値が取れます。用意したCustomRotatorを、VectotToRadialValueにつなぐと……？

　残念、すべてが無に帰してしまいました。いったん整理するために、Timeノードを外します。

　極座標化は間違えているようにはみえません。とすれば、処理の順番が間違っていることが問題なようです。

　片づけていきましょう。合言葉はひとつひとつです。

　まずは、極座標と回転のノードのつなぎを逆にします。

　マテリアルは基本的にTexCoord[0]から順に処理が実行されるので、回転させた後に極座標化すると、先ほどのように失敗してしまうのです。

　それから、目に優しくする意味も含めて先ほどRotationAngleにつないでいたTimeを大きな数字で割りましょう。割り算はDivideです。左クリックして/でも出すことが出来ますよ。

　「Frac」は、値の小数点以下だけを取り出してくれるノードです。極座標の値にFracで値を足し続けることで、回転させることが出来ます。さて、ここからTextureSampleへノードをつなぐと……？

　狙った通りに動いています！

　回転させる速度や方向は、Timeの直後に配置したDivideで指定できます。値をマイナスに入れると、回る方向が反転します。

　また、最終カラーである虹色を回すときも同じノード群を使うことが出来ます。

　このままでも見た目としては狙い通りですが、少し丁寧に実装することにしましょう。

　既に画像には実装されてしまっていますが、Fracの後ろに注目してください。

　初心者の方は「UV」という単語は耳慣れないと思います。XYと同じくテクスチャの縦と横を表す値のことですが、見てのとおり「U」と「V」二つの値があることがわかります。

　Fracから出ているピンは一つ、しかしTextureSampleのピンは「UVs」と書かれています。つまり内部的に、一つの値が二つ値へ同じように流れてしまっているということになってしまいます。UEは優秀なので何も言わず、スマートに変換してくれるのです。有難いですが、場面によっては少々おせっかいなこともあります。

　そこで、ＵＶそれぞれに値を設定させるために「Append」ノードを追加しましょう。

　AppendノードはAピンがU、BピンがVに対応する数値を入れることが出来ますから、今回はAピンにFrac、Bピンに画像の中央である0.5を入れ、AppendノードとTextureSampleノードをつなげば、より正確に値を送れていることになります。

　今回は見た目の変化はありませんが、値の数について気を付けておくと、思わぬ壁にぶつかった時の解決策になるかもしれません。

〇拡縮させる

　回転させることができたら、次は拡縮に挑戦です。

　アニメーションでやっても良いと思いがちですが、使いまわすときにいちいちアニメーションを付けるのは面倒ですから、マテリアルで素材を作ってしまうのが楽なのです。

　今度はマテリアルが荒ぶらないように、慎重にノードをつないでいきましょう。

　とはいえ、極座標はなかなか厄介で、単純に元となるテクスチャのスケールを拡縮しても荒ぶる予感がします。ですので、「形の基礎を作る」の章で作った丸と四角のマスクを拡縮させることにしましょう。引く数が増減すれば、引かれる数も増減しているように見えるはずです。

　テクスチャの大きさを変えるには、「ScaleUVsByCenter」というノードを使います。TextureScaleピンに、試しにどちらの数も１以外に設定したconstant2Vectorをつないで、それを先ほど作成した四角いマスクと丸いマスクのA(V2)ピンに差し込んでみてください。プレビューの大きさが変化すると思います。

　これを使って、動かし続けるためには……回転させた時と同じですね。Timeノードを使います。

　ただし、単純にTimeノードをつなぐだけでは相変わらず動いてくれません。回転で使用したFracをつないでも拡大を繰り返しているように見え、想定している動きとは違います。

　拡縮をさせるためには、「Sine」「Cosain」「Tangient」などのノードを使用します。どれでも基本リカバリーが利きますが、今回は「Sine」を使ってみましょう。

「Sine」ノードは-1から1の間を緩やかにいったり来たりするノードです。マテリアルで規則的な動きを作る際には基本となるノードですので、覚えていると様々なマテリアルのマスターピースになってくれますよ。

　SineノードをTimeとScaleUVsByCenterの間に入れると、元気に拡縮を始めました。このままでは目がチカチカします。落ち着いてもらいましょう。

　Sineノードは前述のとおり、-1から1の間を行ったり来たりするノードです。この動く範囲を小さくすれば、マスクの大きさを緩やかに拡縮できるのではないでしょうか。

　「Multiply」は掛け算のノードです。Sineを0.1倍すると、-1から1の間を行き来していたSineの値が-0.1から0.1になります。つまりマスクの大きさが-0.1倍から0.1倍を繰り返すことになり、プレビューでも全体がかなり小さく変化したことが確認できます。

　普通の掛け算と扱いは同じなので、10で割る(Divide)ことでも同じ結果が出ます。ご自身の結果が想像しやすいほうで問題ありません。

　これではあまりに小さすぎるので、これに足し算で値を引き上げます。「Add」ノードで0.9を足すと、0.8から1を行き来するように変化します。なかなかちょうどよい大きさになりました。

◎UMGに配置しよう

　最初にイメージしていたマテリアルが完成しました！

　あとはこれをUMGのImageとして配置すれば、通常のテクスチャと似たイメージで使用できるようになります。

　……なんだか使い勝手が悪いとお気づきでしょうか。

このままでは単純にボタンなどに合わせて拡大すると形が崩れ、DrowAsで分割法をBoxにしても中央が伸び切ってしまいます。これでは、使いまわせることが最大の利点であるマテリアルの長所がなくなってしまうも同然です。

　それでは最後に、完全にUIで使用するとき向けに、縦横比を変更しても崩れないマテリアルに仕上げていきましょう！

〇Texcoord[0]を置き換える

　今まで作成してきたウィジェットの中に、２つの「Texcoord[0]」があったかと思います。

　Texcoord[0]はテクスチャの座標を設定できるほか、グラデーションを取り出せる大変汎用性の高いノードですが、これを今回は「GetUserInterfaceUV」に置き換えます。

　このノードは9sliceをはじめとして、UMGで使うときに便利な機能が付いた起点ノードです。

まずはマスクを拡縮させる部分の「Texcoord[0]」を消して、9-SliceUVピンからつなぎます。

　次に、マスクを極座標化する前に「GetUserInterfaceUV」のNormalizedUVピンからつなぎましょう。

　……しまった！　形が崩れてしまいました。

　これはこれで使い道のありそうな形になりましたが、今回は中央に中心点がなければ意味がありません。　

　問題は、画像の中心点が0，0に移動してしまったことです。画像の中心点の考え方はアライメントやピボットと同じです。

　0.5,0.5に中央を持ってくるために、NormalizedUVピンの次に「Subtract(A-Bの引き算)」を追加します。次に、２を押しながら空白の部分をクリックして、「Constant2Vector」を出し、どちらの値にも0.5を入れたうえでSubtractのBの値につなぎましょう。

　これで、画像の中心を設定することが出来ました。

　さらに色の部分も乱れないようにします。極座標の前に、今作ったSubtractからピンを出します。今更ですが、共通しているノードは同じピンを使いまわすことが出来るのです。

　この状態で、WBPに配置したマテリアルのDrowAsをBoxに設定したうえで、ImageSizeを変更してみてください。形と色が自然に拡大されるようになったかと思います。

　実に汎用的になりました。

　これで、このマテリアルは完成です！

◎まとめ

　お疲れさまでした。

　全体のノードはこのようになりました。

　なかなか壮観ですね。

　初めてマテリアルを触る方にとっては、少々複雑なノードだったかと思います。

　しかし今回のマテリアルには、UIでマテリアルを作成するときに使い勝手のいい基本的なノードや計算式、考え方を含んでいます。個々のノード群を組み合わせたり、増やしたり、時間差で動かしたり……ここからいろいろと発展させることが出来ます。

　またマテリアルの基本を思い出したくなった時は、このページで復習してみてくださいね。

　それでは！