Unity5.6b2で追加されたTreeViewを使ってみる

2016年12月20日にUnity5.6b2がリリースされました。

unity3d.com

このバージョンでツリー階層を表現するためのTreeViewの機能が追加されています。

リリースノートより。

Editor: TreeView IMGUI Control, which can display hierarchical data that can be expanded and collapsed. Additionally it lets you create list views and multi-column tables for Editor tools.

このTreeViewは、今までヒエラルキーウィンドウで使われていた機能です。今まで内部のみの機能だったものがユーザーも扱えるようになったということです。

下の図はヒエラルキーウィンドウです。このように階層状態でGUIを表示するための機能がTreeViewです。

TreeViewを使ってみる

では早速、TreeViewを使ってみましょう。

TreeViewについては、スクリプトリファレンスに詳しく掲載されています。ゆっくりと読み解いていきましょう。

docs.unity3d.com

TreeView で必要なクラス

TreeViewでは３つのクラスが必要です。

クラス	説明
TreeView
TreeViewItem	TreeViewに表示する要素
TreeViewState	TreeViewやTreeViewItemの状態を管理するクラス

とりあえず使ってみる（シンプルな作成例）

TreeViewクラスは抽象クラスです。まずはTreeViewクラスを継承した ExampleTreeView クラスを作成します。

using UnityEditor.IMGUI.Controls;

public class ExampleTreeView : TreeView
{
    public ExampleTreeView(TreeViewState state) : base(state)
    {
    }

    protected override TreeViewItem BuildRoot()
    {
        throw new System.NotImplementedException();
    }
}

BuildRoot はツリー階層のルートとなる要素を作成するためのメソッドです。 BuildRootメソッド内に次のコードを追加します。

protected override TreeViewItem BuildRoot()
{
    var root = new TreeViewItem(id: 1, depth: -1, displayName: "ルート");

    var parent = new TreeViewItem(id: 2, depth: 0, displayName: "親その１");

    root.children = new List<TreeViewItem>
    {
        parent,
        new TreeViewItem(id: 3, depth: 0, displayName: "親その２"),
    };

    parent.children = new List<TreeViewItem>
    {
        new TreeViewItem(id: 4, depth: 1, displayName: "子供"),
    };

    return root;
}

BuildRootメソッド内の処理を図にするとこんな感じ。

各要素にユニークなID（id）とインデントの深さ（depth）と表示名（displayName）を設定しています。

これで、TreeViewItemの準備ができたので次はTreeViewの設定に移ります。

まずは、適当な EditorWindow を作成しましょう。

using UnityEditor;

public class ExampleEditorWindow : EditorWindow
{
    [MenuItem("Window/ExampleEditorWindow")]
    static void Open()
    {
        GetWindow<ExampleEditorWindow>();
    }
}

そして OnEnable メソッド内で TreeViewState と ExampleTreeView オブジェクトを生成します。 その際に TreeView の初期化のために Reload を呼び出しておきます。

private TreeViewState state;
private ExampleTreeView treeView;


void OnEnable()
{
    state = new TreeViewState();
    treeView = new ExampleTreeView(state);
    treeView.Reload();
}

そして TreeView を OnGUI メソッド内で呼び出します。

void OnGUI()
{
    treeView.OnGUI(new Rect(0, 0, position.width, position.height));
}

これで TreeView を表示するための準備ができました。次のコードはExampleEditorWindowの完全なコードです。

using UnityEditor;
using UnityEditor.IMGUI.Controls;
using UnityEngine;

public class ExampleEditorWindow : EditorWindow
{
    [MenuItem("Window/ExampleEditorWindow")]
    static void Open()
    {
        GetWindow<ExampleEditorWindow>();
    }

    private ExampleTreeView treeView;
    private TreeViewState state;

    void OnEnable()
    {
        state = new TreeViewState();
        treeView = new ExampleTreeView(state);
        treeView.Reload();
    }

    void OnGUI()
    {
        treeView.OnGUI(new Rect(0, 0, position.width, position.height));
    }
}

ルートとして設定した TreeViewItem オブジェクトは表示されないので注意してください。

もちろん、カーソルで選択もできますしキーボードによる移動も可能です。

意外と高機能

ツリー階層で表示するだけかと思いきや他２つの機能もあります。

検索機能

今回作成したサンプルを使用した場合、 treeView.searchString に検索文字を代入するだけで検索機能を使うことができます。

    void OnGUI()
    {
        treeView.searchString = EditorGUILayout.TextField(treeView.searchString);

        treeView.OnGUI(new Rect(0, 20, position.width, position.height));
    }

マルチカラム機能

HTMLの table といえば想像しやすいでしょうか。テーブルのヘッダーのようなものを作成することができます。

#Unity3d 5.6 beta 2 is out! Includes this: "TreeView, can display hierarchy data that can be expanded & collapsed" https://t.co/DxmhqdHc03 pic.twitter.com/oyUhQeekiR

— Christopher Pope (@CreativeChris1) 2016年12月21日

ヘッダーは自由にリサイズすることができます。また、カラムごとにソートをすることもできます。（次の図はソート処理を書いてないため、ソートされていません）

このマルチカラム機能は、まだ開発段階のような感じがしており、上記のツイートのような実装をする場合は自分でTreeViewを拡張しなければいけません。

まとめ

ツリー階層を表現するためのTreeViewがついに実装（正確には公開）され、今まで EditorGUILayout.Foldout と EditorGUI.indentLevel を駆使して作成していたツリー階層が楽に作成できるようになりました。ですが、意外と高機能なため使いこなすのには時間がかかりそうです。

TreeViewについてより詳しい情報を知りたい場合は、フォーラムを参照してください。サンプルプロジェクトもあるのでまずはそちらを動かしてみるのもいいでしょう。

New TreeView API - https://forum.unity3d.com/threads/new-treeview-api.447169/

いいか、エクセルの代わりに使うなんてことを考えるんじゃないぞ地獄を見るぞ。