[UE5]UIデザイナー向け！マテリアルとアニメーションで表現を拡張しよう

執筆バージョン: Unreal Engine 5.8

 

こんにちは。

今回はUIマテリアルの表現が広がる考え方やノードの組み合わせ方と、WBPのアニメーションタイムラインでマテリアルパラメーターをコントロールする方法をご紹介します。

こちらの記事でUIマテリアルの基礎をお伝えしていますので、まったくの初心者の方であれば、こちらを先にお読みください。

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

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

 

それでは、始めていきましょう。

今回はこちらのアニメ―ションを、マテリアルひとつで作っていきます。

 

実に勢いがいいですね！

このアニメ―ション自体に実用性は一切ありませんが、マテリアルの中には、UIマテリアルを作るにあたっての考え方を多分に含んでいます。

例として、

・テクスチャのシームレスな移動

・テクスチャのRBGをカーブアニメ―ションで切り替える

・同じ要素を時間差で足し合わせる考え方

・要素同士のマスクの足し引き

・マテリアルを整頓する方法

・マテリアルの要素を、WBPのアニメ―ションタイムラインで操作する方法

などをお伝えできればと思います。

初心者の方は一緒に、中上級者諸兄は飛ばしながら、必要な部分をお読みください。

 

 

1　下準備をしよう

用意するテクスチャはたったの4枚！

ご覧のように、猫ちゃん以外は基本的に模様のようなテクスチャばかりです。

この記事と似たものを作成したいのであれば、こちら↓のテクスチャをご使用ください。PhotoshopのFilter効果(雲1)やillustratorで簡単に作成することも可能です。

※UE上ではTargaを使用しています。Alpha値が正確に取得できない場合は、RGBとAlphaをMultplyしてください。

 

テクスチャをインポート出来たら、UE上でマテリアルを作成します。

Material DomainをUser Interfaceに。

Blend ModeをTranslucentにします。

また、このマテリアルを正方形でなく使う場合は、下図のようなノードを組み、Tex Coordの縦横比をあらかじめ決めておくとよいでしょう。

様々な値を入れたとき、「Multiply」の結果が変化しているのがわかるでしょうか。

実際にWBPに配置するImageのサイズを意識しておくことで、縦横比が崩れない表示ができるのです。

また、最終ノードにNamed Reroute Declarationを検索、好きな名前を付けたノードとして置くことで、名付けたノード名が検索できるようになります。

今後はこのマテリアルの中では、Tex Coordの代わりにTex Coord_Multiplyを使用していくことにしましょう。

Named Reroute Declarationは、ノードとノードの間をジャンプできる機能です。きれいにノードを組むにはうってつけですので、遠いノード同士をつなげるときには活用していきましょう。

 

２　テクスチャのシームレスな移動

それでは早速、アニメーションに使用するマテリアルのノードを組んでいきましょう。

基本的なノードや考え方は以前の記事で解説していますので、かいつまんでいきます。

まずはアニメーションの最初、雲のようなテクスチャが出てくる部分に使用する部品を作ります。全体のノードはこちら。

〇Panner

・Pannerは、UVを一方方向・一定の読度で動かし続けるノードです。X、Yにそれぞれ数値を入れることで、動かす速さを決められます。TimeにSineやFracを繋ぐことで、動かし方も変えられますが、今回は使用しません。

 

〇Max

・Maxは、掛け合わせた2つの要素を比較し、より濃いものを表示します。Photoshopでいうところの「比較(暗)」が近いでしょうか。

 

〇最後のMultiply

WBPのアニメ―ションタイムラインでは、パラメーター化した数値をタイムライン上に設定することが出来ます。

ノードの最後のアルファ値に数値を掛けられるようにしておくことで、疑似的な「Render Opacity」を雲の部分にだけ書けることが出来ます。

パラメーター化は、ノードを右クリックして「Convert to Parameter」をクリックすることで行えます。

今後も画像の中には同じことをして命名されたノードが頻出しますので、都度パラメーター化を行ってください。

 

〇Named Reroute Declaration

先ほども少し触れましたが、Named Reroute Declarationはノードの間をジャンプさせてくれるためのノードです。

例として、下図では、UVを2倍した状態でSphere Maskを使い、円を作成しました。

左右のノード群で、どちらも同じ結果が出力されていますね。

左側では、Named Reroute Declaration 以前の情報が別の場所にジャンプしたことがお分かりいただけると思います。

Named Reroute Declarationは、ノードからコードを出して、「Name」などと検索すれば出てきます。好きな名前を付けることが出来るので、管理しやすい名前をつけましょう。(上のように「_2」などとつけては、後で自分の首を絞めるだけです。)

 

さて、雲ノイズに話を戻しましょう。

このマテリアルでは最終的に「雲」「集中線」「猫ちゃん」「キラキラ」が合成されていきます。

カラーとアルファをそれぞれ最終計算させるために、この段階で「Cloud_Color」と「Cloud_Alpha」の二つのNamed Reroute Declarationを作成しておきましょう。

 

以上で、雲がゆっくりと動いていく表現は完成しました。

雲を複数合成したり、それぞれのテクスチャを変えたり、濃度や合成方法を変えたりすることで、エフェクト的な様々な表現ができると思います。

 

3　切り替えを使った集中線と、パワー系色相環

次に、集中線とパワー系色相環を作成します。ノードはこちら。

先ほどと比べ、少し複雑なノードになりましたね。しかし、やっていることは簡単です。

マテリアルはひとつひとつが合言葉です。

 

〇Vector to Radial Value

極座標化のノードです。これを使用することで、2*126の細長いテクスチャが放射状になります。

 

〇3色のテクスチャと3色のカーブ

UEにインポートされたテクスチャは、RBGAの情報を持っています。ですので、三原色+黒のみでテクスチャを作成することで、素早くイメージが切り替わる集中線が1枚のテクスチャで表現できます。

色を色ではなく情報として扱うため、今回は必ず255.0.0などの極端な色を使用しましょう。

次に、カラーカーブで以下のようなカーブを作成します。

 

カーブの曲線を直線にするには、ウィンドウの上部にあるプルダウンを「Constant」にするか、カーブ上のピンを選択し、右クリックすることで設定できます。直角のアイコンと四角いピンが目印です。

このカーブは、0-1を繰り返し再生するために使用します。

すなわち、0-0.33333…の時点では赤、0.33333…-0.666666…では緑、0.66666…-1の範囲は青が表示され、他の色の値は０になります。こちらも色を色ではなく、情報として扱うことに留意しましょう。

これで、「RGBの指定によって表示される画像が異なるマスク」であるテクスチャと、「実際にRGBを指定するマスク」であるカーブが揃いました。

テクスチャとカーブのRGBをそれぞれMultiplyしてみましょう。点滅する放射線が、3つ出来上がります。さらにAddしていくことで空白の時間が互いに補完され、3段階で切り替わる放射線が出来ます。

 

〇円形にくり抜く

無事に、動く集中線を作れました。

しかしこのまま進めていくと、猫ちゃんの顔に集中線が被ってしまいます。猫ちゃん全体的に集中線の上にかぶせるのであればこのままでもよいのですが、せっかくならば漫画のように、上に来てほしいものです。

となれば、中央を円形にくりぬくのが良いでしょう。さっそくSphere Maskを作成し、Subtractで引いてみましょう。

このとき、Hardnessが高すぎるとくっきり円形で抜かれてしまい、低すぎると中央まで線が伸びてしまいます。気持ちの良いサイズを探してみてくださいね。

 

アニメ―ションタイムライン用のオパシティパラメーターを追加して、Alphaは完成しました。

次は色を追加しましょう。ゲーミング的な表現を行う方法は複数ありますが、今回は「同じ要素を時間差で繰り返す」という体験をしていただくために、かなり原始的な方法を取っています。

 

〇パワー系色相環回し

ノードが多くて大変なように見えるかもしれませんが、よく見てみると、「Sine」から「Add」までは同じ要素のコピペであることがわかっていただけると思います。つまり、時間を0-1で行き来しているのを3回繰り返しているのです。

ただし3つのうち2つに、Timeの直後にSubtractがあるかと思います。これは、1秒を3で割り、その値を引くことによって、3分の1ずつ0-1の行き来をずらしているのです。

Constant3Vectorの設定値を「0.0.0」（黒）にしておき、さきほども行ったようにRGBそれぞれにaddします。そうすると、RGBの値がそれぞれ、次々に変化することによって、シームレスに色相が変化していくのを確認できるかと思います。

……ですが正直な話、カラーカーブを使ったほうが自由度も高いですし、ノードも少なくて済むので、UIマテリアルとして使用する場合はそうしてください。

先ほども申し上げた通り、あくまで今回は「同じ要素を等分割してAddしていくと、シームレスにループができるんだな」ということを体験して頂くための色相環でした。

 

これで、ゲーミング集中線が完成したかと思います。

Named Reroute Declarationで、「Lines_Alpha」と「Lines_Color」を作成しておきましょう。またあとで使います。

 

4　猫ちゃんを拡縮＆回転

メインとなる猫ちゃんですが、前回の記事(https://historia.co.jp/archives/48477/)で触れていますので、動きに関しての解説は省略します。全体のノードはこちら。

 

〇テクスチャ設定としてのClamp

前回とは違う要素として、画像をこのまま回転させると、四方に何かが出てきます。

これは自動的に画面外に配置されていた猫ちゃんのかけらです。UEではマテリアルの外にもタイリングされています。

それを防ぐため、テクスチャの設定のAdvancedを「Clamp」に設定しておきましょう。XYそれぞれの軸で、タイリングしない設定を行うことが出来ます。

Crampさせた猫ちゃんを中央に寄せるため、Texture Sampleの直前で0.5を足しておきましょう。UVの位置はAddかSubtractで操作できることを覚えておくと、便利です。

ちなみに、もしも回転する中で見切れてしまうようであれば、Multiplyで1よりも大きな数字を入れれば解決します。UVのスケールは、基本的にMultiplyで操作します。

なお、Clampというノードがマテリアルにも存在します。

これは2つの値を設定し、それより上にも下にも計算結果が飛び出さないようにするものです。これも表現によっては実用的ですが、今回は使いません。

 

例によってNamed Reroute Declarationで、「CatColor」と「CatAlpha」を作成しておきましょう。またあとで使います。

 

5　モノクロのマスクの表示範囲を切り替える

次に、キラキラを表示させる要素を作っていきましょう。ノードはこちら。

今まで行ってきた「要素の繰り返し」の考え方を使っています。今回はRGBを足すのではなく、要素を引くことで目的の挙動に寄せています。

 

〇マスクテクスチャの考え方

テクスチャを色や画像としてではなく、情報として扱えることは、「ゲーミング集中線」の章でお伝えしました。前回はRGBを使用しましたが、今回は白と黒を使用します。

UEでも、Photoshopなどペイントツールのレイヤーマスクと似た挙動で、黒は0、白は1として扱われます。

すなわち黒い部分は不透明度0、白い部分は不透明度100。明度50の部分があった時は、不透明度が50として扱われるのです。

このような挙動とモノクロのテクスチャを使用し、計算によって「どこを1（白）扱いにするか」を決めることで、単純なマスク以外の表現が可能になります。

 

〇SineとStep

SineとMultiply、Addを組み合わせることで、0-1を行き来する波を作成できます。

Stepは、「一定の値以上を1とする」という挙動のノードです。つまりYに繋がれた値が0.2であれば、0.3でも0.8でも1として扱われるということです。これは「白と黒(0と1)」を取得したいときに非常な便利なノードです。

この二つを組み合わせます。Sineで作成した0-1で動き続ける波を、StepのY値に繋げば、1として扱われるしきい値を断続的に動かすことが出来ます。

同じようにノードを組めば、白い部分が増えたり減ったりしていることがわかると思います。

Timeに0.1を足し、以降をコピペすることで、0.1秒ずれた二つのキラキラが作成できました。

さて、これをSubtractで引いてみましょう。例えば0.4以上がしきい値であるノード群から、0.3以上がしきい値であるノード群を引けば、0.3～0.4までを1として扱うノードが出来るのです。

Stepはぱっきりと0-1を分けてしまいますが、もうすこしアンチエイリアスやボケ感が欲しい場合は、Smooth Stepという別のノードを使用しましょう。

 

例によってNamed Reroute Declarationで、「RameColor」と「RameAlpha」を作成しておきましょう。またあとで使います。

 

6　マスクの足し引き

これで、「雲」「集中線」「猫ちゃん」「キラキラ」の4つの要素が揃いました。

ここからは、これらの要素を足し合わせて、マテリアルを完成させていきましょう。

「要素を足すのだから……Addだな！」と思った方、大正解です。UIマテリアルは四則演算を活用することが非常に重要です。しかし今回は、Addだけでは足りません。

試しに今まで作ってきたNamed Reroute Declarationたちの「Color」と「Alpha」をそれぞれ順に足し合わせてみてください。

……色が壊滅的にパリピです。狙い通りでの色ではありませんね。

さらにプレビューでは分かりにくいですが、内部的にはAlphaの値も意図通りではありません。上の画像では、猫＋キラキラ＋集中線＋雲と、４つのAlpha値が足され、1を超えてしまっている状態です。

視覚的に分かりたいのであれば、最終ノードに「Subtract」をつなぎ、1を引いてみてください。まだ赤い部分が残っているはずです。この残った部分が、「1以上のAlpha値」です。

0-1から外れた値のAlpha値は、特殊な描画になりやすいです。意図していない限り、Alphaの値も0-1の範囲に納めるのが無難でしょう。

UIマテリアルにおいて決定的に違うのは、「色同士・Alpha同士はレイヤー構造になっているわけではない」というところです。

レイヤーが上だから(後からAddしたから)色がそのまま表示されてくれる、というわけではありません。

ではどうすればよいか。答えは一つです。不要な部分を消してしまえばよいのです。

先ほど、UIマテリアルは四則演算が非常に重要とお伝えしました。Add(足し算)だけでなく、Subtract(引き算)を適切に使うことで、色やAlphaの情報を正しく扱うことが出来るのです。

背景から集中線を引く。最終的に猫ちゃんが一番表に来てほしいので、猫ちゃんを最後に足す。など、順番も大切です。理想通りの形や色になっているかは、各「Add」もしくは「Subtract」の▽ボタンを押すとプレビューできます。

また、Colorのほうにも注意が必要です。

たとえば「Cloud_Color」は、集中線や猫ちゃんなどほかの要素を引いたマスクの状態を考慮していません。そのため、前面にオレンジ色の色が重なってしまいます。

ここでも、四則演算が役に立ちます。

最終的に使用したい雲の範囲を別で計算(雲-集中線-キラキラ-猫ちゃん)し、その結果をCloud_ColorにMultply（掛け算）します。0に何をかけても0ですから、Alpha値で0になった部分は必然的に色も0になります。

もしも思い通りの色味にならなかった場合は、1以上の値を1に抑え、0以下の値を0に切り上げるノード「Saturate」を使いましょう。このノードは、使いすぎても良くありませんが、数字の整理をしたいときに挟める良いノードです。Clampに0と1を設定したときと同じ挙動をしますので、どちらを使うかはお好みで。

 

要素を適切に足して、引いて、時にはかけていけば、以下のようなノードが完成します。

（このノード群で、Named Reroute Declarationのありがたみも実感できたかと思います。いわゆる「パスタ状態」を避けるために非常に有用な機能でしたね。）

ちなみに随所の白い丸は白いケーブルをダブルクリックで出せます。さらにノードをきれいにしたいときにお使いください。

 

7　マテリアル完成！

さて、ようやくマテリアルが完成しました。お疲れ様です！

最終的なノードをもう一度見ておきましょう。（画質が荒くて申し訳ありません。細かいノードの組み方は、各章を振り返って下さいね。）

いやはや、なんとも汎用性が低そうです。

元も子もないことを言いますが、UIでマテリアルを使用する目的の一つに、汎用的に使用できるベースマテリアルを作るということがあります。色違いや形違い、回転の反転や速度違い等を量産しやすく、テクスチャと工数を削減しやすいのです。

ですので、実際には理由がない限り、それぞれの要素を単独のマテリアルとして作成、WBP上で重ねたほうが圧倒的に扱いやすいですし、軽量ですし、効率的でしょう。

あくまで個人的な基準ですが、ここまでのノードをひとつのマテリアルで組む時は、確実に固有のマテリアルであるから凝りたいとか、どうしても単一のマテリアルだけで要素をそろえなければならないとか、実装都合でテクスチャやアニメーションが使えないとか、そういった理由が説明できるといいかもしれません。

しかし、今回はこれで良いのです。

なぜなら今回はUIデザイナーとしてマテリアルを学び、楽しめればそれでよいからです。

それに、ノードがたくさんあると、新しい表現のヒントにもなり得ます。

実装のことはいったん気にせずに、完成したマテリアルを使って、アニメーションを作りに行きましょう。

 

7　パラメーターとアニメーションタイムライン

さて。マテリアルは完成しました。それではUIデザイナーの主戦場であるWBPに移動しましょう。

好きな名前のWBPを作成し、Canvas PanelやOverlayなどに先ほどのマテリアルを配置してください。Imageの比率を調整し、正しく表示されるようにします。

続けてAnimationsパネルで、好きな名前のアニメ―ションを作成してください。今配置したマテリアルのImageタイムラインを追加します。

+ボタンからBrush. Brush Materialを選択します。これはマテリアル内で作成されているパラメーターをアニメーションタイムラインで操作できるようにするものです。

続けて追加したマテリアルの＋ボタンをクリックします。すると、罫線の下にマテリアル内で追加したパラメータがずらりと並びます。

全て追加していきましょう。

このパラメーターは、たとえば雲のOpacityであるとか、猫ちゃんの回転速度であるとか、マテリアル内での役割を持っているはずです。

0～1の数値をタイムライン上に打てば、その通りに働いてくれます。打ち方は普段のアニメ―ション制作と変わりませんので、説明は割愛します。

ただし一つだけ、注意しなくてはならないことがあります。

Parameterによっては0-1の滑らかな表現ができません。タイムラインのFPSに応じてマテリアルのパラメーターが更新されるため、回転速度など「徐々に早くなる」という表現はできません。Timeが絡んだParameterは、アニメーションのFPSに応じて更新されたとき、0からリスタートしてしまうからです。

ですので、カラーカーブの時にも行ったようにピンを「Constant」に設定し急激に始まるようにする必要があります。

もしも「どうしても徐々に早くなる表現がしたいんだ！」という場合は、TimeとCustom Rotatorではなく、カラーカーブを使ったアニメーションを作成しましょう。こちらの記事に詳しく書かれています。　https://historia.co.jp/archives/48832/

 

なにはともあれ、タイムラインにピンを打ちまくり、以下のようにアニメーションを作成します。

このアニメーション自体には何も特別なことはしていないので、通常のアニメ―ションと全く扱いは同じです。

完成したものを再生してみると…？

狙い通り、雲から現れた猫ちゃんがゲーミング集中線を伴いながら暴れ、最後には儚く消えていきます。

遂に完成です！なんだこのアニメーション！

 

8　まとめ

お疲れ様でした。

みなさんの手元にふざけたマテリアルとアニメーションが残ったと思うと心苦しいです。

ですが、今回のマテリアルには、表現をさらに広げられるようなノードの組み方の考え方を多分に含んでいます。前回のものが基礎的なノードを知るレベル1であれば、今回のものはいわばレベル2です。

特に「ＵＶの拡縮と移動」「色を情報として扱う」「同じ要素を時間差で足し合わせてループさせる」「マスクや色の最終的な足し引き」などは、かなり汎用的なのではないでしょうか。

UIデザイナーさんのマテリアルでの表現が広がるような足がかりになれば幸いです。

それでは、よいマテリアルライフを！