Unity Graph View打造图形化对话编辑系统（一）

Unity Graph View打造图形化对话编辑系统（一）

效果图

没有效果图光靠嘴说都是耍流氓。先来个效果图如下：

效果图2：

基于上图的运行效果视频：

Graph View打造图形化对话编辑系统效果展示

实现思路

这有点复杂，大体上需要解决（学习）以下问题：

• 数据抽象

  图形化编辑虽然看起来很酷，但实际上它只运行在编辑模式下，在程序真正运行时，图形化系统时没有卵用的，而且根本就不应该加载它。所以，我们的系统会被分为两部分：第一部分是对话系统的核心数据，就是谁说了什么，怎么说之类的，这一部分我们用Scriptable来实现，这样很容易进行持久化。第二部分，就是图形化编辑了，它只运行在Editor模式下，但它可以编辑我们的核心数据。

• 实现图形化编辑功能

  图形化编辑器，可以借助unity中的GraphView来实现，实际上shader graph就是用这个实现的，但是目前网上几乎没有这方面的文档，官网全是鸟语而且也不怎么全面，所以，我是通过各种摸索，自己硬鼓捣出来的，有一些小细节没有找到对应的API，还有一些因为不知道有没有更好的API，总感觉实现的不是很“优雅”。但基本上功能是已经实现了，而且挺好用。

• 实际运行

  显然，不能脱离编辑器运行的话（不在Editor模式下），就没有任何意义。

实现步骤

这过程有点长，应该会分为很多文章，我们一步一步的来实现它吧：

• 一、效果展示及实现思路
• 二、数据节点抽象
• 三、UIBuilder构造EditorWindow
• 四、实现EditorWindow各类视图类
• 五、实现运行组件，让对话系统跑起来

最终源码先附在此

点击此处下载源码