[Unreal Engine 5]Tile viewを使って複数項目選択画面を作る

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

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

こちらのようなシンプルなタワーディフェンスゲームを作っています。本記事では、下の動画のような形で「タワーソケット」をクリックすると複数の「砲台タワー」の候補から建設したいタワーを選択できるUIを作ります。本記事ではUIの表示のみを行い、UIに表示されるボタンを押してタワーを建設する機能は次回作成します。

基本設計

下図のような関係を持った部品を使ってタワー建設UIを作ります。

ウィジェットを複数配置することのできる「Tile view」というウィジェットを持った「タワー建設UI」が、建設することのできるタワーの情報を持ったデータテーブル「タワー情報テーブル」を参照して、各タワーに対応する「タワー建設ボタン」を複数配置します。

タワーのバリエーションを増やす

まだタワーが１種類しかないため、まずはタワーのバリエーションを増やします。

「tower」フォルダを開き右クリック→「ブループリントクラス」で「BP_tower」を継承したブループリントを２つ作ります。作った２つのブループリントは「BP_tower1」「BP_tower2」という名称にします。

タワー１は安価で弱いタワーとします。「BP_tower1」を開きます。
「BP_tower1(self)」を選択した状態で「デフォルト」/「attack range」を500に設定します。

タワー２は高価で強いタワーとします。「BP_tower2」を開きます。
「BP_tower2(self)」を選択した状態で詳細パネルの
「デフォルト」/「fire_rate」を1
「デフォルト」/「attack_power」を30
「デフォルト」/「cost」を200
に設定します。
「SM_tower_base」を選択した状態で詳細パネルの
「マテリアル」/「エレメント0」を「M_headquater」に変更します。

ボタンに表示するタワー情報を持つデータテーブルを作る

まず、タワー情報を表す構造体を作ります。

「tower_socket」フォルダを開きます。「タワー建設UI」関連の部品はここに入れていきます。
右クリック→「ブループリント」→「構造体」を選択して作成、名称を「ST_tower_info」とします。

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

Name型「tower_name」：ボタンに表示するタワーの名称
BP_tower型「tower_class」：建設するタワーのクラス
Texture 2D型「tower_image」：ボタンに表示するタワーの画像

タワーの画像を用意します。
各タワーの外観をスクリーンショット(win+shift+s)で取得して画像として保存し、その画像をインポートします。
今回は「tower_socket」フォルダの下に「images」フォルダを作成してそこにインポートしました。

ボタンに表示するタワー情報を持つデータテーブルを作ります。

「tower_socket」フォルダに戻り、右クリック→「その他」→「データテーブル」を選択して作成し、「行構造を選択」で先ほど作成した「ST_tower_info」を選択します。
作成したデータテーブルの名称を「DT_tower_info」とします。
「DT_tower_info」を開いて以下の行を追加します。

1行目：tower_name = タワー1, tower_class = BP_tower1, tower_image = タワー１の画像
2行目：tower_name = タワー2, tower_class = BP_tower2, tower_image = タワー2の画像

Tile viewを使ったタワー建設UIを作る

タワー建設UIを作る部品として、Widget型ブループリントを２つ、Object型ブループリントを一つ作ります。Widget型の方を「WBP_tower_construct_ui」と「WBP_tower_select_entry」という名称にし、Object型の方を「BP_tower_select_entry」という名称にします。
それぞれの役割は以下です。

「WBP_tower_construct_ui」：「WBP_tower_select_entry」を複数並べて表示する
「WBP_tower_select_entry」：タワーを建設するボタン
「BP_tower_select_entry」：「WBP_tower_select_entry」を作るときにデータのやり取りをする

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

「WBP_tower_select_entry」を開きます。
「Canvas Panel」を追加します。
「image」を追加して名称を「tower_image」にします。
「text」を追加して名称を「tower_name」にします。
「button」を追加して名称を「button_make_tower」にします。
「tower_image」「tower_name」「button_make_tower」の「is Variable」にチェックし、中央に来るよう位置を調整し、大きさは250とします。
加えて「button_make_tower」のStyle/Normal/Tintのアルファ値を0に、Style/Hovered/Tintのアルファ値を0.5にしておきます。

「WBP_tower_select_entry」のイベントグラフに移動します。
「クラス設定」を押下し、左下の詳細パネルの「実装インターフェース」「追加」から「UserObjectListEntry」を選択します。すると、マイブループリント/インターフェースに項目が追加されます。

「On List Item Object Set」を右クリック→「イベントを実装」します。
すると「Event On List Item Object Set」がイベントグラフに追加されます。

「Event On List Item Object Set」の続きを以下のように作ります。
「Event On List Item Object Set」の入力を引数として「Cast to BP_tower_select_entry」を追加し、「get tower_info」「Break ST_tower_info」と繋げます。
変数「tower_image」ドラッグアンドドロップし、そこから線を引き出して「Set Brush from Texture」を追加し、「Target」は変数「tower_image」、「Texture」は「Break ST_tower_info」の「tower_image」を繋げます。
「tower_name」をドラッグアンドドロップし、そこから線を引き出して「Set Text(Text)」を追加し、「Target」は変数「tower_name」、「In Text」は「Break ST_tower_info」の「tower_name」を繋げます。このとき「To Text」は自動的に追加されます。

「WBP_tower_construct_ui」を開きます。

「Canvas Panel」を追加します。
「Tile View」を追加して名称を「tile_view_tower」にします。
「tile_view_tower」の「is Variable」にチェックを付けます。
詳細パネルの「リストエントリー」/「Entry Widget Class」に「WBP_tower_select_entry」を割り当てます。「Entry Height」「Entry Width」を250にしておきます。
コンパイルを押すと図のように「WBP_tower_select_entry」が並びます。

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

「Event Construct」の続きを以下のように作ります。
「Get Data Table Row Names」を追加し「Table」に「DT_tower_info」を選択します。
「For Each Loop」を追加します。
「Get Data Table Row」を追加し「Table」に「DT_tower_info」を選択します。
「Construct Object from Class」を追加し「Class」に「BP_tower_select_entry」を選択します。
変数から「tile_view_tower」をドラッグアンドドロップします。
「tile_view_tower」から線を引き出し「Add Item」を追加します。

ここまでの実装により、「WBP_tower_construct_ui」を表示するとき、データテーブルから表示するタワー情報を読み込んでタワー建設ボタンを並べることが出来ます。

「WBP_tower_construct_ui」を表示できるようにします。

「BP_tower_socket」を開きます。(part8で作成)
「Add Custom Event」で新しいイベントを作成し、名称を「show_construction_ui」にします。
「show_construction_ui」の続きを以下ように作ります。
「Create Widget」を追加して「Class」に「WBP_tower_construction_ui」を選択します。
「Add to viewport」を追加します。