対象読者:Godotの基本操作を少し触ったことがある初級者の方
はじめに
フォルダのように親子関係を持った一覧を表示したいとき、Godotで階層構造の一覧を表示したくなったら真っ先に検討すべきノードが Tree です。Godotのエディタ自身が持つ「シーン」ドックや「ファイルシステム」ドックも、このTreeを使って作られています。
Treeとは?
Treeは、親子関係を持つ項目(TreeItem)を階層的に表示するUIノードです。折りたたみ(展開・収納)、複数列の表示、チェックボックスやアイコンの埋め込みなど、高機能な一覧表示を実現できます。
たとえるなら、パソコンのファイルエクスプローラーです。フォルダを開くと中にさらにフォルダやファイルがある、という入れ子構造を表示できます。
Tree は Control → CanvasItem → Node を継承しています。項目そのものはTreeItemというオブジェクトとして管理し、スクリプトから動的に追加・削除します。
このノードを使うべき場面
- インベントリを「武器」「防具」「道具」のようにカテゴリ分けして表示するとき
- スキルツリーや、条件で枝分かれする選択肢を表示するとき
- セーブデータやファイルを、フォルダ構造のように整理して見せたいとき
- 項目が増え階層が複雑になるほど必要性が高まるノードです: 分類が浅いうちはItemListで足りますが、カテゴリ分けが必要になった時点でTreeの出番になります
使わない・別のノードが適切な場合:
- 階層のないフラットな一覧でよい → ItemList を使う
- 選択肢を畳んでおきたい(クリックで開くドロップダウン) → OptionButton を使う
使うかどうかの目安: 表示したい情報に「親子関係」や「カテゴリ分け」があるかどうかで判断しましょう。フラットな一覧ならItemList、階層構造ならTreeです。
主なプロパティと機能
Treeの代表的なプロパティとメソッドを以下にまとめました。
| プロパティ/メソッド | 役割 | 型 |
|---|---|---|
create_item(parent) | 新しいTreeItemを作成(parent省略でルート扱い) | TreeItem |
hide_root | ルート項目自体を非表示にするか | bool |
columns | 表示する列数 | int |
item_selected | 項目が選択されたときに発火するシグナル | Signal |
get_selected() | 現在選択中のTreeItemを取得 | TreeItem |
set_text(column, text)(TreeItem側) | 指定した列にテキストを設定 | void |
もっと使いこなす:カスタマイズできるパラメータ
まずは基本を動かしてみてから、余裕が出たら試してみてください。
1. 階層構造を作る
貼り付け先の準備: ①シーンツリーで+ボタンから「Tree」を検索して追加 ②右クリックして「アタッチスクリプト」→GDScriptのまま「作成」を押し、開いたエディタに以下を貼り付け
extends Tree
func _ready() -> void:
hide_root = true
var root = create_item()
var weapons = create_item(root)
weapons.set_text(0, "武器")
var sword = create_item(weapons)
sword.set_text(0, "はがねの剣")
var armor = create_item(root)
armor.set_text(0, "防具")
item_selected.connect(_on_item_selected)
func _on_item_selected() -> void:
print("選択された項目: ", get_selected().get_text(0))
よくある質問:似たノードとの違い
Q. TreeとItemListの違いは?
A. ItemList はフラットな一覧です。Treeは親子関係のある階層構造を表示できる点が異なります。カテゴリ分けが不要ならItemListの方がシンプルです。
Q. TreeとAnimationTreeは関係があるの?
A. 名前は似ていますが、AnimationTreeはアニメーションのブレンドや遷移を制御するための全く別のノードです。UIとして一覧を表示したいなら今回のTreeを使います。
まとめ
Tree は、階層構造を持つ一覧表示を実現する高機能なノードです。
- インベントリのカテゴリ分けやスキルツリーなど、親子関係のある情報表示に向いています
- TreeItemを作成し、create_item()で親子関係を組み立てるのが基本の流れです
- 階層が不要ならItemList、必要になったらTree、と使い分けましょう
次の記事では、値をドラッグで直感的に調整できる Slider を解説します。
関連性の高いノード解説記事
- Godot入門:Node
- Godot入門:Control
- Godot入門:Button
- Godot入門:Label
- Godot入門:ItemList
- Godot入門:Tree
- Godot入門:TabContainer
- Godot入門:Slider
- Godot入門:ColorPickerButton
この記事はGodot 4.xをもとに執筆しています。


コメント