UE5でメニュー画面を作成・表示する方法｜UMGとAdd to Viewport

▶

この記事の要点

UE5 のメニュー画面は ウィジェットブループリント（UMG）で UI を作り、Create Widget → Add to Viewport で表示する
ボタンの OnClicked イベントに Open Level / Quit Game / Remove from Parent を結線して、開始・終了・閉じるを実装
Set Input Mode UI Only / Game and UI / Game Only と Show Mouse Cursor で入力モードとカーソル表示を切り替える
メインメニューは 専用レベルに置き、Open Level でゲーム本編へ遷移するのが定番構成
ポーズメニューは Set Game Paused (true/false) で時間を止めるのがセオリー

UE5 のメニュー画面の基本構成

Unreal Engine 5（UE5）でメニュー画面を作るときは、UMG（Unreal Motion Graphics）と呼ばれる UI システムを使います。具体的には ウィジェットブループリントで見た目を作り、レベルブループリントやプレイヤーコントローラーから Create Widget → Add to Viewport の流れで画面に表示します。

本ページでは、もっとも頻出するメインメニュー・ポーズメニューの作り方を順を追って解説します。

1. ウィジェットブループリントを作る

コンテンツブラウザで右クリック
ユーザーインターフェース → ウィジェットブループリント
親クラスは User Widget を選択
名前を WBP_MainMenu のように分かりやすく付ける

ダブルクリックでウィジェットエディタが開きます。デザイナタブで UI を配置していきます。

2. レイアウトの基本

要素	役割
Canvas Panel	ルートの自由配置パネル（デフォルト）
Vertical Box / Horizontal Box	ボタンを縦／横に並べる
Button	ボタン。OnClicked イベントを持つ
Text Block	テキスト表示。ボタン内の文字にも使う
Image	背景画像 / アイコン
Spacer	余白

メインメニューなら、Canvas Panel の中央に Vertical Box を置き、その中に「PLAY」「OPTIONS」「QUIT」のボタンを縦に並べるのが定番です。

3. ボタンのイベントを設定する

ウィジェットエディタ右上のGraphタブに切り替え、配置したボタンを選択して OnClicked イベントを追加します。

PLAY ボタン：ゲーム本編へ遷移

OnClicked (PlayButton) → Open Level (by Name) → ゲーム本編のレベル名を入れる
Remove from Parent で自身を消す（任意。Open Level するとレベルが変わるので必須ではない）

OPTIONS ボタン：設定ウィジェットを表示

OnClicked (OptionsButton) → Create Widget（クラス: WBP_Options）→ Add to Viewport
必要に応じてメインメニュー側を Set Visibility → Collapsed で隠す

QUIT ボタン：ゲームを終了

OnClicked (QuitButton) → Quit Game（Player Controller を渡す）
Quit Preference は Quit（モバイルなら Background も可）

4. メインメニューをレベルブループリントから表示する

メインメニュー専用のレベル（例: L_MainMenu）を作り、そのレベルブループリントで以下の処理を組みます。

Event BeginPlay
→ Create Widget（Class: WBP_MainMenu、Owning Player: Get Player Controller）
→ Add to Viewport
→ Set Input Mode UI Only（Player Controller / In Widget to Focus にウィジェット参照）
→ Set Show Mouse Cursor (true)（Player Controller の関数）

5. ポーズメニュー（ゲーム中の Esc 開閉）

ゲーム本編で Esc キーを押したらポーズメニューを開く処理は、プレイヤーコントローラーのブループリントが置き場所として最適です。

入力アクションの設定

Project Settings → Input → Action Mappings に PauseMenu を追加し、Esc キーをバインド
プレイヤーコントローラーの BP で InputAction PauseMenu イベントを作る

開く処理

Create Widget（Class: WBP_PauseMenu）
→ Add to Viewport
→ Set Game Paused (true)（UGameplayStatics）
→ Set Input Mode Game and UI
→ Set Show Mouse Cursor (true)

閉じる処理（メニュー内の「再開」ボタン）

Remove from Parent（自身のウィジェット参照）
→ Set Game Paused (false)
→ Set Input Mode Game Only
→ Set Show Mouse Cursor (false)

6. 入力モードとマウスカーソル

UI のクリック可否やキャラクター移動可否は、Set Input Mode 系の関数で切り替えます。

関数	用途
Set Input Mode UI Only	メインメニューなどゲーム入力を完全に止めたいとき
Set Input Mode Game and UI	ポーズメニュー / インベントリ。両方の入力を受け取る
Set Input Mode Game Only	通常プレイ。マウスカーソルを隠す
Set Show Mouse Cursor	マウスカーソルの表示／非表示

7. よくあるトラブル

症状	原因と対処
ボタンが押せない	Set Input Mode が Game Only のまま / マウスカーソル非表示 / Z オーダーで別ウィジェットが上に
2 重に開く	開く処理にトグル制御が無い。ウィジェット参照を変数に保持して `Is Valid` で判定
ポーズ中にアニメが動く	そのアニメ / コンポーネントが Tick when Paused になっている。普通は Off
レベル遷移後に UI が残る	Open Level 前に Remove from Parent または Remove All Widgets
キーが効かなくなる	UI Only に切り替えたまま閉じていない

8. C++ で同じことをする場合

// 例: PlayerController.cpp
void AMyPlayerController::ShowPauseMenu()
{
    if (PauseMenuClass)
    {
        UUserWidget* W = CreateWidget<UUserWidget>(this, PauseMenuClass);
        if (W)
        {
            W->AddToViewport();
            UGameplayStatics::SetGamePaused(this, true);
            bShowMouseCursor = true;
            FInputModeGameAndUI Mode;
            Mode.SetWidgetToFocus(W->TakeWidget());
            SetInputMode(Mode);
        }
    }
}

まとめ

ウィジェットブループリントで UI をデザイン
各ボタンの OnClicked にゲーム遷移／設定表示／終了を結線
Create Widget → Add to Viewport で画面に出す
Set Input Mode と Show Mouse Cursor を必ずペアで切り替え
ポーズメニューは Set Game Paused で時間を止める

ページ一覧

その他