UE4 UMGで画面のフェードイン・アウトを実装する

ゲームとって必ず必要な画面のフェードイン・アウトを実装してみます。
とはいえ、色々間違ってる可能性もあるので、参考程度に見ていただければと思います。

・UE4 Unreal Motion Graphicsを使って黒画面フェードを実装する
http://unrealengine.hatenablog.com/entry/2014/11/07/222309

上記、alweiさんのブログを参考にさせていただきました。
ただ、自分はプログラマなので、フェードのアニメーションなどは使わず、
UMGのブループリントを主に実装してみました。

とりあえず、UMGのウィジェットを作成します。

参考にしたブログの方ではImageを使っていましたが、
今回はテクスチャをはらなくても使える「Border」というパーツを使いました。
とりあえず画面いっぱいのサイズになるように「Border」を配置します。

色は何色でもいいのですがとりあえず黒に。
そしてブループリントで扱えるように、詳細の「ブラシ」の「カラー」を変数にバインドします。

カラーの変数は「LinearColor」構造体で「FadeColor」という変数を用意しました。

とりあえずこれで表示の準備は終わったので、ブループリントでフェードの機能を実装します。
こんな感じで変数を用意してみました。

「FadeColor」はフェードイン・アウトの色です。とりあえずは黒に。
「IsFadeIn」はTrueであればフェードイン中。Falseであればフェードアウト中です。
「FadeSpeed」はフェードの速度で、カラーのアルファ値の変化速度です。
「IsEnable」はフェード実行中かどうかのフラグになります。

「IsFadeIn」はEnumにした方がよいかなーと思ったのですが、とりあえずはそのままでいくことにしました。
Enumにすれば「IsEnable」もいらなくなりそうです。

上記の変数を使って組んだフェードイン・アウトのブループリントがこれです。

すごいごちゃごちゃしてますが、要点は以下の感じです。
①「IsEnable」がTrueでなければ何もしない。
②「IsFadeIn」がTrueならフェードインの処理を実行（画面上処理）、Falseならフェードアウトの処理を実行（画面下処理。
③フェードインの処理は「FadeColor」のアルファ値を減らして透明に、フェードアウトは増やして不透明に。
④完全不透明か、完全透明になったらフェードの実行処理を停止（IsEnableをFalseに）

最後に無効化しているノードはテスト用で、フェードインとアウトが交互に繰り返されるようにしてます。
なので実際には要らない処理になります。

次に、フェードインとフェードアウトの開始をコールする関数を作成します。

「SetFade」という関数を作成しました。
フェードの時間とフェードインかアウトかを受け取れるようにしています。
中身は値をセットしてるだけですね。

そして作ったウィジェットをビューポートに接続して実際に使ってみます。

こんな感じに。
ウィジェットをビューポートに接続した直後にフェードインするように関数を呼び出しています。

実行するとこんな感じになりました。

ブループリントからパラメータがいじれるようにしたのでプログラマにはいいかなーと。
カラーも引数で設定できるようにすればホワイトアウトとかもできますね。
トランジションはこんな感じでつくっていくとよいかもですね。

ブループリントについては。結局はアルファ値を増やすか減らすかなので、
もっといい感じにかけそうな気がするのでどうしようか悩み中ですが、
はじめてブループリント組んだにしては上手くいったのではないかと！