【UE4】UMGのフェードアウト
概要
今回はUMGを用いて画面に表示したウィジェットのフェードアウトを実装していきます。質問や、これ以外に効率の良い方法があればコメント等にて教えていただけたら幸いです。
今回できるようになること
UMGを用いて画面に表示したウィジェットを自然な感じで消す機能を実装します。完成すると下のような動作になります。
実装手順
①ウィジェットブループリントの作成
今回の例では、WASDで移動することを伝えるメッセージをUMGを用いて表示します。
まずはユーザーインターフェイス->ウィジェットブループリントを選択します。
次にUIのレイアウトを作成していきますがこの際、下図のように全ての要素をまとめてCanvasPanelの子要素とし、そのCanvasPanelをBoderの子要素とします。(Borderは1つの子要素しか持てないため)
Borderの大きさは画面全体と同サイズ(1920x1080等)に、アピアランス->Brush Color->Aの値は0.0に設定します。
その他のレイアウトは皆さんの自由ですが今回は下図のようにしました。
②フェードアウトのアニメーション設定
今回は表示されてから4秒後にフェードアウトするものを想定します。
アニメーションウィンドウからアニメーションを新規作成します。ここでは名前をFadeOutにしました。
次に、詳細ウィンドウにてコンテンツ->Content Color and Opacity->Aの横にある+ボタンを押します。
タイムラインウィンドウにてアニメーション範囲を0.00~4.50にし、4.00と4.50にContent Color and Opacity->Aのキーを打ちます。4.00では1.0のまま、4.50では0.00になるように設定します。
③レベルブループリントから呼び出し
最後に作成したUMGをレベルブループリントから呼び出します。まずはBeginPlayからウィジェットを作成、Classには先程作成したウィジェットブループリントを指定します。
次に、Add to Viewportノードに繋いで画面に表示します。
そして下図のようにReturn Valueから先ほど作成したFadeOutをgetしてPlay Animationへと繋ぎます。
最後に、フェードアウトするまでの時間4.5sのDelayを挟んでRemove All Widgetsにより呼び出していたウィジェットを削除します。
ここまでできたら、最初に貼ったようにメッセージ等がフェードアウトするはずです。
