UE4にはUIやHUD(Head Up Display)といったものを作成するための仕組みが色々とありますが、現在最もホットな作成方法はUnreal Motion Graphics、通称UMGでしょう。
UMGは現在も日々改良が行なわれており、とても高機能なUI作成ツールとなっています。
今回はそのUMGを使って、黒画面のフェードを実装してみたいと思います。
まずは画像を用意
黒画面を作るための画像を用意しておきます。
今回はペイントで10秒ほどかけて作成しました。
サイズは気にしていません。小さくても拡大すればいいので、これで十分です。
ちなみにテクスチャーサイズが2の累乗になっていない場合、警告がだされますが、今回は無視しても問題はありません。
作成できた後はこのテクスチャーをUE4へインポートしておきます。
Widgetブループリント
UMGを作成するためには新規アセットの作成で、"Widgetブループリント"と呼ばれるものを作成します。新規アセットの中のユーザーインターフェースの中にあります。
名前は適当でいいですが、今回は"Blackboard_Widget"としました。
作成した後はそのままダブルクリックで開きます。
このような画面になっていればOKです。右上にデザイナーとグラフとありますが、当面はデザイナー画面の方で作業をします。
解像度の設定
デザイナー画面の右上の方にResolutionというリストボックスボタンがありますので、これを押して今想定している解像度を選びます。
この解像度に合わせて実際にWidgetが配置されていきます。
Widgetの配置
解像度が選べたら次はパレットと呼ばれるパネルから、実際にWidgetを選択し、配置していきます。今回は"Common"の中から、単純な"Image"を配置します。
Imageを配置すると白い矩形が現れます。これが配置した直後のImage Widgetです。
これを選択した状態で右の詳細パネルをみます。
詳細パネルの中にある、"Appearance"の中の"Brush"を開きます。その中にImageが選択できるようになっているので、ここで黒テクスチャーを選択します。
これでImageに黒テクスチャーを貼り付けることができました。
あとは自由に拡大するなりして、画面ピッタリに収まるようにしてください。
ゲーム中に表示させる
それでは実際にゲーム中に表示させてみましょう。表示させるだけなら本当に簡単です。まずはレベルブループリントを開きましょう。
レベルブループリントで"Create Widget..."というノードを選択して、引数Classにさっき作成したWidgetブループリントを選択します。
そしてReturn Valueピンを引っ張り、そのままドロップさせて、"Add to Viewport"というノードに繋ぎます。以下のようになればOKです。
この状態でゲームを実行すると、きっとゲーム画面が真っ黒になるはずです。
アニメーションの作成
ここからアニメーションを作成していきます。もう一度Widgetブループリントの方に戻ります。
アニメーションを作成するには、まず左下のAnimationsパネルの中にあるNewというボタンを押してアニメーションを作成します。今回は"Fadein"と"Fadeout"という2種類のアニメーションを作成します。
作成したアニメーションを選択しておきます。その状態で、Appearanceの中の"Color and Opacity"というプロパティの横にある◆と+を重ねたようなアイコンがあるので、それをクリックすると、ウィンドウ下のタイムライン内にキーフレームが打たれます。
このキーフレームの値は打たれた時のプロパティ値が反映されますので、値を調整した後にこのアイコンを押すといいでしょう。当然ながら、このアイコンがないプロパティに関しては現段階では調整できない項目となります。
この調子でタイムラインの0秒から1秒にかけて半透明化させるように2つのキーフレームを設定します。以下のような設定になればOKです。
今回はFadeinでしたが、Fadeoutの方には逆に透明の状態から元に戻してあげるようなキーフレームを設定してあげれば、フェード用のアニメーションは完成です。
タイムラインの操作は若干クセがあります。上下の黒枠部分でしかホイールや右クリックしながらスクロールができなかったりしますので、操作に混乱しないよう気をつけてください。
アニメーションの再生
アニメーションの再生にはブループリントを使って制御することになります。本来であればWidgetのグラフモードを使うことにより、様々な制御が行なうことができるのですが、今回は単純にキーを押すたびにフェードイン、フェードアウトを行なうようにレベルブループリントに組み込んでみました。
Fキーを押すたびにフェードインとフェードアウトが交互に行なわれます。Create WidgetのReturn Valueから自分が持っているFadeinとFadeoutのアニメーション情報を引っ張りだし、そのままWidgetが持つアニメーションをPlay Animationで再生させています。FlipFlopは処理が来るたびに相互に呼び出しが切り替わってくれるので、トグル処理に便利です。
上手くいくとこんな具合でフェードができるように。
※gifなのでかなり遅いですが、実際はもっと滑らかです。
このようにUMGを上手く使うことによって簡単に2D画像を扱ったり、アニメーションをさせたりといったことができます。
まだ設定できない部分も多く、使い勝手としてはこれからですが、一切コードを書かずにUIのイベント処理ができるというのはとても大きいことだと思います。
