如何为Graph或Tree结构编写GUI编辑器

Question

Unity3D的Mecanim动画系统具有自定义EditorWindow,允许定义一个树(在此情况下的共混物树)彻底GUI.

看起来像:

它提供了创建节点(状态)和连接它们(转换)的可能性.

现在,我正在开发一些图形和树结构,我想编写一个编辑器扩展,以便让我的游戏设计师能够填充这些结构.

我想要最重新创建的EditorWindow就像Mecanim动画师一样(如上图所示).

我的问题是:我可以使用任何可用的组件来执行此类任务吗？是否有用于绘图和连接框和箭头的内置类？或者我需要自己完全编写GUI元素？

Answer 1

我没有问"找工具,图书馆或最喜欢的场外资源".我想知道如何Mecanim使用Unity3DAPI或引擎本身提供的一些可用组件重现类似的图形编辑器(对不起,如果问题不明确).

这是我的答案:

不,没有可用的组件可用于绘制这种图形,但是编写自己的图形非常容易.这是一个使用可拖动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();
    }
}

Answer 2

你错了.您在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{


 }

}

创建新的EditorWindow.

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以获得更多样式和绘图控件.从NodeGUI和EdgeGUI中完成的UnityEditor.Graphs.AnimationStateMachine.GraphGUI样式中复制粘贴代码.

Answer 3

这个主题非常复杂,但是如果你想要一个很好的入门脚本存储库,请在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