c# - How to write a GUI editor for Graph or Tree structures

Question

Unity3D's Mecanim animations system has a custom EditorWindow that allows to define a tree (a blend tree in this case) thorough GUI.

It looks like:

enter image description here

It offers the possibility of creating nodes (states) and connect them (transitions).

Now, I'm developing some graph and and tree structure and I would like to write an editor extension in order to allow my game designer to populate those structures.

I want pretty most recreate exactly an EditorWindow like the one of Mecanim animator (figure above).

My question is: are there any available components that I can use for such a task? Is there any builtin class used for the drawing and connecting boxes and arrow? Or I need to write completely the GUI elements by my own?

score 17 · Accepted Answer

我不是在问“寻找工具、图书馆或最喜欢的场外资源”。我想知道如何Mecanim使用 API 或引擎本身提供的一些可用组件来重现类似的图形编辑器Unity3D（对不起，如果问题不清楚）。

这是我的答案：

不，没有可用的组件可用于绘制那种图形，但编写自己的图形很容易。这是一个带有简单示例的片段，它使用可拖动的GUI.Window来表示节点，并使用Handles.DrawBezier来绘制边缘：

public class GraphEditorWindow : EditorWindow
{
    Rect windowRect = new Rect (100 + 100, 100, 100, 100);
    Rect windowRect2 = new Rect (100, 100, 100, 100);


    [MenuItem ("Window/Graph Editor Window")]
    static void Init () {
        EditorWindow.GetWindow (typeof (GraphEditorWindow));
    }

    private void OnGUI()
    {
        Handles.BeginGUI();
        Handles.DrawBezier(windowRect.center, windowRect2.center, new Vector2(windowRect.xMax + 50f,windowRect.center.y), new Vector2(windowRect2.xMin - 50f,windowRect2.center.y),Color.red,null,5f);
        Handles.EndGUI();

        BeginWindows();
        windowRect = GUI.Window (0, windowRect, WindowFunction, "Box1");
        windowRect2 = GUI.Window (1, windowRect2, WindowFunction, "Box2");

        EndWindows();

    }
    void WindowFunction (int windowID) 
    {
        GUI.DragWindow();
    }
}

score 16 · Accepted Answer

你错了伙计。您在 UnityEditor 中看到的所有内容都必须在某处有代码。您的 MecanimEditor 在命名空间 UnityEditor.Graphs.AnimationStateMachine 中。

扩展 UnityEditor.Graphs 中的 GraphGUI。该类负责绘制图形。

using System;
using UnityEditor;
using UnityEngine;
using UnityEditor.Graphs;
using System.Collections.Generic;

namespace ws.winx.editor.components
{
 public class GraphGUIEx:GraphGUI{


 }

}

创建新的编辑器窗口。

public class GraphEditorWindow : EditorWindow
 { 
  static GraphEditorWindow graphEditorWindow;
  Graph stateMachineGraph;

  GraphGUIEx stateMachineGraphGUI;

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

....

创建图结构。它将包含节点和节点之间的边。

stateMachineGraph = ScriptableObject.CreateInstance<Graph> ();
    stateMachineGraph.hideFlags = HideFlags.HideAndDontSave;

                 //create new node
    Node node=ScriptableObject.CreateInstance<Node>();
    node.title="mile2";
    node.position=new Rect(400,34,300,200);


    node.AddInputSlot("input");
    start=node.AddOutputSlot("output");
    node.AddProperty(new Property(typeof(System.Int32),"integer"));
    stateMachineGraph.AddNode(node);

//create new node
    Node node=ScriptableObject.CreateInstance<Node>();
    node.title="mile";
    node.position=new Rect(0,0,300,200);

    Slot end=node.AddInputSlot("input");
    node.AddOutputSlot("output");
    node.AddProperty(new Property(typeof(System.Int32),"integer"));
    stateMachineGraph.AddNode(node);

//create edge
    stateMachineGraph.Connect(start,end);

graphGUI = ScriptableObject.CreateInstance<GraphGUIEx>();
graphGUI.graph = graph;

绘制图形。

void OnGUI ()
  {

   if (graphEditorWindow && stateMachineGraphGUI != null) {
    stateMachineGraphGUI.BeginGraphGUI (graphEditorWindow, new Rect (0, 0, graphEditorWindow.position.width, graphEditorWindow.position.height));
               stateMachineGraphGUI.OnGraphGUI ();


    stateMachineGraphGUI.EndGraphGUI ();

   }
  }

覆盖 NodeGUI 或 EdgeGUI 以获得更多样式和绘图控制。从 UnityEditor.Graphs.AnimationStateMachine.GraphGUI 样式复制粘贴代码，在 NodeGUI 和 EdgeGUI 中完成。

score 6 · Accepted Answer

这个话题相当复杂，但如果你想要一个不错的启动脚本存储库，请查看 Unity 官方网站http://forum.unity3d.com/threads/simple-node-editor.189230/上的这个论坛帖子

*更新：有人发布了一个复杂的教程系列，详细说明了如何准确地创建您所描述的内容。享受https://www.youtube.com/watch?v=gHTJmGGH92w。

编辑：我在 GitHub 存储库中编写了一个功能齐全的 Unity 图形编辑器。主要集中在技能树上。它并不完美，但展示了功能齐全的图形编辑器的外观。以下链接中的源代码。

https://github.com/ashblue/unity-skill-tree-editor

score 0 · Accepted Answer

您可以尝试为每个树对象内部的数据创建一个对象。然后您可以尝试使用 System.Drawing 创建自定义控件（图中的方框），也可以使用 System.Drawing 为每个树对象创建这些箭头。确保每个 DataObject 都有 ID 和箭头应该指向的位置的信息。如果您在创建自定义控件方面需要帮助，我过去曾在 YouTube 上使用过本教程。

score 0 · Accepted Answer

我从Unity AssetStore找到了一个Unity UI FlowChart Asset， Broken Machinery开发的UI Graph，免费使用！

score -3 · Accepted Answer

我已经完成了一个使用 TreeViewer 和复选框创建自定义图形的界面。是基于“邻接表”的想法。如果您选中了“根”顶点的复选框，它会使其与另一个顶点相邻，如果您只想让几个顶点相邻，那么您可以单独选择每个顶点。我已经为 java 开发了这个，但我相信它也可以用于你的目的。这是一张我希望能澄清我的想法的图片。

http://i.stack.imgur.com/3PhT9.jpg

c# - How to write a GUI editor for Graph or Tree structures

6 回答 6

Related

Reference