|
|
（本文作者 @对马骑马使用炎拳 ）
大家好，我是炎拳。
上一篇文章：皮皮关：使用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站：“皮皮关做游戏” |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2021-11-28 13:40
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡