5.

UE5でマウスを動かせるUIを作成する方法

ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!

Unreal Engine 5(UE5)では、デフォルトではゲームプレイ中にマウスカーソルが非表示になり、UIを操作できません。しかし、設定を変更することで、マウスを動かせるUIを作成することが可能です。本記事では、その方法について詳しく解説します。

1. プロジェクト設定の変更

まずは、UE5のプロジェクト設定を変更し、マウスカーソルを表示できるようにします。

手順は以下のとおりです。

1. Unreal Engine 5を開き、「Edit」メニューから「Project Settings」を選択。

2. 検索バーに「Mouse」と入力し、「Mouse Capture Mode」を「No Capture」に設定。

3. 「Start with Mouse as UI Only」を有効にすることで、ゲーム開始時にマウスカーソルを表示可能にする。

2. プレイヤーコントローラーでの設定

ブループリントの「Player Controller」を使用して、ゲーム内でマウスを有効化することもできます。

手順:

1. Unreal Engine の「Blueprints」フォルダで、新しい「Player Controller」ブループリントを作成。

2. 「Event Begin Play」ノードを追加。

3. 「Set Show Mouse Cursor」ノードを追加し、「Show Mouse Cursor」をTrueに設定。

4. 「Set Input Mode UI Only」ノードを追加し、ターゲットを「Self」に設定。

3. ウィジェット(UI)の作成

次に、UE5の「UMG(Unreal Motion Graphics)」を使用して、UIを作成します。

手順:

1. 「User Interface」から「Widget Blueprint」を作成。

2. キャンバスにボタンやテキストを配置。

3. 「Graph」タブで「Event Construct」を追加し、「Set Input Mode UI Only」ノードを接続。

4. 「Add to Viewport」ノードを使って、ウィジェットを画面に表示する。

4. マウス操作をスムーズにする設定

マウスの挙動を調整することで、より快適なUI操作が可能になります。

おすすめの設定:

1. 「Show Mouse Cursor」を有効化。

2. 「Input Mode UI Only」を設定して、マウスが常にUI操作を優先するようにする。

3. カーソルが意図しない場所に飛ばないように「Lock Mouse to Viewport」を設定。

まとめ

本記事では、UE5でマウスを動かせるUIを作成する方法について解説しました。以下の手順を実施することで、簡単にマウスを使用したUIを実装できます。

1. プロジェクト設定を変更してマウスを有効化。

2. プレイヤーコントローラーでマウス表示の設定を行う。

3. UMGを使用してUIを作成し、マウス操作を可能にする。

4. マウス操作の最適化を行い、スムーズなUI体験を実現する。

この方法を活用して、快適なUIを設計してみてください!

ページの作成
テンプレートを更新

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
同階層のページ
  1. ブループリントでWidgetに引数を追加する方法
  2. Blueprintで特定のクラスのWidgetを閉じる方法
  3. Widgetの前後関係を設定する方法
  4. ウィジェットの画像を選択するとウィジェットを閉じる方法
  5. マウスを動かせるUIを作成する方法
  6. ウィジェットのボタンに文字を書く方法
  7. BPでウィジェットのボタンを選択できなくする方法
  8. ウィジェットの背景ブラーについて
  9. リストビュー (ListView)
  10. EntryWidgetClass
  11. ウィジェットで一部の領域を部品化して再利用する方法