UE4 UMGでフェード機能を実装した話

はじめに

UE4のUI用機能であるUMGでフェード機能を実装した話です。
バージョン　4.25.3
UMGのドキュメント

要件

以下の要件を満たした実装を考えます。

• フェード時間を指定する。
• フェード終了時に任意の処理を呼び出す。
• アニメーションで動かす。

それぞれ実装方法を考えていきます。

アニメーション

UMGの機能にあるアニメーションを使います。
https://docs.unrealengine.com/ja/Engine/UMG/UserGuide/Animation/index.html
ここでフェードを使用する際に時間を指定することを考えて、1秒のフェードアニメーションを作成しておきます。
指定した時間でアニメーション速度を変えることで任意の時間のアニメーションにすることができます

フェード時間を指定する

UMGのブループリントでPlayAnimationノードを使用してアニメを再生する際にPlaybackSpeedを指定することで1秒のアニメーションを指定の時間にします。

引数のSecondsを逆数にすることで3秒のとき1/3速度になり、1秒のアニメーションが3秒のアニメーションになります。0.5秒を指定すれば1/0.5で2倍速となり0.5秒のアニメーションになります。

フェード終了時に任意の処理を呼び出す

任意の処理を呼び出す仕組みとしてイベントディスパッチャーが用意されています。
https://docs.unrealengine.com/ja/Engine/Blueprints/UserGuide/EventDispatcher/index.html
UMGのブループリント内にイベントディスパッチャーを作成しておき、各アニメーションのFinishedイベントの際に呼び出しを行います。

イベントディスパッチャーへの割当は、UMGウィジェットを作成した側で行います。

おわり

以上でフェード機能が作成できました。
ゲーム中どこでも実行したい場合はGameModeBaseブループリントでCreateWidgetを行いインスタンスを保持しておくのがいいかもしれません。