UMGでImageパーツを利用する際に、テクスチャではなくマテリアルをセットすることができます。このマテリアルにパラメータを仕込んでおいてアニメーションしようと思ったときどうしますか？
普通のブループリントだと、タイムラインノードが使えますが、UMGには独自のタイムラインしかありません。アニメーションのキーが打てるのは限られた値だけです。
今回ちょっとした小技を紹介します。以前の記事でトランジションを再現したのですが、これを応用します。
このときはEventTickを使って値を計算しアニメーションを行っていました。今回もEventTickを使うのですが、UMGのアニメーションを利用します。
では準備から。
トランジション用のマテリアルを用意します。
UMGで使うので、マテリアルドメインはUser Interfaceに切り替えます。
アニメーションさせるのはOpacityになるので Final Color には何か適当な画像をつなぎます。今回は前回の記事で作った艦これチックなやつをつないでみました。
最終はこうなります。
下のOpacityにつないでいる部分は拡大すると、
これでマテリアルは完成です。
次に背景テクスチャ。
何でもいいので適当な絵を一枚用意してコンテンツブラウザにインポートします。
次にWidgetを用意します。
インポートしておいた背景テクスチャをUMGのキャンバスに配置します。
配置は、先にCommonパーツの Image を置いて、
Detailsタブの Appearance ＞ Brush＞ Image のところで、背景テクスチャをセットするだけです。
続けて、背景テクスチャと同じ大きさの Image を手前に重ねておきます。
Z Order の値は背景よりも大きい数字にします。
先に用意しておいたマテリアルをセットします。
さて、ここからが今回の肝になります。
もう一つ Image をキャンバスに配置します。
このパーツの Visibility設定を Hidden にします。
描画しないので、サイズやポジションは適当でOKです。何らかの拍子にうっかり現れたら困るという心配性の方は、サイズをゼロにしたり、キャンバスの外に置くといいと思います。
このパーツには Ghost と名付けることにします。
Ghostにアニメーションを付けます。
キーは、Color And Opacity の Alpha に打ちました。
値は、 0.0 → 1.2 です。
UMGの編集はここで終了して、Graphモードに移ります。
まず Event Construct でダイナミックマテリアルを取得して変数化しておきます。
Image_Iris は、キャンバスに配置した背景じゃない方の Image です。頑張って作ったマテリアルがセットされている方です。
次に、EventTickにつなぐノードですが、↓のようになります。
賢明な読者諸君ならもうお分かりですね。
非表示であるGhostに付けたアニメーションの状態をゲットして、別のところに横流ししています。これでアニメーションキーを打てないマテリアルアニメーションでもなんとかなるというわけです。
最後にアニメーションを再生すれば動き出します。
今回は、Add to Viewport のタイミングで再生されるようにしました。
さっそく表示を確認するために、レベルブループリントから表示してみます。
まず Create Widget して、 Promote to Variable して変数化。
Inputイベントに Add to Viewport と Remove from Parent をつないでいます。
Pressed と Released につないでいるので、Kキーを押している間は表示して、指を離すと消えるようになってます。
うまくいきました。
コッソリとパーツが増えますが、ややこしい計算が無いので調整しやすいと思います。
いろいろ応用してみてはいかがでしょうか。
