ポーズ画面の実装!

今回は

 

ポーズ画面の実装!

 

方法を紹介します。

 

今回紹介する方法は

普段自分がやっている方法とは違うのですが

 

UE4初心者もこの記事を見るかもしれないので

あえて自分が普段やっている方法とは違う

(個人的に)至ってシンプルな方法を紹介します。

 

UE4初心者の方を混乱させないためです。

(とはいえ自分もUMGは初心者みたいなものですがw)

 

あと、UMGの作成の解説がクソみたいに長く

ごちゃごちゃしてるかもしれませんが

とりあえず画像の通りやれば出来るはずなので

落ち着いてやりましょう!w

 

 

実装したい事

・「Pキー」を押した時、ポーズ画面を出す。

・ポーズ中、「Pキー」を押した時、あるいは「Return(ゲームに戻る)」ボタンを

クリックした時、ポーズを解除する。

 

 

 

~インターフェースの作成~

「UI_Interface」という名の

BPインターフェースを作成

f:id:Free_Gamer:20190831181321p:plain

 

「UI_Interface」を開き

新規関数「OnPauseBPI」を作成

f:id:Free_Gamer:20190831181520p:plain

引数(インプット)

f:id:Free_Gamer:20190831181535p:plain

 

 

~ポーズUMGの作成~

「Pause」という名の

UMGを作成

f:id:Free_Gamer:20190831181120p:plain

以下の通りに

UMGを作成します。

f:id:Free_Gamer:20190831183636p:plain

階層は以下の通りです。

f:id:Free_Gamer:20190831183757p:plain

各パネルについて

上から順に説明していきます。

 

「Overlay」

パレットの「パネル」項目内にあります。

f:id:Free_Gamer:20190831183948p:plain

「Overlay」を

階層の親である

「CanvasPanel」の子として追加します。

f:id:Free_Gamer:20190831184246p:plain

「CanvasPanel」から少し右にズレて

追加されるはずです。

 

「Overlay」が

親である「CanvasPanel」の子として

追加された証拠です。

 

 追加した「Overlay」のアンカーを

「画面全体」にします。

f:id:Free_Gamer:20190831184447p:plain

 

「Overlay」の

「左オフセット」

「上オフセット」

「右オフセット」

「下オフセット」

を全て「0」にします。

f:id:Free_Gamer:20190831184705p:plain

 

これでUMGの画面四隅に

赤枠で囲ってある白いビックリマークのようなものがあれば

OKです。

f:id:Free_Gamer:20190831185142p:plain

 

「SizeBox」

パレットの「パネル」項目内にあります。

f:id:Free_Gamer:20190831193608p:plain

「SizeBox」を

「Overlay」の子として追加します。

f:id:Free_Gamer:20190831193906p:plain

これで、「SizeBox」の子のサイズを

好きなように変えることが出来ます。

 

さっそく「SizeBox」で

サイズを指定しましょう。

 

「SizeBox」の詳細パネルを

以下のように設定します。

f:id:Free_Gamer:20190831194316p:plain

「スロット」項目内にある

「HorizontalAlignment(水平方向の配置)」

「VerticalAlignment(垂直方向の配置)」

を、真ん中に設定。

 

「ChildLayout」項目内にある

「WidthOverride(横幅)」を「500」

「HeightOverride(立幅)」を「200」

に設定。

 

これでサイズを設定することが出来ました。

 

「ScaleBox」

パレットの「パネル」項目内にあります。

f:id:Free_Gamer:20190831194909p:plain

「ScaleBox」を

「SizeBox」の子として追加します。

f:id:Free_Gamer:20190831195012p:plain

「ScaleBox」を入れることによって

「SizeBox」の数値に合わせて

「ScaleBox」が子のサイズを拡大縮小させてくれます。

 

ちょっとよくわからない??

という方はこの動画が分かりやすい・・・はず・・・です・・・

 

 

「VerticalBox」

パレットの「パネル」項目内にあります。

f:id:Free_Gamer:20190831200425p:plain

「VerticalBox」を

「ScaleBox」の子として追加します。

f:id:Free_Gamer:20190831200725p:plain

 

「VerticalBox」の詳細パネルを

以下のように設定します。

f:id:Free_Gamer:20190831201017p:plain

スロット項目内にある

「HorizontalAlignment(水平方向の配置)」

を横全体

「VerticalAlignment(垂直方向の配置)」

を、真ん中に設定。

 

「Text」

パレットの「一般」項目内にあります。

f:id:Free_Gamer:20190831201711p:plain

「Text」を

「VerticalBox」の子として追加します。

f:id:Free_Gamer:20190831201757p:plain

「Text」の詳細パネルを

以下のように設定します。

f:id:Free_Gamer:20190831201850p:plain

「スロット」項目内にある

「HorizontalAlignment(水平方向の配置)」

を真ん中

「VerticalAlignment(垂直方向の配置)」

を、縦全体に設定。

 

「Content」項目内の

「Text」内に「Pause」と入れましょう。



「Button」

パレットの「一般」項目内にあります。

f:id:Free_Gamer:20190831202440p:plain

「Button」を

「VerticalBox」の子として追加します。

f:id:Free_Gamer:20190831202344p:plain

追加した「Button」に

「ReturnButton」と名付けます。

 

ポーズ画面を解除する為のボタンという事です。

 

 

「Text」を

「ReturnButton」の子として追加します。

f:id:Free_Gamer:20190831203540p:plain

「Text」の詳細パネルを

以下のように設定します。

f:id:Free_Gamer:20190831203656p:plain

スロット項目内にある

「Padding」を「0」

 

「Content」項目内の

「Text」内に「Return」と入れましょう。

 

 

「Button」を

「VerticalBox」の子として追加します。

f:id:Free_Gamer:20190831204129p:plain

追加した「Button」に

「ExitButton」と名付けます。

 

ゲームを終了する為のボタンという事です。

 

 

「Text」を

「ExitButton」の子として追加します。

f:id:Free_Gamer:20190831204351p:plain

「Text」の詳細パネルを

以下のように設定します。

f:id:Free_Gamer:20190831204535p:plain

スロット項目内にある

「Padding」を「0」

 

「Content」項目内の

「Text」内に「Exit」と入れましょう。

 

これでUMGの作成は終了です。

 

~ポーズUMGのイベントグラフ作成~

関数「PauseSwitch」を作成

f:id:Free_Gamer:20190831182358p:plain

「PauseSwitch」の中身は

以下の通り

f:id:Free_Gamer:20190831182424p:plain

Trueに繋がる処理

ゲームをポーズする処理です。

f:id:Free_Gamer:20190831182454p:plain

Falseに繋がる処理

ポーズを解除する処理です。

f:id:Free_Gamer:20190831182513p:plain

 

作成したBPインターフェース

「UI_Interface」を追加

f:id:Free_Gamer:20190831182831p:plain

 

イベントグラフに以下の処理を

作成します。

f:id:Free_Gamer:20190831182217p:plain

 

以下の処理は

各ボタンがクリックされた時のイベントです。

f:id:Free_Gamer:20190831205111p:plain

「ReturnButton」がクリックされた時

「PauseSwitch」関数を呼び出す。

引数「Pause」は「False」で。

 

「ExitButton」がクリックされた時

ゲームを終了します。

 

「Pキー」が押された時

ポーズ画面を表示したり

非表示にしたりする処理です。

f:id:Free_Gamer:20190831205718p:plain

 

 

~ThirdpersonCharacterのイベントグラフの作成~

「ThirdpersonCharacter」を開き

以下の処理を作成します。

f:id:Free_Gamer:20190831205846p:plain

 

作成した「Pause」UMGのリファレンスを取得

f:id:Free_Gamer:20190831205952p:plain

 

「Pキー」が押された時

ゲームがポーズ状態か判定

f:id:Free_Gamer:20190831210038p:plain

 

「Pキー」押した時

ポーズ状態なら、「Pause」UMGにあるBPインターフェースイベント

「OnPauseBPI(引数『False』)」を呼び出す。

ポーズ状態でなければ、「Pause」UMGにあるBPインターフェースイベント

「OnPauseBPI(引数『True』)」を呼び出す。

f:id:Free_Gamer:20190831210136p:plain

 

 

これでプレイしてみましょう!

(何故か動画だとマウスカーソルが出ていませんがお気にせず)

youtu.be

 

「Pキー」を押したら

しっかりポーズ画面が表示されて

「Return」ボタンを押したら

しっかりゲーム画面に戻ってましたね!

 

・・・しかし、1つ問題があるのに気が付いたでしょうか??

 

「Pキー」を押してポーズ画面が表示されるのはいいのですが

もう一度「Pキー」を押してもポーズ画面が消えてくれません。

 

どうすればいいのか??

 

「Pキー」を選択し

f:id:Free_Gamer:20190831211230p:plain

詳細パネルの「ExecuteWhenPaused」にチェックを入れれば解決です!

f:id:Free_Gamer:20190831211219p:plain

どうやらゲームがポーズされると

キー入力を受け付けなくなるようです。

 

しかし、「ExecuteWhenPaused」にチェックを入れれば

ゲームがポーズされていても

キー入力を受け付けてくれるのです!

 

 

という事でもう一度プレイ!

youtu.be

 

今度は、「Pキー」を押した時と「Return」ボタンを押した時に

ポーズ画面を消すことが出来てますね!

 

 

今回はくsssssっそ長くなりましたが

画像通りにやっていけば出来るはずですw

 

分からないこと・抜けてると思われる所があれば遠慮なく

Twitterhttps://twitter.com/Demonskiller5までDMなりなんなりください!

 

それではまた^^ノシ