◀ 21.

UE5でマウス操作のUIを作る方法｜カーソル表示と入力モードの設定

▶
編集

Unreal Engine 5（UE5）で、ゲーム画面上のボタンなどをマウスカーソルでクリック操作できるUIを作るには、「プレイヤーコントローラーでマウスカーソルを表示」し、「入力モードをゲーム＋UI（またはUIのみ）に切り替え」たうえで、ウィジェットをビューポートに追加する、という3つの手順が基本になります。この記事では、ゲーム内のコンピューター端末（PC画面）のようなUIを例に、マウスで操作できるインターフェースを作る流れと、つまずきやすいポイントを解説します。

この記事の要点
  • ゲーム中はマウスカーソルが非表示で、入力がゲーム側に渡るのが既定の挙動。UIをマウスで触るには明示的な設定が必要。
  • マウスカーソル表示はプレイヤーコントローラーの「Show Mouse Cursor」をtrueにして行う。
  • 入力モードは「Set Input Mode Game And UI」または「Set Input Mode UI Only」でUI側に入力を回す。
  • UIはWidget Blueprintで作り、「Create Widget」→「Add to Viewport」で画面に表示する。
  • ボタン操作は「On Clicked」などのイベントで受け取る。クリックが効かない時はVisibilityやIs Focusableを確認する。
  • ゲーム操作とUI操作はキー入力をきっかけに入力モードを切り替えて行き来させる。

前提：ゲーム中はマウスカーソルが「見えない・効かない」のが既定

一般的なゲーム向けのプロジェクトでは、プレイ中はマウスカーソルが非表示で、マウスの動きはカメラやキャラクターの操作などゲーム側の入力として消費されるのが既定の状態です。この状態のままウィジェットを画面に表示しても、カーソルが見えず、ボタンをクリックしてもゲーム側に入力が吸われてUIが反応しない、ということが起こります。

そのため、マウスでUIを操作させたいときは、「カーソルを表示する」設定と、「入力をUIに届ける」設定の2つを意識的に行う必要があります。順番に見ていきましょう。

手順1：マウスカーソルを表示する（Show Mouse Cursor）

マウスカーソルの表示・非表示は、プレイヤーコントローラー（Player Controller）が持つ「Show Mouse Cursor」というブール値で制御します。これをtrueにするとカーソルが表示され、falseにすると非表示になります。

ブループリントでは、「Get Player Controller」でプレイヤーコントローラーを取得し、そこから「Set Show Mouse Cursor」ノードを呼び出して、チェック（true）を入れます。Player Controllerのブループリント内で行う場合は、対象をSelfにすればそのまま設定できます。

// 例：BeginPlayなどでカーソルを表示する（疑似コード）

PlayerController = GetPlayerController(0)

PlayerController.bShowMouseCursor = true

カーソルを表示しただけでは、カーソルが見えるようになるだけで、UIへの入力が保証されるわけではありません。次の入力モードの設定と合わせて使うのが基本です。

手順2：入力モードをUIに向ける（Set Input Mode）

「入力モード」は、マウスやキー入力をゲーム側に渡すか、UI（ウィジェット）側に渡すかを決める設定です。プレイヤーコントローラーに対して、主に次のノードで切り替えます。

ノードおおまかな挙動主な用途
Set Input Mode Game And UI入力をUIとゲームの両方が受け取れる状態にするゲーム操作を残しつつUIも触らせたいとき
Set Input Mode UI Only入力をUIのみに向け、ゲーム操作は基本的に止めるメニューや端末操作に専念させたいとき
Set Input Mode Game Only入力をゲームのみに向けるUIを閉じて通常プレイに戻すとき

「Set Input Mode Game And UI」は、UIのオブジェクトとゲームワールドの両方でマウス入力を受け付けられる状態にするためのノードです。これらのノードには、フォーカスを当てたいウィジェットを指定する入力（In Widget to Focus など）や、カーソルをビューポート内にロックするか・カーソルを表示し続けるかといったオプションが用意されている場合があります。挙動の細部やオプション名はエンジンのバージョンによって異なることがあるため、実際の画面で確認してください。

典型的には、UIを開くタイミングで「Show Mouse Cursor＝true」＋「Set Input Mode Game And UI（または UI Only）」をセットで実行し、UIを閉じるタイミングで「Show Mouse Cursor＝false」＋「Set Input Mode Game Only」に戻す、という形にします。

手順3：UIウィジェットを作ってビューポートに表示する

操作対象となるUIは、Widget Blueprint（UMG）で作成します。今回はゲーム内のコンピューター端末のような画面を例にしますが、メニューやインベントリなど、マウスで操作するUI全般に同じ考え方が使えます。

ウィジェットの作成

コンテンツブラウザで新規に「Widget Blueprint」を作成し、分かりやすい名前を付けます（例：「WBP_PCScreen」）。ウィジェットエディタを開き、背景となるImageや、操作用のButton、情報表示用のTextなどを配置して、画面のレイアウトを組み立てます。端末風のUIなら、壁紙にあたる背景画像、アプリを表すパネル、起動ボタン、テキスト表示といった要素を組み合わせるとイメージしやすいでしょう。

画面への表示（Add to Viewport）

作成したウィジェットを画面に出すには、ブループリントで「Create Widget」ノードでウィジェットのインスタンスを生成し、その戻り値（Return Value）を「Add to Viewport」ノードにつなぎます。プレイヤーコントローラーのブループリントや、端末を起動するイベントの中などで実行します。

// UIを開く処理（疑似コード）

ScreenWidget = CreateWidget(OwningController, WBP_PCScreen)

ScreenWidget.AddToViewport()

PlayerController.bShowMouseCursor = true

SetInputModeGameAndUI(InWidgetToFocus = ScreenWidget)

同じウィジェットを何度も生成しないよう、生成したインスタンスは変数に保持しておき、再表示時には使い回す、あるいは閉じるときに「Remove from Parent」でビューポートから取り除く、といった管理をしておくと扱いやすくなります。

手順4：ボタンのクリックを受け取る（On Clicked）

配置したButtonをマウスでクリックしたときの処理は、ボタンの「On Clicked」イベントで受け取ります。ウィジェットエディタでButtonを選択し、詳細パネルのイベント欄から「On Clicked」を追加すると、グラフにイベントノードが生成されます。ここに、ウィンドウの表示切り替えやアプリ起動などの処理をつないでいきます。

端末UIで複数の「ウィンドウ（アプリ画面）」を切り替えたい場合は、各ウィンドウをパネルとして用意し、ボタンの「On Clicked」から「Set Visibility」ノードで表示・非表示を切り替える、といった作りが分かりやすいです。クリックのほかにも、ポインタを乗せたときの「On Hovered」、外したときの「On Unhovered」などのイベントがあり、ボタンの見た目を変化させる演出に使えます。

ゲーム操作とUI操作を切り替える

多くのケースでは、普段はゲームを操作し、特定のキーを押したときだけUIを開いてマウス操作に切り替える、という流れになります。たとえば「端末に近づいて決定キーを押したら端末UIを開く」「閉じるボタンや特定キーでUIを閉じてゲームに戻る」といった具合です。

このとき、UIを開くきっかけのイベントで「カーソル表示＋入力モードをGame And UI / UI Only」を実行し、UIを閉じるイベントで「カーソル非表示＋入力モードをGame Only」に戻します。入力モードを戻し忘れると、UIを閉じたあともゲーム操作が効かない、という不具合につながりやすいので注意します。

つまずきやすいポイント

よくある原因と確認ポイント
  • カーソルが表示されない：プレイヤーコントローラーの「Show Mouse Cursor」がtrueになっているか確認する。設定する対象が、実際にプレイ中に使われているコントローラーかどうかもチェックする。
  • ボタンを押しても反応しない（入力がゲームに吸われる）：入力モードが「Game And UI」または「UI Only」になっているか確認する。Game Onlyのままだとマウス入力がUIに届かない。
  • クリックがUIを素通りして背後に当たる：透明なパネルや上に重なったウィジェットがヒットテストを横取りしていないか、階層（重なり順）を確認する。意図せず最前面に透明要素があるとクリックを奪われる。
  • Visibilityの設定：クリックさせたい要素のVisibilityが「Visible」または「Self Hit Test Invisible」ではなく、「Not Hit-Testable（Self & All）」や「Hidden」になっていると、入力を受け付けない。
  • ボタンが無効化されている（Is Enabled＝false）：無効状態のボタンはヒットテストを吸う一方でクリックイベントを発火しないため、押せないように見える。
  • Is Focusable：ゲームパッドでのフォーカス移動など、フォーカスを前提とする操作がうまくいかない場合は、対象ウィジェットの「Is Focusable」が有効かを確認する。マウスクリック自体はフォーカス設定に依存しないこともあるが、フォーカスまわりの挙動を整える際の確認点になる。

よくある質問（FAQ）

Q. ウィジェットを画面に出したのに、ボタンがまったく反応しません。

多くは「入力モード」と「Visibility」のどちらか（または両方）が原因です。まず入力モードが「Game And UI」か「UI Only」になっているかを確認し、次にボタンや、その親パネルのVisibilityが入力を受け付ける設定（Visible など）になっているかを確認してください。さらに、ボタンの上に透明な要素が重なっていないか、ボタンがIs Enabled＝falseになっていないかも切り分けポイントになります。

Q. UIを閉じたあと、キャラクターが動かせなくなりました。

UIを開くときに入力モードをUI寄り（UI Only など）にしたまま、閉じるときに「Set Input Mode Game Only」へ戻していない可能性が高いです。UIを閉じる処理に、入力モードをゲームに戻す処理と、必要に応じてカーソルを非表示にする処理をセットで入れてください。

Q. マウスカーソルは出るのに、UIの上以外をクリックするとカーソルが消える・操作が乱れます。

入力モードのオプション（カーソルをビューポート内にロックするか、カーソルを表示し続けるか、マウスをキャプチャするか）の組み合わせによって挙動が変わります。UI操作中はカーソルを表示し続ける・マウスをキャプチャしないといった設定にすると安定しやすくなります。オプション名や既定値はエンジンのバージョンで異なる場合があるため、実際のノードの入力ピンを確認しながら調整してください。

まとめ

UE5でマウス操作のUIを作る要点は、「カーソルを表示する（Show Mouse Cursor）」「入力をUIに向ける（Set Input Mode Game And UI / UI Only）」「ウィジェットをビューポートに追加する」という3点に集約されます。あとはボタンの「On Clicked」などのイベントで処理をつなぎ、ゲーム操作とUI操作を入力モードの切り替えで行き来させれば、ゲーム内の端末画面のようなマウス操作UIも無理なく実装できます。うまく反応しないときは、入力モード・Visibility・重なり順・Is Enabled・Is Focusableを順に確認していくと原因を切り分けやすくなります。各ノードのオプションや既定の挙動はバージョンによって差があるため、不確実な部分は公式ドキュメントやエディタ上の表示で確認することをおすすめします。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ～」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは？
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法（UE5）
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは？
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法
2026-06-13 12:42:37 atom 64

人気ページ

最近更新/作成されたページ