21.

UE5でPCの画面を操作するUIを作る方法

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

ページの作成

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

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

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

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

Unreal Engine 5(UE5)を使用して、ゲーム内でPC画面を再現し、プレイヤーが操作できるインターフェースを作成する方法を詳しく解説します。このUIを実装することで、プレイヤーがゲーム内のコンピュータを操作し、アプリを開いたり情報を閲覧したりする体験を提供できます。

PC画面用のレベルを作成する

まず、PC画面を操作する専用のレベルを作成します。これにより、プレイヤーがPCに触れた際に画面全体をPC操作用のUIに切り替えられます。

UE5の「Level」メニューから新しいレベルを作成し、「PC_Screen_Level」と命名する。

2. PC画面UIのレイアウトを作成

PC画面を表現するために、Widget Blueprintを作成し、デスクトップのようなレイアウトを作成します。

Widget Blueprintの作成

「Content Browser」で新規に「Widget Blueprint」を作成し、適当な名前を付けます(例:「PCUIScreen」)。

UIをレベルに適用する

作成したUIをPC画面レベルに適用し、プレイヤーがPCを操作できるようにします。

1. PC画面レベルの「Level Blueprint」を開く。

2. 「Begin Play」イベントを追加し、「Create Widget」ノードを使用して「PCUIScreen」を作成する。

3. 「Add to Viewport」ノードを接続し、UIを画面に表示する。

4. マウスカーソルを有効化するために「Set Show Mouse Cursor」を設定する。

PC画面のデザイン

PC画面の見た目を再現するために、以下の要素を追加します。

  • 背景画像(PCの壁紙を表現するImage)
  • ウィンドウ(アプリを表現するパネル)
  • ボタン(アプリの起動や操作用)
  • テキスト(情報表示)

ウィンドウの切り替えと操作

PCの画面では複数のウィンドウを操作できるようにするため、「Canvas Panel」を使用してウィンドウを管理します。

ウィンドウの表示・非表示

各ウィンドウ(例:「メール」「ブラウザ」「ファイル管理」)をそれぞれ作成し、ボタンを押すと「Set Visibility」ノードを使って表示・非表示を切り替えます。

ドラッグで移動可能にする

「Draggable」プロパティを有効にし、プレイヤーがウィンドウを自由に動かせるようにします。「On Mouse Button Down」と「On Mouse Move」イベントを活用して、マウスドラッグで移動できるように実装します。

入力フォームやテキスト表示

PCの画面では、テキスト入力や情報表示が求められることが多いため、「Editable Text Box」や「Text」ウィジェットを活用して実装します。

入力フォームの作成

「Editable Text Box」を配置し、ユーザーが文字を入力できるようにします。「OnTextChanged」イベントを使用して、入力内容をリアルタイムで取得することも可能です。

メッセージの表示

チャットやエラーメッセージを表示するには、「Text」ウィジェットを使用し、「Set Text」ノードを使って内容を動的に変更します。

まとめ

UE5では、UMGを活用することでPC画面を再現し、プレイヤーが操作できるUIを作成することが可能です。ウィンドウの切り替えやボタンのインタラクションを追加することで、よりリアルなPC操作を再現できます。ぜひゲーム内のコンピュータ端末として活用してください。

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

ページの作成

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

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

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

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
子ページはありません
同階層のページ
  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. UE5でマップに配置したTargetPointを取得する方法
  36. TargetPointにタグをつけて取得する方法
  37. Spawnしたインスタンスがイベントを実行する方法
  38. 特定の時間ごとに処理を実行する方法
  39. 数値をランダムで出力する方法
  40. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  41. MaxWalkSpeedを変更する方法
  42. しゃがむ動作を導入する方法
  43. キャラクターのアニメーションを設定する方法
  44. 導入済みのプラグインを確認する方法
  45. Motion Matchingの導入と必要なプラグイン
  46. プレイヤーを非表示にする方法
  47. カメラを傾ける角度を制限させる方法
  48. 配列からランダムに重ならない要素を特定の数取得する方法
  49. カメラの映す画面に文字やエフェクトを付ける方法
  50. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  51. プライマリーデータアセットを活用する方法
  52. プレイヤーのHPといった変数を定義する最適な場所
  53. カメラに映った画面をスクリーンショットとして保存する方法
  54. スクショ以外の方法でゲーム内のカメラ映像を保存して再表示する方法
  55. HighResShotを使って画像を保存する方法
  56. HighResShotで保存した画像のファイル名を取得する方法
  57. SceneCapture2DとFrameGrabberの画像保存方法の比較
  58. SceneCapture2Dを使用して画像を保存・取得する方法
  59. HighResShotとTake High Res Screenshotの違い
  60. ゲーム終了ボタンを作成する方法
  61. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  62. 画面上にメッセージを指定された時間表示させる方法
  63. 「シェーダをコンパイル」を短縮する方法
  64. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  65. データベースを活用する方法
  66. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  67. World PartitionとWorld Compositionの違い
  68. オープンワールドテンプレートとは?
  69. ポーンをスポーンさせても視点を切り替えない方法
  70. キャラクター同士がすり抜けてしまう問題の解決方法
  71. キャラクターの外見を動的に変更
  72. World Partitionでインスタンスが「アンロード済み」になる問題
  73. データ アセットとデータ テーブルの違い
  74. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  75. エディターのソースコードの自動保存の頻度を高める方法
  76. SpawnActorでSpawn Transform Rotationが反映されない理由