はじめに

Unreal Engine (UE) Advent Calendar 2022 その３１６日目の記事です。

パート２です。

プロジェクトセットアップ・ゲームプレイ編
メインメニュー・ステージセレクト編（ここ）
ゲームループ・ブラッシュアップ編

はじめに
メインメニュー・ステージセレクト編
次のパートへ...

メインメニュー・ステージセレクト編

ここからはタイトル画面とステージセレクト画面を作っていきます。

ステップ１５：メインメニューを表示

新しいレベルを作ります。

テンプレート：Basic
名前：P_MainMenu

次にメインメニュー用ウィジェットブループリントを作成します。

親クラス：User Widget
名前：WBP_MainMenu

WBP_MainMenuを開いて次のようにパーツを配置します。

WBP_MainMenu
- [CanvasPanel]
  - [Border]
    - Anchor：全面
    - Offset Right : 0
    - Offset Bottom : 0
    - Brush Color （Hex Linear）: 00000080
  - [Text]
    - Anchor : 中心
    - Position Y : -100
    - Alignment : X & Y=0.5
    - Size to Content : チェック入れる
    - Text : SOKOBAN
    - Font Size : 168
  - [Button_StageSelect]
    - Anchors : 中心
    - Position Y : 200
    - Alignment : X & Y=0.5
    - Size to Content : チェックを入れる
    - [Text]
      - Text : ステージセレクト
      - Font Size : 72
  - [Button_Quit]
    - Anchors : 中心
    - Position Y : 400
    - Alignment : X & Y=0.5
    - Size to Content : チェックを入れる
    - [Text]
      - Text : やめる
      - Font Size : 72

同じくWBP_MainMenuでButton_QuitのOn Clikedイベントを作成します。

次はメインメニュー用ゲームモードブループリントを作成します。

親クラス：Game Mode Base
名前：GM_MainMenu

GM_MainMenuを開き、Begin Playから次のように処理を組みます。

忘れずにP_GamePlayでGM_MainMenuを使うように設定します。

動作確認をし「やめる」ボタンを押したときエディタのプレイ状態が終了すればOKです。

ここまでのプロジェクト

ステップ１６：ステージセレクトメニューを表示

ステージセレクトウィジェットブループリントを作成する前にステージセレクトウィジェットで使うButtonパーツを自作します。

親クラス：User Widget
名前：WBP_StageButton

WBP_StageButtonを開いて次のようにパーツを配置します。

WBP_StageButton
- [Button_Stage]
  - [TextBlock_Stage]
    - Is Variable：チェック入れる
    - Font Size：48

Is Variableはパーツ選択時にDetailsパネルに表示される、パーツ名の右隣にあります。

同じくWBP_StageButtonに変数を１つ追加します。

名前：StageName
型：String
Instance Editable：チェック入れる

次にPre Constructイベントに続けて処理を組みます。

次はステージセレクトウィジェットブループリントを作ります。

親クラス：User Widget
名前：WBP_StageSelect

次のようにパーツを配置します。（パーツ数が一番多いのでがんばってください）

WBP_StageSelect
- [CanvasPanel]
  - [Border]
    - Anchor : 全面
    - Offset Right : 0
    - Offset Bottom : 0
    - Brush Color（Hex Linear）: 00000080
  - [Text]
    - Anchor : 中心
    - Position Y : -400
    - Alignment : X&Y=0.5
    - Size to Content : チェック入れる
    - Text : STAGE SELECT
    - Font Size : 96
  - [Scroll Box]
    - Ancrhor : 中心
    - Size X : 1000
    - Size Y : 400
    - Alignment : X&Y=0.5
    - Scroll Orientation : Horizontal
    - [Size Box]
      - Width Override : 1000
      - [Vertical Box]
        
        [Text]
        
        Horizontal Alignment : 中心
        
        Text : STAGE 1
        
        Font Size : 84
        
        [Uniform Grid Panel]
        
        Slot Padding : 10
        
        [WBP_StageButton]
        
        Is Variable：チェック外す
        
        Horizontal Alignment : 全面
        
        Row : 0
        
        Column : 0
        
        Stage Name : 1-1
        
        [WBP_StageButton]
        
        Is Variable：チェック外す
        
        Horizontal Alignment : 全面
        
        Row : 0
        
        Column : 1
        
        Stage Name : 1-2
        
        [WBP_StageButton]
        
        Is Variable：チェック外す
        
        Horizontal Alignment : 全面
        
        Row : 1
        
        Column : 0
        
        Stage Name : 1-3
        
        [WBP_StageButton]
        
        Is Variable：チェック外す
        
        Horizontal Alignment : 全面
        
        Row : 1
        
        Column : 1
        
        Stage Name : 1-4

次はGM_MainMenuを開きます。変数を１つ追加します。

名前：WBP_MainMenu_Ref
型：WBP_MainMenu Object Reference

WBP_MainMenuの生成部分に処理を追加します。

次にShow Mouse Cursorにチェックを入れている箇所から続いて処理を組みます。

動作確認をします。メインメニューUIの「ステージセレクト」ボタンを押すとステージセレクトUIが表示されればOKです。現状は一方通行で構いません。

ここまでのプロジェクト

ステップ１７：各ステージのボタンが押されたときにそのステージを読み込む

ここからメインメニューレベルとゲームプレイレベルが繋がります。が、しかし「選択したステージをどうやって別レベルにいるBP_StageBuilderに伝えるか」という問題があります。これにはいくつかの方法がありますが代表的なものはGame Instanceを使う方法です。Game Instanceはゲーム全体に１つだけ存在するオブジェクトであり、レベルを跨いでも情報を保持することができます。ステージセレクトで選択したステージ名をGame Instanceに保存し、ゲームプレイレベルでGame Instanceからステージ名を取得すれば対象のステージを生成することができます。

UE4 GameInstanceでグローバルに値を扱う - UE4初心者が頑張ってるブログ

ですが、このプロジェクトでは読み込みたいステージ名を文字列でゲームプレイレベルに渡せればいいので、Game Instanceを使う方法は手順が少し増えてしまい手間です。そこでOpen Levelノードの「Options」という引数を使うことにします。

２つのLevel間でデータをやり取りする3つの方法 | それとこれとあれかどれかと

WBP_StageButtonを開き、Button_StageのOn Clickedイベントを作成します。

次にBP_StageBuilderを開きます。Begin PlayのGet Data Table Rowノードに次のような処理を追加します。

動作確認をしてステージセレクトで選択したステージがゲームプレイレベルで正しく読み込まれていればOKです。

Open LevelノードのOptionsには「項目名1=データ1?項目名2=データ2」と「?」区切りで文字列を渡すことができます。Optionsに渡した文字列は読み込んだレベルに設定されたGame Modeが「Options String」という変数に保存しています。Parse Optionノードの「Key」に取り出したいデータ項目名を入力することで該当するデータを文字列で取り出せます。

便利でお手軽ですが文字列のみのやり取りに限りますので、今回のような「名前」「数値を文字列に直したもの」であれば問題ありませんが「構造体」といった文字列で表すことが難しいデータについてはGame Instanceを使ったほうがいいでしょう。

ここまでのプロジェクト

ステップ１８：メインメニューとステージセレクトメニューを行き来させる

WBP_StageSelectを開き、次のようにパーツを配置します。（追加部分だけ載せます）

WBP_StageSelect
- [CanvasPanel]
  - [Button_Return]
    - Position X：50
    - Position Y：50
    - Size to Content：チェック入れる -[Text]
      - Text：戻る
      - Font Size：36