Unity编辑器扩展：使用xNode制作自己的可视化工具（2）

unityloverz · 发表于 2021-11-28 13:40

（本文作者 @对马骑马使用炎拳）
大家好，我是炎拳。
上一篇文章：皮皮关：使用Xnode制作可视化剧本编辑插件（1），简单的展示了我使用xNode 制作的小工具，这一篇就来分享下Xnode的用法，以及在开发过程中收获的一些编辑器扩展的知识。
在使用xNode 开发前，还是需要略微了解一些Unity3D中的定制特性：例如当你不想在面板上显示你的公开字段，你可以在字段上添加[HideInInspector]，它的功能是在Inspector面板中隐藏public属性，没有序列化的功能。

我简单写了一篇读书笔记，给同样是新手的朋友做个参考：
引用书中的一段话简单解释就是：“定制特性其实是一个类型的实例。Mono之所以能跨平台原因便是其符合”公共语言规范（Common Language Specification (CLS)）“的要求，根据公共语言规范定制特性类必须直接或者间接从公共抽象类System.Attribute派生。”

F12【HideInInspector】

知道了C#中的特性是从System,Attribute 派生而来的一个类的实例。同样，Unity中C#的游戏脚本也有派生自system.Attribute中的特性，Xnode 中的定制特性同样如此。

<hr/>
1 xNode的用途和下载途径

再简单的介绍下xNode，它是一个完全开源的免费插件，官方文档的介绍很吸引人：

xNode是超级用户友好的，直观的，它将帮助您快速了解节点图。由于占用的空间很小，它非常适合作为自定义状态机、对话系统、决策树的基础架构。

xNode官方文档也较为齐全，节省了我很多学习时间，在Github上获取最新的xNode工程，扔到你的Unity工程下就可以使用了，地址在这：
2  xNode的核心概念

援引自官方文档，一个xNode项目由这三个部分组成：
Graph：
每个xNode项目都从创建Graph开始，Graph可以看成是你图形化界面的入口，新建一个自定义Graph也很简单，以我的工具为例：
using XNode;

//通过Unity菜单来创建自定义Graph
[CreateAssetMenu(fileName = &#34;DialogueGraph&#34;)]
public class DialogueGraph : NodeGraph
{
}然后通过菜单生成新的Graph，Graph中包含了项目中Node列表的信息，可以在面板上直接进行操作：

接着看看自定义Graph的父类NodeGraph，可以发现它也同样是继承了Unity ScriptableObject的抽象子类，并且提供了丰富的Node相关虚方法：

对ScriptableObject感兴趣的朋友可以自行搜索资料，不懂也没关系，你只要知道它的用法就好：在编辑器会话期间，将数据保存为项目中的资源，这样方便在项目运行的时候使用。
Node：
自定义Graph继承自NodeGraph，自定义的Node继承自Node，一个标准的Node包含单个输入端口和输出端口，通过对任意公开字段添加[Input]或[Output]属性生成：
public class SimpleNode : Node {
[Input] public float value;
[Output] public float result;
}Node同样是一个继承自ScriptableObject的抽象类，从Node派生出的任何自定义Node子类，都是有效节点，同时会默认添加到Graph的上下文菜单中，如图所示：

也可以自定义Node的样式和名称
  [CreateNodeMenu(&#34;SimpleNode1111111&#34;)]
[NodeWidth(400)]
[NodeTint(73, 236, 209)]//Node颜色
public class SimpleNode : Node
{
      [Input] public float value;
      [Output] public float result;
}

Port：
端口（port）是节点（Node）之间通信的大门，他们既可以是输入，也可以是输出。一个Node可以包含多个port。
一般只要Unity能序列化的类型都可以作为端口，当然我们可能需要在Node上动态添加或者删除端口，这里就需要去定义单独Node上端口的渲染了，之后会详细说。
这里放个端口的常见用法（在Node类中）：获取其连接的node
// Get the connected node.
NodePort otherPort = GetOutputPort(&#34;myOutput&#34;).Connection
if (otherPort != null) {
  MyNode nextNode = otherPort.node as MyNode;
}
<hr/>
介绍完基础概念，接下来分享下制作这个剧本编辑插件的过程和一些有意思的问题：
首先，我的需求是能快速制作一段类似《星露谷物语》中过场演出，虽然玩家触发剧情的时间和方式都比较随机，但还是每段剧情本身还是遵循传统的树状叙事结构，通过玩家的选择来触发剧情：

树状叙事结构

但在《星露谷物语》中，玩家和NPC对话的过程会时不时穿插一些人物的动作和表情，来丰富演出效果，伴随的可能有对话UI短暂消失等待人物动画播放完成，终止UI点击事件等需求。所以我需要为每一段对话提供一些功能选项，方便快速配置这些功能。
如何定义每段对话也很重要，Xnode Graph所采用的渲染方法来自Unity的EditorWindow类，移动鼠标时会强制调用OnGUI（）进行刷新，所以Graph中的Node越多，刷新次数就越多，不少开发者也遇到了大量Node存在时刷新卡顿的问题。如果每段对话都使用一个Node，那200句话可能就要新建一个Graph，并且修改起来十分麻烦，所以最终我希望能在一个Node中尽可能的添加对话，所以对话Node应该是这样：

功能如下：对话依次向下播放，根据对话类型，对话框展示出不同的效果。如果一段对话过长或者遇到了选择分支，也可以更改对话类型来主动生成一个输出端口进行跳转。
思路清晰了，但问题是怎么在Xnode上渲染出这样的界面呢？xNode提供了解决方案，首先是更加深入的自定义Node外观，官方提供了一个简单的加法器案例：
// SimpleNode.cs

public class SimpleNode : Node{
public int a;
public int b;
[Output] public int sum;

//获取对应端口的值
public override object GetValue(NodePort port) {
      return GetSum();
}

public float GetSum() {
      return a + b;
}
}
// Editor/SimpleNodeEditor.cs

//用于关联你需要自定义的Node
[CustomNodeEditor(typeof(SimpleNode))]

public class SimpleNodeEditor : NodeEditor {
private SimpleNode simpleNode;

public override void OnBodyGUI() {
      if (simpleNode == null) simpleNode = target as SimpleNode;

      // Update serialized object&#39;s representation
      serializedObject.Update();

      NodeEditorGUILayout.PropertyField(serializedObject.FindProperty(&#34;a&#34;));
      NodeEditorGUILayout.PropertyField(serializedObject.FindProperty(&#34;b&#34;));
      UnityEditor.EditorGUILayout.LabelField(&#34;The value is &#34; + simpleNode.GetSum());
      NodeEditorGUILayout.PropertyField(serializedObject.FindProperty(&#34;sum&#34;));

      // Apply property modifications
      serializedObject.ApplyModifiedProperties();
}
}

自定义内容的问题貌似解决了，照葫芦画瓢就好，但如何让xNode根据一个对话列表来生成多个端口呢？官方也提供了一个实验性质的方法-Dynamic Port List：
public class SimpleNode : Node {
[Output(dynamicPortList = true)] public float[] myArray;
}

看起来图中的节点作为剧本中的选择项不错，但作为对话节点还是过于混乱了，我并不需要每个对话元素都显示一个端口。
好在xNode 给我们提供了自定义绘制列表的方法，实际上最新版本的xNode中已经集成了部分Odin的功能（不知道它怎么打通关节的哈哈），Odin同样是一款绘制Unity界面非常好用的工具，比方说Unity和C#并未支持字典的序列化，在Odin的支持下我们可以很轻松的让字典在Unity Inspector面板中显示并修改：

使用Odin序列化将字典显示在Inspector面板上，Odin直接完成了对应元素的排版，太舒服了

在xNode的界面同样支持Odin，但我对Odin的了解不多，还是没法达成想要的效果，最终还是选择使用Unity自身的编辑器拓展方法，原因也很简单，xNode本身绘制列表的方法也是使用Unity ReorderableList（可重排序列表），其中元素可以自由拖动，非常方便，感兴趣的朋友可以看看这篇文章：
Unity编辑器拓展之二：ReorderableList可重新排序的列表框（复杂使用）_静风霁-CSDN博客
最终我做出来的效果如下：

代码还挺长的，感兴趣的朋友可以直接去上一篇文章中下载工程看看，只提一点很重要的，xNode本身并未考虑到我这样奇葩的需求，一开始我发现并不能通过修改类型自由生成Port，最后在老师的帮助下发现了原因，稍微改了下DynamicPortList这个方法，有需要的朋友自取：
public static void DynamicPortList(string fieldName, Type type, SerializedObject serializedObject, XNode.NodePort.IO io, XNode.Node.ConnectionType connectionType = XNode.Node.ConnectionType.Multiple, XNode.Node.TypeConstraint typeConstraint = XNode.Node.TypeConstraint.None, Action<ReorderableList> onCreation=null, bool forceReset=false) {
         XNode.Node node = serializedObject.targetObject as XNode.Node;

         var indexedPorts = node.DynamicPorts.Select(x => {
            string[] split = x.fieldName.Split(&#39; &#39;);
            if (split != null && split.Length == 2 && split[0] == fieldName) {
                  int i = -1;
                  if (int.TryParse(split[1], out i)) {
                     return new { index = i, port = x };
                  }
            }
            return new { index = -1, port = (XNode.NodePort) null };
         }).Where(x => x.port != null);
         List<XNode.NodePort> dynamicPorts = indexedPorts.OrderBy(x => x.index).Select(x => x.port).ToList();

         node.UpdatePorts();

         //在这里发现DynamPortList本身会将List缓存到rlc字典里，并且之后每次刷新，不会对list进行更改
         ReorderableList list = null;
         Dictionary<string, ReorderableList> rlc;
         if (reorderableListCache.TryGetValue(serializedObject.targetObject, out rlc)) {
            if (!rlc.TryGetValue(fieldName, out list)) list = null;
         }

         //重写判定，强制对其进行更改
         // If a ReorderableList isn&#39;t cached for this array, do so.
         if (list == null || forceReset) {
            SerializedProperty arrayData = serializedObject.FindProperty(fieldName);
            list = CreateReorderableList(fieldName, dynamicPorts, arrayData, type, serializedObject, io, connectionType, typeConstraint, onCreation);
            if (!reorderableListCache.ContainsKey(serializedObject.targetObject))
            {
                  reorderableListCache.Add(serializedObject.targetObject, new Dictionary<string, ReorderableList>() { { fieldName, list } });
            }
            else
            {
                  //对list进行替换
                  rlc[fieldName] = list;
            }
            //if (reorderableListCache.TryGetValue(serializedObject.targetObject, out rlc)) rlc.Add(fieldName, list);
            //else reorderableListCache.Add(serializedObject.targetObject, new Dictionary<string, ReorderableList>() { { fieldName, list } });
         }
         list.list = dynamicPorts;
         list.DoLayoutList();

      }

对话列表中元素的类：
/*准备用于序列化的对象必须设置 [System.Serializable] 标签
      ，该标签指示一个类可以序列化
      */
      [Serializable]
public class SingleChatClass
{
public int name;

public Sprite emoji;

public ChatType chatType;

public string content;

}自定义绘制List及其中元素的方法：
public class MyNodeEditor : NodeEditor {
public override void OnBodyGUI() {
      // Draw GUI
      NodeEditorGUILayout.DynamicPortList(
         &#34;myFloatList&#34;, // field name
         typeof(float), // field type
         serializedObject, // serializable object
         NodePort.IO.Input, // new port i/o
         Node.ConnectionType.Override, // new port connection type
         OnCreateReorderableList); // onCreate override. This is where the magic happens.
}

//这里你可以选择使用Unity的方法来绘制元素，再传入DynamicportList方法中，这是完全可行的
void OnCreateReorderableList(ReorderableList list) {
      // Override drawHeaderCallback to display node&#39;s name instead
      list.drawHeaderCallback = (Rect rect) => {
         string title = serializedObject.targetObject;
         EditorGUI.Label(rect, title);
      };
}
}
<hr/>
最后再聊聊程序实现的思路，实际上和树状叙事一样，首先得有一个StartNode，用于定位这段剧本从哪开始；再进入ChatNode或是OptionNode，根据每个元素的类型决定如何播放对话，之后在程序中获取所有的Node，根据类型依次执行就好了。

我在其中又增加了自由触发方法的对话类型，只需要提前在面板上手动注册过方法，就可以在对话过程中自由调用，通过这种方法和Unity Timeline的Signer配合使用，最后大致完成了想要的过场演出~

总结下来，实际上这个工具配合Timeline还是有很多不足，因为暂停和播放TimeLine都是由Graph中的数据控制的，实际上应该由Timeline来主导这一切。这导致我对Timeline播放的时间无法直观的控制，之后可能还会改进。
市面上已经有不少完善强大的剧本编辑插件，但自己造轮子的过程确实收获颇多，最后放个xNode文档链接：
<hr/>（本文作者 @对马骑马使用炎拳）
欢迎加入游戏开发群欢乐搅基：1082025059
对游戏开发感兴趣的童鞋可戳这里进一步了解：http://www.levelpp.com/
我们的公众号：“皮皮关&#34;
B站：“皮皮关做游戏”

kirin77 · 发表于 2021-11-28 13:45

xNode多了特别卡顿有什么办法解决没

Mecanim · 发表于 2021-11-28 13:46

工程中我写了个文档有提到，Xnode极限基本就是300多个Node左右，主要是因为它使用的Unity渲染GUI的方法来渲染Node，每次鼠标移动都会强制刷新，每个Node的信息也会强制刷新，Node一多刷新次数非常恐怖，可以考虑多建几个Graph，或者写个扩展尽量收缩Node展示的属性（我的工具有写）

fwalker · 发表于 2021-11-28 13:48

我自己魔改了一套xNode 做了个subgraph。感觉在项目中这个不是个长久的事儿，哎，感觉没法再继续优化了

zt3ff3n · 发表于 2021-11-28 13:51

节点较多的话可以考虑使用NodeGraphProcessor，基于Unity GraphView，参考这篇博客：https://www.lfzxb.top/nodegraphprocesssor-and-odin/

		自动登录	找回密码
密码			立即注册

Unity编辑器扩展：使用xNode制作自己的可视化工具（2）

本帖子中包含更多资源