この操作ガイドでは、ゲームの [Pause (一時停止)] メニューの作成およびスクリプティング方法について説明します。
「UMG UI クイック スタート ガイド」および「メイン メニューを作成するための操作ガイド」を使用して操作を開始する場合、この操作ガイドでも同じプロジェクトを使用できます。
ゲーム内の一時停止メニューを作成する
このセクションでは、基本的な Pause (一時停止) メニューのビジュアル レイアウトを作成します。
-
Pause Menu ウィジェット ブループリントを開きます。
-
[Designer (デザイナ)] タブで、[Palette (パレット)] から [Hierarchy (階層)] にウィジェットをドラッグ＆ドロップして以下のように設定します。
キャンバス パネル には、テキスト 付き Vertical Box が 1 つ、およびそれぞれ テキスト を持つ 2 つの ボタン を含む Border が 1 つあります。
-
[Designer (デザイナ)] ウィンドウで、Border をサイズ調整して点線のウィンドウ全体を占める (画面全体を占める) ようにします。
[Details (詳細)] パネ内の [Brush Color] オプションから色を変更することもできます。
色の [A (アルファ)] を「0.5」に設定して、やや透明にします。ゲームプレイ中に [Pause (一時停止)] メニューが開くと、ボーダーが画面全体に表示されますが、やや透明にすることでバックグラウンドでゲームを表示することができます。
-
[Details (詳細)] パネルの [Border (ボーダー)] で、画面を全体を占めるアンカーを使用するようにしてください。
これにより、画面サイズに関係なく Border が画面を満たすようになります。
-
[Hierarchy (階層)] の [Vertical Box] を選択してから、[Details (詳細)] パネルで水平方向および垂直方向の両方でセンタリングします。
-
[Vertical Box] の下にある [Text] を選択して、[Details (詳細)] パネルの [Content (コンテンツ)] で「 Pause Menu 」と入力します。
-
他の 2 つの テキスト ブロックに「Resume」と「Quit」と入力します。
-
Ctrl キーを押しながら、[Hierarchy (階層)] にある両方の Button を選択します。次に [Details (詳細)] パネルの [Style (スタイル)] で [Hovered] に対して色を割り当てます。
-
[Details (詳細)] パネルで Button の名前を「Resume」と「Quit」にそれぞれ変更します。
一時停止メニュー機能のスクリプティング
ビジュアルを設定したら、次にスクリプト化した機能を Pause (一時停止) メニューに設定します。
-
[Widget Blueprint Editor] ウィンドウの右上隅にある [Graph (グラフ)] ボタンをクリックします。
-
[My Blueprint (マイ ブループリント)] ウィンドウの [Graph (グラフ)] タブで、[QuitButton] をクリックして、[Details (詳細)] パネルで [OnClicked] を追加します。
-
[ResumeButton] にも OnClicked イベントを追加します。
-
[Graph (グラフ)] ウィンドウで 右クリック し、Get Player Controller ノードを追加します。
-
Get Player Controller からピンを引き出して、Set Input Mode Game Only を使用し、Get Player Controller から再度ピンを引き出し、Set Show Mouse Cursor を使用して False に設定してから、Remove from Parent と Set Game Paused を以下のように使用します。
Resume Button をクリックすると、入力モードはゲームのみになり、一時停止メニューが有効な時に表示されるカーソルが取り除かれます。Set Game Paused ノードを使用して Paused をオフにして、一時停止状態を解除する前に、Remove from Parent ノードを使用して、実際の Pause (一時停止) メニュー ウィジェットを取り除きます。
-
Remove HUD という新しい 関数 を作成します。
一時停止メニューが有効になると、これを使用してプレイヤーのビューから HUD を取り除きます。
-
この関数内で Get Player Character ノードを追加して、Return Value から、Cast ToFirstPersonCharacter ノードを追加します。
これで、プレイヤーが使用する Character ブループリントとプレイヤーが使用しているゲームの HUD にアクセスできます。
-
以下の画面のように As First Person Character からピンを引き出して Get HUD Reference を使用して、次に Remove from Parent を使用します。
これでプレイヤー キャラクターが使用する HUD にアクセスし、ゲームをやめるときにビューポートから取り除きます。
-
Event Graph (イベント グラフ) で Get Player Controller からピンを引き出して、True に設定された Set Show Mouse Cursor ノードを使用します。
[Quit (終了)] をクリックすると、メイン メニューに戻る際にメニューを移動するためにマウス カーソルがオンになります。
-
上記で作成した Remove HUD 関数を追加し、その後に Open Level (Main または独自のメイン メニューを含むレベルの名前に設定) を追加し、以下のように接続します。
クリックしてフルサイズで表示 ボタンを両方とも設定できたので、最後に実行しなければならないのはプレイヤーが Pause (一時停止) メニューを呼び出し、ゲームを停止できるようにすることです。
-
コンテンツ ブラウザ で「 Content/FirstPersonBP/Blueprints 」を選択して、FirstPersonCharacter ブループリントを開きます。
-
グラフ内で M Key Event と Create Widget ノード (Pause Menu に設定) を追加し、その Return Value を変数に昇格します。
一時停止メニューを表示させるために M Key を入力として使用しましたが、どのキーでもご利用いただけます。昇格した変数に対して、作成した一時停止メニューへの参照を格納するため変数 Pause Menu Reference を呼び出しました。
-
Ctrl キーを押しながら [MyBlueprint (マイ ブループリント)] ウィンドウから変数をドラッグして IsValid ノードに接続します。
ここでは、Pause (一時停止) メニュー ウィジェットが作成され、この変数に格納されたかを確認しています。
-
Is Not Valid ピンを Create PauseMenu_C Widget に接続します。
-
右クリック して、Get Player Controller ノードを追加し、次に Set Show Mouse Cursor を追加し、True に設定します。
-
Get Player Controller ノードから再度引き出し、Get Player Controller Set Input Mode UI Only から引き出して、これらのノードを以下のように接続します。
M を押すと、一時停止メニューに以前アクセスしたことがあれば、再度作成する必要なく、変数にアクセスします。Pause (一時停止) メニューに初めてアクセスする場合は、Pause (一時停止) メニューを作成して、変数として格納して後でアクセスできるようにします。いずれの場合も、Pause (一時停止) メニューを表示する (これは以下で行います) 前は、入力モードは UI のみに設定されます。
-
Pause Menu Reference 変数から Add to Viewport ノードを使用して、次に Set Game Paused (Paused を True に設定) を使用します。
クリックしてフルサイズで表示 Pause (一時停止) メニューを設定できたので、今度はこのメニューをテストします。
-
[Compile (コンパイル)] ボタンと [Save (保存)] ボタンをクリックします。次に、エディタで再生するために [Play (プレイ)] ボタンをクリックします。
ゲーム内で、M Key (または割り当てた任意のキー) を押すと、ゲームが一時停止し、一時停止メニューが表示されるのがわかります。ここから Resume ボタンでゲームプレイを再開するか、Quit ボタンを使用して終了してメインメニューに戻ります。