読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

UMGでマテリアルアニメーション制御

UE4 Widget UMG マテリアル

UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか?

普通のブループリントだと、タイムラインノードが使えますが、UMGには独自のタイムラインしかありません。アニメーションのキーが打てるのは限られた値だけです。

 今回ちょっとした小技を紹介します。以前の記事でトランジションを再現したのですが、これを応用します。

 

limesode.hatenablog.com

このときはEventTickを使って値を計算しアニメーションを行っていました。今回もEventTickを使うのですが、UMGのアニメーションを利用します。

 

では準備から。

トランジション用のマテリアルを用意します。

UMGで使うので、マテリアルドメインはUser Interfaceに切り替えます。

f:id:hiyokosabrey:20160518231607p:plain

アニメーションさせるのはOpacityになるので Final Color には何か適当な画像をつなぎます。今回は前回の記事で作った艦これチックなやつをつないでみました。

最終はこうなります。

f:id:hiyokosabrey:20160518232342p:plain

下のOpacityにつないでいる部分は拡大すると、

f:id:hiyokosabrey:20160518232704p:plain

これでマテリアルは完成です。

 

次に背景テクスチャ。

何でもいいので適当な絵を一枚用意してコンテンツブラウザにインポートします。

 

次にWidgetを用意します。

インポートしておいた背景テクスチャをUMGのキャンバスに配置します。

f:id:hiyokosabrey:20160518230855j:plain

配置は、先にCommonパーツの Image を置いて、

f:id:hiyokosabrey:20160518233413p:plain

Detailsタブの Appearance > Brush> Image のところで、背景テクスチャをセットするだけです。

f:id:hiyokosabrey:20160518233555p:plain

 

続けて、背景テクスチャと同じ大きさの Image を手前に重ねておきます。

Z Order の値は背景よりも大きい数字にします。

f:id:hiyokosabrey:20160518233810p:plain

先に用意しておいたマテリアルをセットします。

f:id:hiyokosabrey:20160518234400p:plain

 

さて、ここからが今回の肝になります。

もう一つ Image をキャンバスに配置します。

このパーツの Visibility設定を Hidden にします。

f:id:hiyokosabrey:20160518234827p:plain

描画しないので、サイズやポジションは適当でOKです。何らかの拍子にうっかり現れたら困るという心配性の方は、サイズをゼロにしたり、キャンバスの外に置くといいと思います。

このパーツには Ghost と名付けることにします。

Ghostにアニメーションを付けます。

キーは、Color And OpacityAlpha に打ちました。

f:id:hiyokosabrey:20160518235614p:plain

値は、 0.0 → 1.2 です。 

 

UMGの編集はここで終了して、Graphモードに移ります。

まず Event Construct でダイナミックマテリアルを取得して変数化しておきます。

f:id:hiyokosabrey:20160519000409p:plain

Image_Iris は、キャンバスに配置した背景じゃない方の Image です。頑張って作ったマテリアルがセットされている方です。

 

次に、EventTickにつなぐノードですが、↓のようになります。

f:id:hiyokosabrey:20160519001103p:plain

賢明な読者諸君ならもうお分かりですね。

非表示であるGhostに付けたアニメーションの状態をゲットして、別のところに横流ししています。これでアニメーションキーを打てないマテリアルアニメーションでもなんとかなるというわけです。

 

最後にアニメーションを再生すれば動き出します。

今回は、Add to Viewport のタイミングで再生されるようにしました。

f:id:hiyokosabrey:20160519001700p:plain

 

さっそく表示を確認するために、レベルブループリントから表示してみます。

f:id:hiyokosabrey:20160519002054p:plain

まず Create Widget して、 Promote to Variable して変数化。

Inputイベントに Add to Viewport と Remove from Parent をつないでいます。

Pressed と Released につないでいるので、Kキーを押している間は表示して、指を離すと消えるようになってます。

 

f:id:hiyokosabrey:20160519002608j:plain

f:id:hiyokosabrey:20160519002736j:plain

うまくいきました。

コッソリとパーツが増えますが、ややこしい計算が無いので調整しやすいと思います。

いろいろ応用してみてはいかがでしょうか。