読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

Widgetでメニューを作ってみる 3

UE4 Widget UMG UI

前回で一応完成ということにしようかと思ってましたが、

カーソル(見た目にハイライトされた状態)が移動するようになったら、

次はやっぱり「決定」できないとメニューぽく無いということで、仕上げていきます。

 

まずは子Widgetの仕込みから。

決定演出を追加します。

f:id:hiyokosabrey:20151229195017p:plain

 関数から呼び出せるようにしておきます。

f:id:hiyokosabrey:20151229195231p:plain

 前回の記事同様、バッティングを意識して動いてそうなアニメーションを先に止めます。

これで子Widgetは編集は終了です。

 

次は、親Widgeのターン。イベントディスパッチャーを使います。

大雑把ですが『イベントを発行するもの』という意味だそうです。

MyBlueprintタブの中に Event Dispatchers という項目があるので、すぐ横の黄色いボタンを押すとイベントディスパッチャーを作成できます。

f:id:hiyokosabrey:20151229195655p:plain

選んでいるメニューのIndex番号を通知したいので returnIndex という名前にしました。

このEvent Dispatcher は引数を持たせることができます。

 DetailsタブのInputsの項目に Newボタンがあるので押すと追加できます。

f:id:hiyokosabrey:20151229200755p:plain

これイベントディスパッチャーの作成は完了ですが、

 このまま続けるとエラーが出るので、ここでいったんコンパイルしておきます。

 

次に決定ボタンを押されたときに呼ばれる関数を用意します。

f:id:hiyokosabrey:20151229202932p:plain

ここにイベントディスパッチャーを呼ぶためのノードをつなげます。

作ったイベントディスパッチャーをグラフ内にドラッグ&ドロップして、Callを選択します。

f:id:hiyokosabrey:20151229203155p:plain

f:id:hiyokosabrey:20151229203205p:plain

これを一番最後につないで、引数に選択中の値を渡してやります。

f:id:hiyokosabrey:20151229202249p:plain

Widgetは編集完了です。

 

次はレベルブループリントに戻って決定ボタン操作を受け付けるようにします。

前回の記事でゲームパッド操作用にTickイベントでのフローを紹介しましたので、

そこに追加します。Aボタンなら、GamePad FaceButton Bottom をチェックします。

f:id:hiyokosabrey:20151229203726p:plain

つぎに

イベントディスパッチャーから発行されたイベントを受け取れるようにバインド(Bind)します。

 親Widgetを Create Widget してるノードの ReturnValueピンから引っ張って、

ワード検索で ”bind” と入力すると、イベントディスパッチャーがヒットします。

f:id:hiyokosabrey:20151229223338p:plain

 バインド用のノードが出てくるので、Add to Viewport ノードとつないだら、

赤い Eventピンからドラッグして、カスタムイベントを選択します。

 この新しく生まれたカスタムイベントは、通常のとは違うので注意。

今回サンプルなので、ひとまずうまく値が取れているか確認するために、PrintStringノードにつないでみました。

f:id:hiyokosabrey:20151229224049p:plain

これで完了です。

実行して確認してみると、決定ボタンを押した部分のIndex値がビューポートに表示されます。

f:id:hiyokosabrey:20151229224805p:plain

動作が確認できたら、最終的にスイッチノードとかで、フローを切り替えればOK。

f:id:hiyokosabrey:20151229225118p:plain

一応これでメニューとしての機能はできました。

 

レベルブループリントは、Widgetを画面に置いたあとは、キー操作のみを管理しています。どの選択項目を選んでいるかとかカーソルの移動がどうだとかは、すべて親Widgetに任せています。なので、決定ボタンを押したら親Widgetの関数を呼び出すだけで、何を選択したかがコールバックとして帰ってくるという仕組みです。

この値を受け取ったら(バインドしているので)、自動的に次の処理に回せます。

また用が済んだWidgetをRemoveすることもできます。

 

・・・

 

この記事どおりに 試してみた方がいらっしゃれば、気付かれたかもしれません。

決定した後のことを考えると、もう少し手を入れる必要があります。

次のフローに遷移すると、当然キー操作の対象を替えないといけないからです。

その辺はまたいずれネタとして扱おうと思います。忘れなければ・・・