ドラゴンクエストIII風のメニューUIをゲームパッドで操作する

前回の記事の続きです。ドラゴンクエストIII風のメニューUIをゲームパッドで操作する方法。

メニューUIの作成は前回の記事↓を見てください。
グリッドパネルを使ってドラゴンクエストIII風のメニューUIを作成 | 経験値0からのUE5

このメニューUIをゲームパッドで操作できるようにします。
単純なボタンフォーカスではなく、カーソル表示があるのがポイントです。

中級者以上向けの内容です。初歩的な説明は省きます。

入力アクションの設定

メニューを開くボタンとキャンセルボタンを設定します。
決定ボタンは設定せずともデフォルト設定でAボタンが決定です。

コンテンツブラウザで右クリックして入力 > 入力アクションを選択。
名前はIA_Menuにします。
IA_Menuを開き、アクション > Trigger when Paused にチェックを入れます。
これはゲームがポーズ中でも入力を有効にするものです。

IA_Menuを複製して、名前をIA_Cancelにします。

入力マッピングコンテキストに追加

入力マッピングコンテキスト(IMC)を開く。
サードパーソンテンプレートの場合、IMC_Defaultです。

Mappingsの+をクリックして、IA_MenuとIA_Cancelを追加します。

ボタン設定は、
IA_MenuがゲームパッドYボタン
IA_CancelがゲームパッドBボタン

プレイヤーコントローラーの編集

使用しているBP_プレイヤーコントローラーを開きます。
サードパーソンテンプレートの場合、BP_ThirdPersonPlayerControllerです。

メニューの開閉

■変数の追加
MenuOpen? – Boolean
メニューが開いているかどうかの確認。

■イベントグラフの編集

・ウィジェットを作成した後、Return Valueから変数に昇格し、WBP_HUD_Refを作成しています。
・EnhancedInputAction IA_MenuはCompletedから実行ピンを繋いでいます。これはYボタンを離した時に実行されるようになっています。
ここをStartedにしてしまうと、Yボタンでメニューを開いた直後にYボタンの入力を検知してメニューを閉じてしまう場合があります。Completedなら、その問題はありません。

インプットモードをUI Onlyにしない理由は、UI OnlyにするとIA_MenuやIA_Cancelが無効になってしまうからです。
さらに拡張してメニュー画面でXボタンやLB/RBボタンなどを使いたくなった場合も同様ですから、Game And UIの方が使いやすいです。

WBP_HUDの編集

グラフ

■変数の追加
FocusNumber – Integer
・現在フォーカスされているボタンの番号。この番号を利用して、対応するカーソルを表示、それ以外を非表示にします。

■イベントグラフの編集

・メニューを開いた時、「どうぐ」ボタン(Button_Item)をフォーカスします。FocusNumberは0、デフォルトではVisibilityがHiddenですからVisibleにする。
・カーソルとボタンの配列を作成します。順番を間違えないようにしましょう。「どうぐ」「じゅもん」「そうび」「とくぎ」「おもいで」「さくせん」の順番で0～5番の番号が割り当てられます。

デザイナー

Button_Itemを選択し、詳細のナビゲーション > 左 > カスタム > 関数を作成 を選択。

これは「どうぐ」ボタンがフォーカスされている時、方向キー左を入力すると次にどのボタンをフォーカスするかの設定です。
「どうぐ」ボタンで方向キー左を押してもフォーカスを変える必要はないのですが、ここで作成する関数は上下左右すべてのボタンに対応したものになります。

■関数を作成
・「どうぐ」はFocusNumberが0です。例えば「どうぐ」を選択している時に方向キー下を押した場合、次に選択したいのは2の「そうび」です。
EUINavigationでスイッチのDownの実行ピンの先を見ると、現在のFocusNumberが0であった場合、+2する設定になっています。これにより2の「そうび」を選択させることができます。
・カーソルの表示と非表示は、まず全てのカーソルを非表示にします。その直後に現在のFocusNumberに対応したカーソルを表示させています。