◀ 3.

UE5でタイトル画面を作る手順｜Widget BlueprintとOpen Level・Quit Game

▶
編集
この記事の要点
  • タイトル画面は Widget Blueprint（UMG）で UI を作り、専用のタイトル用レベルに乗せて表示する
  • Widget には Canvas Panel を土台にして Text・Button・Image を配置する
  • Start ボタンは OnClicked → Open Level (by Name)、Exit ボタンは Quit Game で実装
  • タイトルレベルの BeginPlay で Create Widget → Add to Viewport でウィジェットを画面に追加
  • Project Settings → Maps & Modes → Game Default Map をタイトルレベルに設定するとゲーム起動時に必ず出る

全体の流れ

UE5 でタイトル画面を作るには、次の 4 つのアセットを順番に作るのが王道です。

  1. Widget Blueprint（UI 本体。例: WBP_TitleScreen）
  2. タイトル用レベル（空の Level。例: LV_Title）
  3. レベルブループリント（タイトルレベルの BeginPlay でウィジェットを表示）
  4. Project Settings でゲーム起動時に LV_Title を読み込む設定

ステップ 1 ─ Widget Blueprint を作る

  1. コンテンツブラウザの空白で右クリック → User Interface → Widget Blueprint
  2. 親クラスは User Widget を選択
  3. 名前を WBP_TitleScreen としてダブルクリックで開く

左上のパレットから Canvas Panel をルートにドラッグ&ドロップで配置します。Canvas Panel はピクセル単位で UI 要素を自由配置できる土台です。

ステップ 2 ─ タイトルと開始ボタンの配置

配置物パレットでの場所役割
ImageCommon背景画像を貼る土台
TextCommonゲームタイトル（例: MY GAME）
Button + 子の TextCommon「Start」「Exit」などのクリック領域
Vertical BoxPanelボタンを縦並びに自動整列したいときの入れ物

各要素はデザイナタブで Anchor（位置基準点）と Alignment（中心調整）を設定すると、画面解像度が変わってもズレません。タイトル文字は中央上、ボタン群は中央下にアンカーするのが一般的です。

ステップ 3 ─ ボタンに機能を割り当てる

Widget Blueprint 上部の Graph タブに切り替えて、ボタンの OnClicked イベントを実装します。

Start ボタン ─ ゲーム本編レベルを開く

  1. デザイナタブで Start ボタンを選択
  2. 右の詳細パネル下部 Events → On Clicked の ＋ を押す
  3. グラフタブに On Clicked (Start_Button) イベントが追加される
  4. その後ろに Open Level (by Name) ノードを繋ぎ、Level Name にゲーム本編レベル名（例: LV_Stage01）を入力

Exit ボタン ─ ゲーム終了

  1. 同じ要領で Exit ボタンの On Clicked イベントを追加
  2. その後ろに Quit Game ノードを繋ぐ
  3. Specific Player ピンには Get Player Controller（Player Index 0）を繋ぐ

ステップ 4 ─ タイトル用レベルを作る

  1. ファイル → New Level → Empty Level（または Empty Open World）
  2. LV_Title という名前で保存
  3. カメラだけの簡素なシーンで OK（背景は Widget の Image で描く想定）

ステップ 5 ─ レベルブループリントで Widget を表示

タイトルレベルを開いた状態で、ツールバー Blueprints → Open Level Blueprint を選びます。

ノード設定
Event BeginPlayレベル開始時に呼ばれる
Create WidgetClass に WBP_TitleScreen を指定
Add to ViewportCreate Widget の Return Value を Target に繋ぐ
Get Player Controller (Index 0)マウス表示の起点
Set Show Mouse Cursor (True)マウスカーソルを表示
Set Input Mode UI Onlyキャラ操作を無効化して UI 専用入力に

これで BeginPlay → Create Widget → Add to Viewport の 3 ノードを繋げばタイトル画面が表示されます。マウス操作とキャラ操作の両立を避けるため、Set Input Mode UI Only を入れておくと事故を防げます。

ステップ 6 ─ ゲーム起動時に必ず表示する設定

編集 → Project Settings → 左の Maps & Modes を開き、Game Default Map と Editor Startup Map を LV_Title に設定します。これで「Play」ボタンや配布版での起動時、必ずタイトル画面から始まります。

仕上げ ─ 見栄えのカスタマイズ

追加要素方法
背景画像Widget の最背面に Image。Brush の Image にテクスチャを設定
BGMレベル BP の BeginPlay で Play Sound 2D
ボタンホバー音Button の Style → Pressed Sound / Hovered Sound
タイトル文字のアニメWidget の Animations タブで Track 追加 → ColorAndOpacity をキーフレーム
続きから / オプション同じ Widget にボタンを追加し、別 Widget をオーバーレイで表示

よくあるトラブル

症状原因 / 対処
ボタンが押せないマウスカーソル非表示 / Input Mode が Game Only。Set Show Mouse Cursor (True) + Set Input Mode UI Only を追加
Open Level でレベルが切り替わらないLevel Name のスペルミス、または対象レベルが Packaging Settings に含まれていない
背景画像がぼやけるImage の Image Size がテクスチャ実寸と違う / DPI スケーリングの影響。Image Size を実寸に合わせる
解像度を変えるとレイアウトが崩れる各要素の Anchor を設定していない。Center / Fill / Corner などを用途別に設定

関連

編集
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-11 13:35:53 T 162

人気ページ

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