ポーズ画面の実装!
今回は
ポーズ画面の実装!
方法を紹介します。
今回紹介する方法は
普段自分がやっている方法とは違うのですが
UE4初心者もこの記事を見るかもしれないので
あえて自分が普段やっている方法とは違う
(個人的に)至ってシンプルな方法を紹介します。
UE4初心者の方を混乱させないためです。
(とはいえ自分もUMGは初心者みたいなものですがw)
あと、UMGの作成の解説がクソみたいに長く
ごちゃごちゃしてるかもしれませんが
とりあえず画像の通りやれば出来るはずなので
落ち着いてやりましょう!w
実装したい事
・「Pキー」を押した時、ポーズ画面を出す。
・ポーズ中、「Pキー」を押した時、あるいは「Return(ゲームに戻る)」ボタンを
クリックした時、ポーズを解除する。
~インターフェースの作成~
「UI_Interface」という名の
BPインターフェースを作成
「UI_Interface」を開き
新規関数「OnPauseBPI」を作成
引数(インプット)
~ポーズUMGの作成~
「Pause」という名の
UMGを作成
以下の通りに
UMGを作成します。
階層は以下の通りです。
各パネルについて
上から順に説明していきます。
「Overlay」
パレットの「パネル」項目内にあります。
「Overlay」を
階層の親である
「CanvasPanel」の子として追加します。
「CanvasPanel」から少し右にズレて
追加されるはずです。
「Overlay」が
親である「CanvasPanel」の子として
追加された証拠です。
追加した「Overlay」のアンカーを
「画面全体」にします。
「Overlay」の
「左オフセット」
「上オフセット」
「右オフセット」
「下オフセット」
を全て「0」にします。
これでUMGの画面四隅に
赤枠で囲ってある白いビックリマークのようなものがあれば
OKです。
「SizeBox」
パレットの「パネル」項目内にあります。
「SizeBox」を
「Overlay」の子として追加します。
これで、「SizeBox」の子のサイズを
好きなように変えることが出来ます。
さっそく「SizeBox」で
サイズを指定しましょう。
「SizeBox」の詳細パネルを
以下のように設定します。
「スロット」項目内にある
「HorizontalAlignment(水平方向の配置)」
と
「VerticalAlignment(垂直方向の配置)」
を、真ん中に設定。
「ChildLayout」項目内にある
「WidthOverride(横幅)」を「500」
「HeightOverride(立幅)」を「200」
に設定。
これでサイズを設定することが出来ました。
「ScaleBox」
パレットの「パネル」項目内にあります。
「ScaleBox」を
「SizeBox」の子として追加します。
「ScaleBox」を入れることによって
「SizeBox」の数値に合わせて
「ScaleBox」が子のサイズを拡大縮小させてくれます。
ちょっとよくわからない??
という方はこの動画が分かりやすい・・・はず・・・です・・・
「VerticalBox」
パレットの「パネル」項目内にあります。
「VerticalBox」を
「ScaleBox」の子として追加します。
「VerticalBox」の詳細パネルを
以下のように設定します。
スロット項目内にある
「HorizontalAlignment(水平方向の配置)」
を横全体
「VerticalAlignment(垂直方向の配置)」
を、真ん中に設定。
「Text」
パレットの「一般」項目内にあります。
「Text」を
「VerticalBox」の子として追加します。
「Text」の詳細パネルを
以下のように設定します。
「スロット」項目内にある
「HorizontalAlignment(水平方向の配置)」
を真ん中
「VerticalAlignment(垂直方向の配置)」
を、縦全体に設定。
「Content」項目内の
「Text」内に「Pause」と入れましょう。
「Button」
パレットの「一般」項目内にあります。
「Button」を
「VerticalBox」の子として追加します。
追加した「Button」に
「ReturnButton」と名付けます。
ポーズ画面を解除する為のボタンという事です。
「Text」を
「ReturnButton」の子として追加します。
「Text」の詳細パネルを
以下のように設定します。
スロット項目内にある
「Padding」を「0」
「Content」項目内の
「Text」内に「Return」と入れましょう。
「Button」を
「VerticalBox」の子として追加します。
追加した「Button」に
「ExitButton」と名付けます。
ゲームを終了する為のボタンという事です。
「Text」を
「ExitButton」の子として追加します。
「Text」の詳細パネルを
以下のように設定します。
スロット項目内にある
「Padding」を「0」
「Content」項目内の
「Text」内に「Exit」と入れましょう。
これでUMGの作成は終了です。
~ポーズUMGのイベントグラフ作成~
関数「PauseSwitch」を作成
「PauseSwitch」の中身は
以下の通り
Trueに繋がる処理
ゲームをポーズする処理です。
Falseに繋がる処理
ポーズを解除する処理です。
作成したBPインターフェース
「UI_Interface」を追加
イベントグラフに以下の処理を
作成します。
以下の処理は
各ボタンがクリックされた時のイベントです。
「ReturnButton」がクリックされた時
「PauseSwitch」関数を呼び出す。
引数「Pause」は「False」で。
「ExitButton」がクリックされた時
ゲームを終了します。
「Pキー」が押された時
ポーズ画面を表示したり
非表示にしたりする処理です。
~ThirdpersonCharacterのイベントグラフの作成~
「ThirdpersonCharacter」を開き
以下の処理を作成します。
作成した「Pause」UMGのリファレンスを取得
「Pキー」が押された時
ゲームがポーズ状態か判定
「Pキー」押した時
ポーズ状態なら、「Pause」UMGにあるBPインターフェースイベント
「OnPauseBPI(引数『False』)」を呼び出す。
ポーズ状態でなければ、「Pause」UMGにあるBPインターフェースイベント
「OnPauseBPI(引数『True』)」を呼び出す。
これでプレイしてみましょう!
(何故か動画だとマウスカーソルが出ていませんがお気にせず)
「Pキー」を押したら
しっかりポーズ画面が表示されて
「Return」ボタンを押したら
しっかりゲーム画面に戻ってましたね!
・・・しかし、1つ問題があるのに気が付いたでしょうか??
「Pキー」を押してポーズ画面が表示されるのはいいのですが
もう一度「Pキー」を押してもポーズ画面が消えてくれません。
どうすればいいのか??
「Pキー」を選択し
詳細パネルの「ExecuteWhenPaused」にチェックを入れれば解決です!
どうやらゲームがポーズされると
キー入力を受け付けなくなるようです。
しかし、「ExecuteWhenPaused」にチェックを入れれば
ゲームがポーズされていても
キー入力を受け付けてくれるのです!
という事でもう一度プレイ!
今度は、「Pキー」を押した時と「Return」ボタンを押した時に
ポーズ画面を消すことが出来てますね!
今回はくsssssっそ長くなりましたが
画像通りにやっていけば出来るはずですw
分からないこと・抜けてると思われる所があれば遠慮なく
Twitterhttps://twitter.com/Demonskiller5までDMなりなんなりください!
それではまた^^ノシ