タイトル画面と遷移

2023.08.23

セーブ&ロードやセッティングが上手くできたので、タイトル画面のメニューと連動させました。

Unreal Engineのバージョンは5.3.0 Preview 1です。

W_TitleMenu(ウィジェットブループリント)

作成：ウィジェットブループリント
親クラス：User Widget
名前：W_TitleMenu

デザイナー

Canvas Panelを配置。

Canvas Panelの子としてBorderを配置。
・名前をBackgroundにしました。
・アンカーを全画面にします。
・オフセットは全て0にします。
画面全体に広げてタイトル画面の背景にします。
Brush > Imageで画像も使えます。
今回は真っ黒。

Canvas Panelの子としてVertical Boxを配置。
その子としてImageを配置し、名前をTitle Logoにします。
これらはタイトルロゴを表示するためのものです。位置とサイズもそれ用に合わせる。
Imageを追加で配置して重ねることも可能です。
今回は真っ黒。

Canvas Panelの子としてVertical Boxを配置。

下層のVertical Boxの子としてButtonを4個配置。
・名前を上から「Button_NewGame」「Button_Load」「Button_Settings」「Button_QuitGame」にしました。
・Horizontal Alignmentを右。
・Vertical Alignmentを左から2番目。
・Style > Normal > Tint > Aを0.0。
・Style > Hovered > Tint > Aを0.0。
・Style > Pressed > Tint > Aを0.0。
ボタン自体は透明化してテキストのみ表示させるためです。

Buttonの子としてTextを配置。
・名前を上から「Text_NewGame」「Text_Load」「Text_Settings」「Text_QuitGame」にしました。
・Is Vatiableにチェックを入れます。
・コンテンツ > Textを上から「ニューゲーム」「ロード」「セッティング」「ゲーム終了」にします。

Vertical Boxの位置とサイズはタイトルメニューに適したサイズにします。

マウスHoverとキーボードFocusの同期
ノードを組む

マウスのOn Hoveredとキーボード(ゲームパッド)のSet User Focusを同期させる。
キーボードFocusに合わせてテキストカラー変更
ノードを組む

イベント TickでButtonがFocusされているかを全チェックして、Focus中のButtonに対応したテキストのカラーとフォントサイズを変更。
FucusedTextColorという変数でButtonがFocusされている時にテキストの色を赤にして、FocusedTextFontという変数でサイズを28にしています。
それぞれRemoveという変数を使い、一番最初にテキストのカラーとサイズをリセットしています。
ボタンクリックの処理
ノードを組む
ロード画面とセッティング画面を閉じる処理
ノードを組む

ゲームパッドBボタンかマウス右クリックでロード画面やセッティング画面を閉じてタイトルメニューを表示します。

TitleMenu(レベル)

ファイル > 新規レベル > 空のレベルを作成。
Mapsというフォルダを作成し、TitleMenuとして保存します。

上メニューの階層アイコンをクリックし、レベルブループリントを開くを選択。

ノードを組む

Set User Focusが利かなくて悩みましたが、Set Input Mode Game And UIのIn Widget to FocusにButtonを設定するだけで良かったんだと知りました。
今回はButtonは透明のままでテキストに色をつけますから、ウィジェットを開いたタイミングでText StartにSet Color and Opacityで色をつけています。

BP_GameModeTitle(ゲームモード)

作成：ブループリント クラス
親クラス：Game Mode Base
名前：BP_GameModeTitle
TitleMenuのワールドセッティングのゲームモードオーバーライドにBP_GameModeを設定しましょう。
そしてDefault Pawn ClassをNoneにする。そうすればTitleMenuにプレイヤーキャラクターは出現しません。

W_MainMenu(ウィジェットブループリント)

ゲームプレイからタイトル画面に戻る設定をします。
まずW_MainMenuの表示テキストである「SAVE」「LOAD」「SETTINGS」「QUIT」を「セーブ」「ロード」「セッティング」「タイトルに戻る」に変更しました。

ノードを組む

タイトル画面に戻るだけならOpen Level (by Name)だけで良いのですが、Slot Nameをリセットしておかないと、タイトル画面でニューゲームをクリックした時に、既存のセーブデータをロードしてしまいます。
ニューゲームをクリックした時にSlot Nameをリセットする仕様にしても良いです。

BP_Player(プレイヤーブループリント)

タイトル画面でマウスカーソルを表示しているため、BP_Player(プレイヤーブループリント)のイベント BeginPlayでマウスカーソルを消します。
ノードを組む
Bボタンでメインメニューを閉じる

タイトルメニューのロードとセッティングはBボタンやマウス右クリックで閉じることができますが、ゲームプレイ中のメインメニューはBボタンやマウス右クリックで閉じられなかったので修正しました。

コンテンツ > ThirdPerson > Input > ActionsにInput Actionがあります。IA_Jumpを複製してIA_MainMenuCloseにしました。
Pause中に使いますから、Trigger when Pausedにチェックを入れる必要があります。
TriggersはPressedのみで構いません。

コンテンツ > ThirdPerson > InputにあるIMC_DefaultにIA_MainMenuCloseを追加します。
Bボタン、右クリック、Q、Escでメニューを閉じられます。ちなみにEscはUnreal Engineのテストプレイ自体を閉じてしまいます。
メニューを開くボタンである特別仕様の右とTabもFlip FlopのB(偶数回)として利きますから当然ながら閉じられます。

ノードを組む

Bボタンらでメインメニューが開くと困りますから、Flip FlopのIs AがTrueであるかどうか、つまりA側のノードが完了しているかどうかをブランチで判断しています。
これらはFlip Flopの前に繋いでおかないと、Flip Flopが完了しないままメニューを閉じてしまいますので、次にMainMenuを開く時にボタンを2回押さないと開きません。

TitleMenu(レベル)

TitleMenuのレベルブループリントもEnhanced Inputに対応させました。

ノードを組む

苦労したが最高の結果

タイトル画面の「セーブ」「ロード」「セッティング」「ゲーム終了」、メインメニューの「セーブ」「ロード」「セッティング」「タイトルに戻る」、これらのマウス&キーボードとゲームパッドに両対応した操作が、やりたかった形で完璧にできました。
このプロジェクトを保存しておけば、クローンプロジェクトから様々なプロジェクトで再利用できます。5時間以内で完成できるミニゲームのチュートリアルをこなせば、それと連携させることでゲームとして完成させられる。ゲームの一部分のパーツとしてのチュートリアルをやるのではなく、最初から最後までゲームを完成することができる。その準備が整いました。

コメント

タイトルとURLをコピーしました