目次
はじめに
Unreal Engineには、リスト表示に加えて階層構造を表示できるTreeViewというUIウィジェットがあります。しかし、このTreeViewは古くから存在する一方、公式ドキュメントでも詳細な情報が少ないため紹介します。
この記事では、TreeViewをBlueprintで使用する際の基本的な使い方を丁寧に解説します。すべての機能を網羅するのではなく、まず動かすことを目的に、最低限必要なセットアップと実装例を紹介します。
TreeViewがListViewを継承したエンジン機能なためListViewの利用方法を知っていると理解しやすいです。
ListViewの解説は以下のサイト様が分かりやすく解説しているので事前に確認しておくことをお勧めいたします。
個人の備忘録としてまとめています。誤った情報がある場合があります。
コメントにてご指摘のほどお願いいたします。
UE5.4.4
解説
TreeViewでできること
TreeViewは、ツリー構造（階層）を持ったデータを表示できるリスト型UI。
ファイルシステムやフォルダ構成のような親子関係のあるデータ表示に使える。
TreeViewの主な特徴：
・各要素（アイテム）に子要素を持たせることができる
・展開／折りたたみが可能
・各アイテムに任意のWidgetを割り当てられる（OnGenerateRow）
・ListView同様画面外の最適化が行われているため負荷を抑えられる
①B_TreeItemObjectの作成
まず、ツリーの要素のデータを定義したBPオブジェクトB_TreeItemObject
を作ります。
②B_TreeItemObjectの編集
変数を追加します。
この要素のUI上の表示名のItemNameをText型で、
この要素がもつ子要素をChildrenという自身の配列の型で
この要素を表示する階層をDepthをInt型で定義します。
どちらの変数もインスペクタ編集可能とスポーン時に公開にチェックを入れます。
③ W_TreeEntryの作成
TreeView内で使いまわされるUIを作ります。
ユーザーWidgetを継承したW_TreeEntryを作ります。
④W_TreeEntryのデザイン編集
以下のように要素を配置し1要素の見た目を作ります。
変更したプロパティは以下の要素です。
⑤W_TreeEntryの実装
グラフに移りこのEntryがTreeViewから制御できるように関数を作成します。
クラス設定から実装インターフェースに移りUserObjectListEntryを追加します。
インターフェースの関数からOnListItemObjectSetを実装します。
B_TreeItemObjectでCastして変数化。SetTextで名前を更新します。
またDepthによって横にずれるようにします。
ボタンの実装をします。
要素の開閉を行う処理です。
⑥W_TreeMainの作成
実際にTreeViewをセットアップするUIを新規作成します。
名前はW_TreeMainとしました。
⑦W_TreeMainのデザイン編集
キャンバスパネルとTreeViewを追加します。
TreeViewのプロパティにあるリストエントリーのエントリーウィジェットクラスに作成したW_TreeEntryを指定します。
実際に表示された場合の見た目がプレビューされます。
TreeViewを変数化しておきましょう。
また、OnGetItemChildrenにバインディングを作成します。
⑧W_TreeMainの実装
バインディングを作成したOn_TreeView_BP_OnGetItemChildrenを編集します。
この要素が持つ子要素を返すようにします。
OnInitializeのイベントを出しConstructノードを配置します。
B_TreeItemObjectを指定します。
そうするとプロパティが表示されます。
試しにラーメンのオプションを表示してみましょう。
⑨UIの表示
CharacterBPやPlayerControllerなどでW_TreeMainを表示します。
このように表示できました。
⑩子UIの表示
少し強引ですが実際に表示するロジックを組んでみます。
W_TreeMainに戻り以下のようにします。
内容としてはそれぞれの子要素を作成しアサインしていく処理です。
Text型の配列に表示したい文字列を入れて完了です。
それぞれのObjectが持つChildrenはユニークなものでないとクラッシュします。
必ず1要素当たりのChildrenはユニークな変数にしましょう。
最後に
階層構造の定義はGameplayTagとの相性が非常に良いです。
GameplayTagで追加した要素をTreeViewの仕組みに落とし込み自動生成することもできたのでぜひ挑戦してみてください。
参考にしたサイト
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやX（Twitter）のフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
