ドラゴンクエストIII風のメニューUIをキーボード&マウスでも操作する

前回の記事の続きです。ドラゴンクエストIII風のメニューUIをキーボード&マウスでも操作する方法。

過去記事

  1. グリッドパネルを使ってドラゴンクエストIII風のメニューUIを作成
  2. ドラゴンクエストIII風のメニューUIをゲームパッドで操作する

現時点でもマウス操作で「どうぐ」ボタンらのクリックは可能です。
しかし、マウスでボタンをホバーしてもカーソルは移動しません。
今回はマウスでホバーしたボタンにカーソルもついてくるようにするやり方です。

入力マッピング コンテキスト(IMC)の編集

入力マッピング コンテキスト(IMC)のIA_Menuに対応ボタンを追加します。
Iキーでもメニューを開けるようにしました。

Tabキーがメニュー開閉ボタンとなっているゲームも多いですが、Unreal Engine 5では注意点があります。
Unreal Engine 5のUIモードにおいてTabキーは「フォーカス移動(タブ移動)」に設定されているため、メニューを開く事はできても閉じる操作が正確に反映されない場合があります。
1回目のTabキー→メニューを開くところまでは正確に動作します。
今回、メニューを開くとボタンがフォーカスされる設定になっていますから、Tabキーを押すと「フォーカス移動(タブ移動)」の指示となり、IA_Menuは動作しません。
Tabを使いたい場合、ボタンをフォーカスしない設定にする必要があります。ボタンがフォーカスされていない状態であれば「フォーカス移動(タブ移動)」は無効になり、IA_Menuが動作します。

WBP_HUDの編集

デザイナー画面で階層のButton_Itemを選択し、詳細の イベント > On Hovered 欄の+をクリックする。

イベントグラフ画面に切り替わり、On Hovered (Button_Item)が配置されます。
これは「どうぐ」ボタンにマウスカーソルが合った時のイベントです。

同じ手順で「じゅもん」「そうび」「とくぎ」「おもいで」「さくせん」のOn Hoveredイベントを配置します。

今回はデザイナー画面の階層からOn Hoveredイベントを配置しましたが、グラフ画面の変数からボタンを選択し、詳細のOn Hoveredから配置する事も可能です。
イベントグラフの編集

・各ボタンをマウスでホバーした時にFocusNumberを設定し直して、全てのカーソルを非表示にしてから、FocusNumberに対応したカーソルのみを表示して、そのボタンをフォーカスする。

ホバーした時にボタンの色を変えない

マウスでボタンをホバーすると、ボタンの色がグレーになってしまいます。カーソルが表示されていますからボタンの色を変える設定は不要です。

デザイナー画面の階層で全てのボタンを選択。
詳細の Hovered > Tint A:0.0 にします。

テストプレイ

マウスカーソルでボタンをホバーすると、カーソルも連動するようになりました。
ゲームパッドとキーボード&マウスの両対応です。

コメント

  1. 匿名 より:

    度々、失礼します。いつもありがとうございます。

    「しかし、マウスでボタンをホバーしてもカーソルは移動しません。」

    という部分が少しだけ、できました。

    わたしは、カーソル操作を上下だけの操作にして、
    各ボタンをマウスでホバーした時のイベントグラフに
    関数Do Custom Navigation(Navigation Down)
    関数Do Custom Navigation(Navigation up)をSet VisibilityとSet Focusの間に追加したら、
    マウスの動かし方によりますが、カーソルが一緒についてくるようになりました。

    ただ、さくせん(右下)の項目だけは、カーソルが付いてきませんでした。

    あまりいい方法ではありませんが、試してみてください。

    • 匿名 より:

      すいません、分かりました。

      各ボタンをマウスでホバーした時のイベントグラフに
      関数Do Custom Navigation(Navigation Up)
      関数Do Custom Navigation(Navigation Down)の順番にをSet VisibilityとSet Focusの間に追加したら、
      マウスの動かし方によりますが、カーソルが一緒についてくるようになりました。

    • Keisuko Keisuko より:

      伝え方に誤解があったかもしれません。

      「しかし、マウスでボタンをホバーしてもカーソルは移動しません。」というのは過去2回記事までの話でした。
      今回の記事通りにすると、マウスでホバーしたボタンのカーソルも表示されるようになります。

  2. 匿名 より:

    いいえ、こちらが完全に間違えていました。

    変数Array Cursorのところを変数Array Buttonを使用していたため、動かないだけでした。

    完全にカーソルも一緒に動きます。

    大変失礼しました。

タイトルとURLをコピーしました