Unity
エディター拡張
UnityEditor

【Unity】エディター拡張で木構造を表示させる

More than 3 years have passed since last update.

※この記事で使っているUnityのバージョンは Unity5.2.1p3 です。

image


木構造の表示

まずは木構造を表示させるウィンドウ


NodeEditor.cs

using UnityEngine;

using UnityEditor;
using System.Collections.Generic;

public class NodeEditor : EditorWindow
{
private Node root;

[MenuItem("Window/Node Editor")]
static void Open()
{
EditorWindow.GetWindow<NodeEditor>();
}

protected void OnGUI()
{
if (this.root == null)
{
this.Init();
}

BeginWindows();
this.root.Draw();
EndWindows();
}

private void Init()
{
// 木構造の初期化
this.root = new Node(0, new Vector2(200, 200));
this.root.childs.Add(new Node(1, new Vector2(100, 300)));
this.root.childs.Add(new Node(2, new Vector2(300, 300)));
this.root.childs[1].childs.Add(new Node(3, new Vector2(200, 400)));
this.root.childs[1].childs.Add(new Node(4, new Vector2(400, 400)));
}

public class Node
{
public int id;
public Rect window;
public List<Node> childs = new List<Node>();

public Node(int id, Vector2 position)
{
this.id = id;
this.window = new Rect(position, new Vector2(100, 50));
}

public void Draw()
{
this.window = GUI.Window(this.id, this.window, DrawNodeWindow, "Window" + this.id); // Updates the Rect's when these are dragged

foreach (var child in this.childs)
{
DrawNodeLine(this.window, child.window); // Here the curve is drawn under the windows
child.Draw();
}
}

void DrawNodeWindow(int id)
{
GUI.DragWindow();
GUI.Label(new Rect(30, 22, 100, 100), "Hoge" + id, EditorStyles.label);
}

static void DrawNodeLine(Rect start, Rect end)
{
Vector3 startPos = new Vector3(start.x + start.width / 2, start.y + start.height / 2, 0);
Vector3 endPos = new Vector3(end.x + end.width / 2, end.y + end.height / 2, 0);

Handles.DrawLine(startPos, endPos);
}
}
}



結果

以下のようなウィンドウが出ます。

image


Animatorウィンドウ化

次にAnimatorウィンドウの背景を描画させ、中ボタンでウィンドウ内をスクロールできるようにします。


Example.cs

using UnityEditor;

using UnityEngine;
using UnityEditor.Graphs;

public class Example : NodeEditor
{
static Example example;

Graph stateMachineGraph;
GraphGUI stateMachineGraphGUI;

[MenuItem("Window/Example")]
static void Do()
{
example = GetWindow<Example>();
}

void OnEnable()
{
if (stateMachineGraph == null)
{
stateMachineGraph = ScriptableObject.CreateInstance<Graph>();
stateMachineGraph.hideFlags = HideFlags.HideAndDontSave;
}
if (stateMachineGraphGUI == null)
{
stateMachineGraphGUI = (GetEditor(stateMachineGraph));
}
}

void OnDisable()
{
example = null;
}

void OnGUI()
{
if (example && stateMachineGraphGUI != null)
{
stateMachineGraphGUI.BeginGraphGUI(example, new Rect(0, 0, example.position.width, example.position.height));

// ノード描画
base.OnGUI();

stateMachineGraphGUI.EndGraphGUI();
}

}

GraphGUI GetEditor(Graph graph)
{
GraphGUI graphGUI = CreateInstance("GraphGUI") as GraphGUI;
graphGUI.graph = graph;
graphGUI.hideFlags = HideFlags.HideAndDontSave;
return graphGUI;
}
}



結果

image

中ボタンでドラッグできるようになります。


参考URL

Simple node editor

http://forum.unity3d.com/threads/simple-node-editor.189230/

けいごのなんとか Animatorウィンドウを自作する ~背景の描画~

http://anchan828.hatenablog.jp/entry/2013/07/16/002320