1.

UE5で構造体付きData Tableの中身をウィジェットに表示する方法

編集

Unreal Engine 5(UE5)で構造体(Struct)付きのデータテーブル(Data Table)の中身をウィジェットに表示するには、ブループリント上で「Get Data Table Row」ノードに対象の行名(Row Name)を渡して該当行の構造体を取り出し、その構造体メンバを Text ブロックなどの UI 要素に Set するのが基本の流れです。一覧として複数行を並べたい場合は「Get Data Table Row Names」で全行名を取得し、各行をループで回しながら List View や Vertical Box に展開します。本記事では、構造体の定義からウィジェットへの単一行・一覧表示まで、UE5 での標準的な手順を順を追って解説します。

この記事の要点
  • Data Table は構造体(Struct)を「行の型」として持つ。まず Struct を定義し、その Struct を行構造に指定した Data Table を作成する。
  • 単一行の表示は「Get Data Table Row」で行名を指定して構造体を取得し、Out Row を分解してメンバを TextBlock 等に Set する。
  • 一覧表示は「Get Data Table Row Names」で全行名の配列を取得し、For Each Loop で各行を処理して List View や Vertical Box に展開する。
  • 取得成否は Out Row の隣にある実行ピン(Row Found / Row Not Found)や戻り値の bool で必ず確認する。
  • よくある失敗は、行名(Row Name)のタイプミス、取得成否チェックの省略、Struct と Data Table の行型の不一致である。

前提:構造体(Struct)と、それを行型にした Data Table

UE5 の Data Table は、各行が「ある構造体(Struct)の 1 インスタンス」になっている表だと考えると分かりやすい仕組みです。表の列の構成(どんなメンバを、どんな型で持つか)は構造体側で決まり、Data Table はその構造体を「行構造(Row Structure)」として参照します。したがって、表示の前にまず構造体を定義し、続いてその構造体を行型に指定した Data Table を用意する、という順序になります。

1. 構造体(Struct)を作成する

コンテンツブラウザで右クリックし、Blueprints -> Structure を選んで構造体を作成します。作成した構造体を開き、表示したい項目をメンバ変数として追加します。例えばアイテムの一覧であれば、次のようなメンバが考えられます。

  • 表示名:String または Text
  • 価格:Integer
  • 説明文:Text
  • アイコン:Texture2D などの参照型

メンバの型と名前は、後でウィジェットに Set する内容と対応します。どの項目を画面に出すかを意識して設計しておくと、表示処理がそのまま素直に書けます。

2. その構造体を行型にした Data Table を作成する

再びコンテンツブラウザで右クリックし、Miscellaneous -> Data Table を選択します。作成時に「どの構造体を行構造として使うか」を選ぶダイアログが表示されるので、先ほど作った構造体を指定します。作成した Data Table を開くと、構造体のメンバが列として並んだ表が表示されるので、行(Row)を追加し、各行に行名(Row Name)と各メンバの値を入力していきます。

行名はその行を一意に識別するキーで、後述の「Get Data Table Row」で行を指定する際に使います。後から取得処理で参照することになるため、行名は分かりやすく一貫した命名にしておくと扱いやすくなります。

手順1:Data Table から行を取得する(Get Data Table Row)

特定の 1 行を取り出すには、ウィジェットブループリントのイベントグラフ(Event Graph)などで「Get Data Table Row」ノードを使います。一般的には Construct(ウィジェット生成時)や独自の更新イベントを起点にして呼び出します。

このノードには主に次の入力・出力があります。

ピン種別内容
Data Table入力対象の Data Table アセットへの参照を指定する。
Row Name入力取得したい行の行名(Name 型)を指定する。
Out Row出力見つかった行の構造体データ。型は Data Table の行型と同じ構造体になる。
Row Found / Row Not Found実行行が見つかったか否かで分岐する実行ピン(戻り値の bool で判定できる形でも扱える)。

Data Table 参照は、ウィジェット内に Data Table 型の変数を用意して割り当てる方法のほか、対象のアセットを直接指定する方法もあります。Row Name には、表示したい行の行名を渡します。行が見つかった場合は Out Row に該当行の構造体が入り、見つからなかった場合は Out Row は有効な値になりません。そのため、Out Row を使う前に取得が成功したかどうかを必ず確認します。

[Get Data Table Row]

 Data Table … ItemDataTable(行型 = アイテム構造体)

 Row Name … "Potion"

 → Row Found のとき Out Row(アイテム構造体)を使う

 → Row Not Found のときは表示しない/エラー処理

手順2:取得した構造体からメンバを取り出して UI にセットする

Out Row はひとかたまりの構造体なので、ここから個々のメンバ(表示名や価格など)を取り出して、ウィジェット上の UI 要素に渡します。メンバを取り出す方法は主に次の 2 通りです。

  • Out Row ピンを Split(分解)する:Out Row ピンを右クリックし、Split Struct Pin を選ぶと、構造体の各メンバが個別のピンとして展開され、そのまま取り出せます。
  • Break ノードを使う:構造体に対応する「Break(構造体名)」ノードを置き、Out Row をつなぐと、各メンバが出力ピンとして得られます。

取り出したメンバを、配置済みの UI 要素に Set します。例えば表示名を表示する TextBlock には「Set Text(Text)」で表示名メンバを渡し、価格を表示する TextBlock には価格メンバを渡します。価格のような Integer 型を Text として表示する場合は、いったん Text へ変換(ToText など)してから Set します。アイコン用の Image には、構造体のテクスチャ参照を「Set Brush from Texture」などで反映します。

なお UI 要素をブループリントから操作するには、その要素に「Is Variable」が付いている(変数として参照できる)必要があります。デザイナー上で対象の TextBlock や Image を選び、変数として公開しておくと、イベントグラフから名前で参照して Set できます。

一覧表示:全行名を取得してループで展開する

アイテム一覧やキャラクター一覧のように、Data Table の全行(または複数行)を並べて表示したい場合は、行名を 1 つずつ指定するのではなく、まず全行名をまとめて取得してからループで処理します。

1. Get Data Table Row Names で行名の配列を取得する

「Get Data Table Row Names」ノードに対象の Data Table を指定すると、その表に含まれる全行の行名が配列(Array of Name)として得られます。これが一覧表示の起点になります。

2. For Each Loop で各行を処理する

取得した行名の配列を「For Each Loop」につなぐと、各行名について Loop Body が実行されます。ループ内では、その行名を「Get Data Table Row」の Row Name に渡して各行の構造体を取得し、手順2と同じ要領でメンバを取り出します。これにより「全行名を取得 → ループ → 各行名で行データを取得 → 表示」という定番の流れが組めます。

3. List View または Vertical Box に展開する

取り出した各行を画面に並べる方法は、主に次の 2 つです。

  • List View を使う:1 行分の見た目を作った専用のエントリーウィジェットを用意し、List View にデータ(各行の情報を保持するオブジェクト等)を追加していく方式です。List View は表示範囲外の項目を作り直す仕組みを持つため、項目数が多い一覧に向いています。各エントリー側で受け取ったデータを TextBlock などに Set します。
  • Vertical Box に動的に追加する:ループ内で 1 行分の子ウィジェットを Create Widget で生成し、各メンバを Set したうえで Vertical Box に Add Child していく方式です。構成が分かりやすく、行数がそれほど多くない一覧であれば手軽に実装できます。

どちらの方式でも、「1 行分の見た目(エントリー/子ウィジェット)」と「その行のデータ(構造体から取り出したメンバ)」を結び付ける、という考え方は共通です。

具体例:アイテム一覧とキャラクター一覧

アイテム一覧の例

アイテム構造体に「表示名・価格・説明文・アイコン」を持たせ、それを行型にした Data Table にアイテムを 1 行ずつ登録します。一覧ウィジェットでは Get Data Table Row Names で全行名を取得し、For Each Loop で各行を Get Data Table Row して構造体を取り出します。エントリーウィジェットには名前用 TextBlock、価格用 TextBlock、アイコン用 Image を配置し、それぞれにメンバを Set すれば、ショップやインベントリのリストとして表示できます。

キャラクター一覧の例

キャラクター構造体に「名前・HP・攻撃力・顔アイコン」などを持たせれば、同じ仕組みでキャラクター選択画面やステータス一覧を作れます。Integer 型の HP や攻撃力は、Text への変換を挟んで TextBlock に表示します。1 体だけ詳細表示したい場合は、その行名を直接「Get Data Table Row」に渡して単一行表示にすればよく、一覧と詳細で同じ Data Table と構造体を共有できます。

落とし穴と注意点

つまずきやすいポイント対処
Row Name(行名)のタイプミス・表記ゆれ行名は Data Table 上の行名と完全一致である必要がある。直接文字列で打ち込むと打ち間違いに気づきにくいため、行名は変数化したり、Get Data Table Row Names から取得した値を使うと安全。
取得成否(Out Row の有効性)を確認していない行が見つからない場合 Out Row は有効な値にならない。Row Found / Row Not Found の実行ピンや戻り値の bool で分岐し、見つかった場合のみ表示処理を行う。
構造体と Data Table の行型が一致していないData Table は作成時に指定した行構造(構造体)に紐づく。別の構造体を Break/Split しようとすると型が合わず接続できない。取得側の構造体型が、その Data Table の行型と同じか確認する。
UI 要素をブループリントから参照できないTextBlock や Image を変数として公開(Is Variable を有効化)していないと、イベントグラフから Set できない。デザイナー上で対象要素を変数化しておく。
数値型をそのまま TextBlock に入れようとするIntegerFloat は Text に変換してから Set する。変換ノードを挟むことで、価格やステータスなどの数値を表示できる。

よくある質問(FAQ)

Q1. 単一の行を表示するか、一覧で全行を表示するかで、使うノードはどう変わりますか?

単一行であれば「Get Data Table Row」に行名を 1 つ渡すだけで完結します。複数行・全行を一覧表示したい場合は、まず「Get Data Table Row Names」で行名の配列を取得し、For Each Loop で各行名を「Get Data Table Row」に渡して順に処理します。取得した構造体からメンバを取り出して UI に Set する点は、どちらも共通です。

Q2. List View と Vertical Box は、どちらを使えばよいですか?

一概には言えませんが、項目数が多くスクロールを伴うような一覧では、表示範囲の項目を効率的に扱える List View が適していることが多いです。項目数が少なく、構成を単純にしたい場合は、ループで子ウィジェットを生成して Vertical Box に追加する方式が手軽です。要件や項目数に応じて選び、必要であれば公式ドキュメントで各ウィジェットの挙動を確認することをおすすめします。

Q3. 行が見つからず、ウィジェットに何も表示されません。

まず Row Name が Data Table 上の行名と完全一致しているかを確認してください(大文字・小文字や全角・半角、余分な空白も一致が必要です)。次に、Get Data Table Row が「Row Found」側に分岐しているか、戻り値の bool が成功になっているかを確認します。さらに、UI 要素が変数化されていて Set 対象として参照できているか、数値型を Text に変換しているかもあわせて見直すと、原因を切り分けやすくなります。

まとめ

UE5 で構造体付き Data Table の中身をウィジェットに表示する基本は、「Get Data Table Row で行を取得 → 構造体メンバを取り出して UI に Set」という流れです。一覧化したい場合は「Get Data Table Row Names で全行名を取得 → ループで各行を処理 → List View や Vertical Box に展開」と発展させます。行名の一致、取得成否の確認、構造体と行型の一致という 3 点に注意すれば、アイテムやキャラクターなどのデータを安定してウィジェットに反映できます。ノードの細かな仕様や最新版での挙動については、利用中のバージョンの公式ドキュメントもあわせて確認するとより確実です。

編集
Post Share
子ページ

子ページはありません

同階層のページ

同階層のページはありません

最近更新/作成されたページ