この記事はUnreal Engine 4 (UE4) Advent Calendar 2015 24日目の記事です。

-------------------------------------------------------------------------------

３．３．Widgetの制御
３．３．１．ゲームロジックへの繋ぎこみ
UIの大枠ができたのでゲームロジックに繋ぎこんでいきます。
先程作成したバトル関連情報のWidgetをバトル開始時にCreate、AddtoViewportノードで表示します。バトル開始前の演出として黒フェードも併せて表示する必要があるのでここで同じく生成しておきます。生成元は敵とのエンカウントを検知するPlayerControllerクラスで行います。
 

フェード部分はバトル情報よりも上に表示する必要があるため、ZOrder（描画優先度）を予め上げています。


黒フェードのマスク用WidgetもFullscreenサイズで作成、バトルWidgetと同様に画面上部と画面下部で分けて子Widgetを作成し、フェードが終わったら自分でRemoveしています。


このWidgetはバトル開始前にしか使わないため、役目を果したら自分でRemoveするようになっています。

フェード部のマテリアルは以下のようにScalarParameterで制御しています。

画面上部のフェード部


画面下部のフェード部

フェード演出が終了したらバトル関連情報はプレイヤの情報を更新するだけなので、バトル開始時の処理はこれで完了となります。

３．３．２．アニメーションとの連携
①シーケンス連動アニメーション
バトル終了後、リザルト画面を表示してリザルトのオープニングアニメーションを行います。このケースではバトル終了を検知したPlayerControllerクラスからリザルト用のWidgetを生成、アニメーション開始制御行っています。

ここまで処理が長いとUI制御用のサブレベルを用意して処理はそちらに書いてしまっても良いかもしれません...
リザルトのオープニングアニメーションはこんな感じ。


UMGのデザイナ部にあるタイムライントラックを使うことで簡単にアニメーションを作成することができます。オープニングアニメーションは平行移動だけの単純なアニメーションのため、以下のようにCanvasPanelをそれぞれのWidgetの中央に配置し、平行移動させるだけで実現できます。


また、アニメーション開始→アニメーション再生→アニメーション終了→キー入力許可、とシーケンシャルに動かすため、以下のようにOnAnimationFinishedを使用してアニメーションの終了を通知します（ただしこのイベント、アニメーション終了以外にもアニメーション停止イベント(StopAnimation)でも反応してしまうので注意）。


②単独アニメーション
敵にダメージを与えたときなどに表示するダメージUIなど、シーケンシャルに動かす必要のない独立したUIのアニメーションに関する内容です。こんな感じ↓。


（gifファイルって結構重いなぁ）

もちろん表示のトリガイベントは必要なのでそちらは準備します。
このケースではダメージ発生イベントをコントロールするクラス（ATBManagerクラス）からダメージ表示用Widgetを生成しています。被ダメージキャラの中心に表示したいので、キャラクターのケツの位置（SkeltalMeshからBone"Hips"のワールド座標を取得）をスクリーン座標に変換し、Widgetの表示位置を設定しています。


先程と同様にアニメーションの終了をとりますが、ダメージ表示が終わったら用済みとなるためRemove from Parentで消えてもらいます。


アニメーションとの連携の一例を載せてみました。
UIにアニメーションを付けるとよりゲームっぽくなりますね。

（その3）に続く→