PaperSloth’s diary

主にゲーム開発関連についての記事を書きます。

UE4 Fade処理について

環境

UE4.19.2


FadeIn, Outについて

FadeIn:画面が徐々に明るくなる演出
FadeOut:画面が徐々に暗くなる演出

Level切替時やカットシーン等色々な場面で使用されますね。



UE4での表現方法について

Widgetのアニメーションを使用して全画面表示の画像で表現する
お手軽に表現できますが、都度Widgetに埋め込むのが面倒。
別パーツとして分けてUser Widgetにした場合だとCallback関数の登録が面倒。
SoundFadeを別途組む必要がある。

参考資料
Widgetでのアニメーションの作成方法が書かれています。
UE4 Unreal Motion Graphicsを使って黒画面フェードを実装する - Let's Enjoy Unreal Engine


②CameraFade関数を使用
・Set Manual CameraFade
・Start Camera Fade関数がある
お手軽に使えるがWidgetのアニメーションと違い終了時のコールバック関数の登録がない。
また、自前のPostProcessと相性が悪い場合がある。

参考資料
StartCameraFadeの引数の詳細な情報が書かれています。
UE4 シンプルな画面のフェードイン・フェードアウト(Start Camera Fade) 凛(kagring)のUE4とUnityとQt勉強中ブログ


FunctionLibraryに登録してFade終了後のCallback関数も登録可能にする

さて、今回の本題です。

①シンプルなFade
先ずはシンプルに組んでみましょう。
簡単なFadeであればこれで十分でしょう。
f:id:PaperSloth:20180613223526p:plain

②FadeIn, Outの切り替え
続いて、FadeIn, Outを切り替えれるようにします。
IsReverseなどのFlagを用意しても良いですが
UMGで用意されている列挙型(EUMG SequencePlayMode)が名前も分かりやすいので今回はこちらを使用します。
f:id:PaperSloth:20180613224637p:plain
f:id:PaperSloth:20180613223906p:plain

③Callback関数の登録
さて、これまでは通常通りのCameraFadeでした。
次にFade終了時のEventを登録できるようにします。
下図のようにSet Timer by Eventを使用します。
f:id:PaperSloth:20180613224856p:plain
f:id:PaperSloth:20180613224232p:plain

しかし、FunctionLibraryからはSet Timer by Eventを呼び出せないため
他のBlueprintでノードを作成して、コピペします。
Event引数も通常はdelegate変数の登録ができないため、関数の入力ノードにEventピンをドラッグします。
この方法は少々ハック的なやり方でいつ動作しなくなるかは保証ができません。

④補足:Delayを使用しない理由について
MucroLibraryにしてDelayを使わない理由についてです。

先ずはMacroLibraryでDelayを使用して作った例が下図です。
Delayノードを使用することでシンプルにFade終了時のタイミングを取得できます。
f:id:PaperSloth:20180613224333p:plain

さて、使用しない理由についてですが
例えばゲーム内でスローモーションや早送りがあった場合にDelayノードだった場合
処理速度の変化の影響を受けてしまい、意図した挙動にならないことがあると思います。
そういった問題を回避するために今回はSet Timer by Eventを使用するようにしています。

参考資料
時間変化の影響を受けるノード等について書かれています。
UE4小ネタ : 制限時間の実装方法を色々と - ぼっちプログラマのメモ


まとめ

Fadeについては以上です!
Fadeはおおよそどんなゲームでも使うのではないでしょうか?

今回紹介した方法に限らずプロジェクトに合った便利機能を作っていきましょう!