読者です 読者をやめる 読者になる 読者になる

けいごのなんとか

Unityユーザーとしてのブログ。ギリギリ路線走ってます。

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です。 f:id:anchan828:20161222230233p:plain

TreeViewを使ってみる

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

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

docs.unity3d.com

TreeView で必要なクラス

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

クラス 説明
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: "親その1");

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

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

    return root;
}

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

f:id:anchan828:20161222233813p:plain

各要素にユニークな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 オブジェクトは表示されないので注意してください。

f:id:anchan828:20161223000729g:plain

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

f:id:anchan828:20161223000949g:plain

意外と高機能

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

検索機能

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

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

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

f:id:anchan828:20161223010456g:plain

マルチカラム機能

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

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

f:id:anchan828:20161223012757g:plain

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

まとめ

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

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

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

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