【UE4】UMGで画像のアニメーションによるフェード処理を実装する
UMGでUIを表示した際、フェードイン、フェードアウト演出をカメラフェードで行っているとUIはフェード演出されない事に気が付きます。今回はカメラフェードからUMGで画像のアニメーションによるフェードイン、フェードアウトに切り替えます。
ウィジェットにフェード用画像を追加する
今回は黒いフェードイン、フェードアウトを実装するため、UI表示用に作成したウィジェットにフェード用黒画像を追加していきます。
ウィジェットの作成やUIの表示物の追加に関しては下記の記事に記載しています。
ー 【UE4】UMGでUIの制御、戦闘中のUIを表示する ー
ウィジェットのCanvas Panelに黒フェード用画像を追加するのですが、注意する点があります。
Canvas Panelの中にさらに一つ子のCanvas Panelを作り、今まで表示していた各UIの表示物は子のCanvas Panelの方に移します。
その上で黒フェード画像を追加し、全ての表示物の上に来るようZOrderの値を子のCanvas Panelより大きい値にします。
このようにした理由として、一つのCanvas Panel内でZOrderによる表示物の優先順位を制御した場合、上手く表示順序の制御ができないからです。自分の場合はどんなに黒フェード画像のZOrder値を大きくしても表示物が一つだけ必ず黒フェード画像の上に飛び出してきました。
この現象は公式フォーラムにも投稿があり、どうやらCanvasと子CanvasによるZOrderの制御が望ましいようです。
ー 「Does UMG ZOrder even work?」の投稿へ ー
子キャンバスとZOrderの設定ができれば、黒フェード用画像が全ての表示物を覆い隠してくれます。
フェードイン、フェードアウトのアニメーションを追加
黒フェード用画像のアルファをキーフレームによるアニメーションで値を変更していき、フェードインとフェードアウトを実装してみます。
ウィジェットのアニメーションタブにある「+アニメーション」ボタンを押して、フェードイン、フェードアウト用のアニメーションを作成します。
作成したアニメーションを選択して、「+Track」ボタンを押して黒フェード用画像を選択します。
黒フェード用画像をTrackに追加したら名前横の「＋」を押して「Color and Opacity」を追加します。
後はタイムラインに好きな間隔で「A」の値のキーフレームを追加して、黒フェード用画像が徐々に消えたり、表示されたりするのを確認します。
作成したウィジェットアニメーション呼び出し
ウィジェットに作成した黒フェード用画像のフェードイン、フェードアウトアニメーションをブループリントで呼び出して使用します。
アニメーションの再生にはウィジェットをターゲットとした「Play Animation」で行います。Play AnimationのIn Animationに作成したウィジェットアニメーションをセットします。
UMGの黒フェード用画像のアニメーションによって、UIも含めたフェードイン、フェードアウトができるようになりました。
