ポーズ画面(一時停止)メニューの作成方法

キーボードのMキーを押すとゲームが一時停止しポーズ画面が開いて、ポーズ画面以外の入力を一切受け付けない様にしてみます。

 ポーズ画面ウィジェットの新規作成

コンテンツフォルダの新規追加から、ユーザーインターフェイス→ウィジェットブループリントを選択しポーズ画面用のウィジェットを追加します。名前はPauseMenuとしておきます。

PauseMenuウィジェットを開いてメニューを実装していきます。パレットから階層にドラッグ＆ドロップで項目を追加していきます。背景用の板(border)をひとつ、縦の項目を管理するためにVertical Boxをひとつ、その中に表示するテキストブロックとボタンをそれぞれ配置しました。ボタンは一時停止から復帰するResumeボタンのみ設置しています。わかりやすい様に項目には名前を付けておきます。名前は項目を選択した状態で詳細タブから変更できます。

全て変更していくと以下の様になります。

ここまで出来たらレイアウトを調整していきます。Borderをサイズ調整して画面いっぱいになる様に広げます。

画面いっぱいに広がったBorderを半透明にしておきます。詳細タブのAppearanceからBrushColorを変更します。ここではRGBA(0.3, 0.3, 0.3, 0.4)にします。

正しく設定できていれば、以下の様に半透明になります。

画面サイズに関わらず画面を満たす様にアンカーの設定を変更します。Borderの詳細タブのアンカーを選択して、右下の全体を満たすアンカーを選択します。

項目の位置を調整します。階層タブのVerticalBoxを選択します。詳細タブのスロットからHorizontal AlignmentとVerticalAlignmentを中央揃えにします。

ポーズメニューの機能実装

見た目の実装を終えたら、一時停止メニューの機能を実装していきます。Resumeボタンをクリックした時、ポーズメニューを終了してゲームに復帰できる様にします。

ウィジェットブループリントエディタ左上隅にある「グラフ」ボタンをクリックします。

ウィジェットブループリント編集画面に移動するので、マイブループリントの変数「ResumeButton」を選択し詳細タブからイベント「OnClicked」の「＋」をクリックしResumeButtonがクリックされた時に呼ばれるイベントを追加します。

追加するとイベントグラフに赤イノード「OnClicked(ResumeButton)」が現れたかと思います。ここから処理を開始します。

BPの実装は以下の様になります。

Set Input Mode GameOnlyノードでプレイヤー操作Gameのみに限定します。つまりUI側の操作ができない様にしています。その後Remove from Parentノードでこのウィジェットを生成した親から削除します。最後に、ゲームの一時停止を解除します。

プレイヤーBPからポーズメニューを呼ぶ

プレイヤーBPではまずキー入力を有効にするため、EnableInputで有効にします。

一時停止処理です。事前にプレイヤーBPにはPauseMenu型のPauseMenuReference変数を追加しておきます。処理の流れはキーボードのMキーが押されたときに、IsValidでPauseMenuReferenceが有効か確認し、有効であればSet Input Mode UIOnlyでUI操作のみ有効にして、Add to Viewportノードで画面に追加、最後にSetGame Pausedでゲームを一時停止しています。また、最初にPauseMenuReferenceが有効でなければPauseMenuを生成する様にしています。

これで復帰の出来る一時停止画面の完成です。