[Unreal Engine 5]Tile Viewを使ってステージ選択画面を作る

シンプルなタワーディフェンスゲームを作る part19
1. Tile viewを使ったステージ選択UIを作る

シンプルなタワーディフェンスゲームを作る part19

こちらのようなシンプルなタワーディフェンスゲームを作っています。本記事では前回増やしたステージを、動画のような形でステージ選択画面から選択して遊べるようにする機能を作成します。

Tile viewを使ったステージ選択UIを作る

part14で作成したタワー建設UIと同じ仕組みでステージ選択UIを作っていきます。

新しく「stage_select」というフォルダを作ります。ステージ選択関連の部品はこちらに格納していきます。

「stage_select」に以下の５つの部品を作成します。(：以降は右クリック後の選択肢)

「ST_stage_info」：「ブループリント」/「構造体」
「DT_stage_info」：「その他」/「データテーブル」/行を「ST_stage_info」
「BP_stage_entry」：「ブループリントクラス」/「Object」
「WBP_stage_entry」：「ユーザーインターフェース」/「ウィジェットブループリント」「WBP_stage_select」：「ユーザーインターフェース」/「ウィジェットブループリント」

「ST_stage_info」を開きます。
左上の「変数を追加」から変数を３つ追加してそれぞれ以下のように作成します。

Name型「stage_name」：呼び出すステージのレベル名
Name型「stage_display_name」：ステージ選択ボタンに表示するステージ名
Texture 2D型「stage_image」：ボタンに表示するステージの画像

ステージの画像を用意します。
各ステージの外観をスクリーンショット(win+shift+s)で取得して画像として保存し、その画像を「stage_select」フォルダにインポートします。

「DT_stage_info」を開きます。

以下の２行を作ります。

１行目　「stage_name」：「stage1」、「stage_display_name」：「ステージ１」、「stage_image」：ステージ１の画像
２行目　「stage_name」：「stage2」、「stage_display_name」：「ステージ２」、「stage_image」：ステージ２の画像

「BP_stage_entry」を開きます。

「ST_stage_info」型の変数を追加し、名称を「stage_info」とします。
「インスタンス編集可能」「スポーン時に公開」にチェックを付けます。

「WBP_stage_entry」を開きます。
part14ではボタンウィジェットの後ろに画像を張る方法で実装しましたが、今回はボタンウィジェットの中に画像を張る方法で実装していきます。

「Canvas Panel」を追加します。
「button」を追加して名称を「play_button」にします。
「text」を追加して名称を「stage_text」にします。
「play_button」「stage_text」の「is Variable」にチェックを付けます。
「play_button」を中央に来るよう調整し、大きさは290とします。
「play_button」のStyle/Pressed/Tintのアルファ値を0.5にします。
※「Normal」「Hovered」はイベントグラフで設定するのでデフォルトのままでOKです。

「WBP_stage_entry」のイベントグラフに移動します。

「クラス設定」を選択し、「実装インターフェース」「追加」から「UserObjectListEntry」を選択します。

インターフェースに「オブジェクトリストエントリ」という項目が追加されます。
「On List Item Object Set」を右クリック→「イベントを実装」を選択します。「Event On List Item Object Set」がイベントグラフに追加されます。

「Event On List Item Object Set」の続きに以下を実装します。

「Cast to BP_stage_entry」、「get stage_info」を接続し、「get stage_info」の出力ピンを右クリック→「変数へ昇格」を選択します。変数名を「stage_info」とし「set stage_info」として繋ぎます。
「stage_info」に「Break ST_stage_info」を接続します。「Make SlateBrush」ノードを追加して入力ピン「Image」に「Break ST_stage_info」の「stage image」を接続します。
「Make ButtonStyle」ノードを追加し、「Make SlateBrush」の出力ピン「Slate Brush」を入力ピン「Normal」と「Hovered」に接続します。
変数「play_button」をドラッグアンドドロップし、「Set Style」を追加します。
「Set Style」の入力ピン「In Style」に「Make ButtonStyle」の出力ピン「Button Style」を接続します。
変数「stage_text」をドラッグアンドドロップし、「Set Text(Text)」を追加します。
入力ピン「In Text」は「Break ST_stage_info」の「stage_display_name」を接続します。

次にボタンを押されたときの振る舞いを作ります。

「play_button」を選択した状態で、左下の詳細パネルの「On Clicked」を選択します。すると「On Clicked(play_button)」が追加されます。
変数「stage_info」をドラッグアンドドロップし、「Break ST_stage_info」を追加します。
「On Clicked(play_button)」の続きに「Open Level(by Name)」を追加し、入力ピン「Level Name」に「Break ST_stage_info」の「stage_name」を接続します。

「WBP_stage_select」を開きます。

「Canvas Panel」を追加します。
「Text」を追加します。
「Tile View」を追加して名称を「stage_tile」にします。
「Text」を中央上に配置し、詳細パネルの「Text」に「ステージ選択」と入れておきます。
キャンバス中央に「stage_tile」を配置し、「is Variable」にチェックを付けます。
リストエントリーの「Entry Widget Class」に「WBP_stage_entry」を割り当てます。「Entry Height」「Entry Width」を300に設定します。(エントリより少し大きめにする)

「WBP_stage_select」のイベントグラフに移動します。

「Event Construct」の続きに以下を実装していきます。

「Get Data Table Row Names」ノードを追加し、「Table」に「DT_stage_info」を選択します。
「For Each Loop」を追加します。
「Get Data Table Row」ノードを追加し、「Table」に「DT_stage_info」を選択します。
「Construct Object from Class」ノードを追加し、「Class」に「BP_stage_entry」を選択します。
「Add Item」を追加し、「Target」に変数「stage_tile」を追加します。

ステージ選択用のレベルを作ります。

「level」フォルダを開き、右クリック→「レベル」でレベルを作成し、名称を「stage_select」とします。

「stage_select」を開きます。

左上のボタンから「レベルブループリントを開く」を選択し、「stage_select」のレベルブループリントを開きます。

「stage_select」のレベルブループリントの「Event BeginPlay」の続きに以下の実装を行います。
「Create Widget」を追加し「Class」に「WBP_stage_select」を選択します。
「Add Viewport」を追加し「Target」に「Create Widget」の「Return Value」を接続します。