UEを学ぶ「タイトル画面を作る_3_遷移時のフェードアウト」
Q&Aで触れられた画面遷移時のフェードアウト処理について作っていきます。
タイトル画面に文字を表示したときと同様に
コンテンツブラウザ上で
右クリック＞ユーザーインターフェース（一番下）＞ウィジェットブループリント
でUIを追加します。
名称は「UMG_FadeIn」。
（ウィジェットは「UMG_〇〇」ってつけて管理していくみたいですね。
これはウィジェットが元々Unreal Motion Graphics UI デザイナ (UMG) という
機能名であることに由来しているようです）
ウィジェットを開き、パレットから「Border」を検索し
ドラッグ＆ドロップで画面に追加。
詳細＞アンカー
のパラメーターを
位置X 0、位置Y 0、サイズX 1920、サイズY 1080
として、画面サイズぴったり覆うような真っ白い画像が作成されます。
その後、
階層＞[UMG_FadeIn]＞[CanvasPanel]＞[Border]
が選択された状態で
アニメーション＞「＋アニメーション」というボタンを押します。
すると「NewAnimation」というアニメーション設定が追加されるので
FadeOutと名付けて、フェードアウトアニメーションを作りましょう。
（今更なんですが、FadeInを作っているのにアニメーションはFadeOutって変ですね。
本来はウィジェット名もFadeOutにするのが正しいんでしょうね…）
アニメーションを選択すると「タイムライン」というタブが表示されます。
タイムライン＞「＋トラック」というボタンを押し「Border」を選択することで、
「Borde_0」というのがトラック上に出現します。
さらに「Borde_0」の右部にある「＋トラック」を選択し「BrushColor」を追加。
「BrushColor」を展開すると、
Borderの色設定をRGBAで行える項目があるので
0秒時点をRGBAすべて0にして「透明」を設定。
右側のタイムライン上にある縦棒を動かしていき
1秒時点の色をRGBが0、Aが1に設定することで、
1秒間かけて透明から真っ黒に変化するアニメーションを作ることができました。
次に、これを「UIを画面に追加したタイミングで再生する」プログラムを設定します。
画面右上から「グラフ」をクリックしてプログラム表示に切り替えて、
「PlayAnimation」ノードを追加します。
※「FadeOut」は
マイブループリント＞Animations
内にあるので、ドラッグ＆ドロップし「GetFadeOut」を選択します。
追加した「FadeOut」はInAnimationに接続。
次に、Titleに組み込みます
ブループリント＞レベルブループリントを開く
などで、Titleのブループリントを開き
Classにはさっき作った「UMG_FadeIn」を指定し、
ブランチから接続する。
（ちなみにノードの切断はAlt＋左クリック）
これで、
「特定のキーを押すと、フェードアウトが生成される」
という一連の流れができます。
「ReturnValue」からドラッグし
「AddToViewport」ノードを生成。
（他の接続穴からだとちゃんと検索されない？ので、ReturnValueから引っ張って
Viewportで検索するのがオススメ）
更に、フェードアウト仕切るのを待って遷移してほしいため
「Delay」ノードを追加し、値を1秒に。
（Dキー＋左クリック で追加可能）
これで、1秒かけて画面が暗くなり、1秒経過と同時に遷移が起こる、
という挙動になるわけですね。
ちなみに遷移後のFadeInは、遷移先の画面で作る必要があるみたいです。
