Unity Graph View打造图形化对话编辑系统（三）——UIBuilder构造Editor Window

视频效果演示

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

最终源码先附在此

点击此处下载源码

先得写几个类

编辑窗口分成左右两部分，左边是属性窗口（Inspector），当用户选择了一个节点时，可以在这里编辑它。右边是对话树的编辑窗口，编辑工作主要在这里进行。那么我们需要以下几个类：

HorizontalSplitView —— 水平方向分割窗口视图类，继承自TwoPaneSplitView
DialogueTreeView —— 对话树视图类，它是节点和连线的容器，继承自GraphView
DialogueNodeView —— 节点视图类，它负责渲染节点，是接口的容器，继承自Node
InspectorView —— 节点属性编辑面板，继承自VisualElement

这几个类，因为只需要运行在编辑模式中，所以，最好把他们放到Editor文件夹下面，这样可以确保在发布时不会将他们打包进工程。

以DialogueTreeView为例：

public class DialogGraphView : GraphView
{public new class UxmlFactory : UxmlFactory<DialogGraphView, UxmlTraits> { }// 对话树的Scriptable数据public DialogTree treeData = null;public DialogGraphView(){// 增加格子背景、内容缩放、拖动、框选组件。Insert(0, new GridBackground());this.AddManipulator(new ContentZoomer());this.AddManipulator(new ContentDragger());this.AddManipulator(new SelectionDragger());this.AddManipulator(new RectangleSelector());// 加载uss风格文件，类似HTML里的cssvar styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Dialog Graph/Editor/EditorWindow/DialogGraphWindow.uss");styleSheets.Add(styleSheet);}
}

用UIBuilder搭建如下的UI（注意左侧层级关系）：

需要注意的一个小坑：
InspectorView和DialogueTreeView，不要直接隶属面板容器，或者说他们不要有兄弟面板，否则就会导致鼠标位置响应不准确。要先给他套上一个VisualElement。这UIBuilder目前还是preview状态，尚未正式发布，所有还有一些各种各样的小问题。
默认情况下，打开我们自己定义的编辑窗口，是通过自定义的菜单来实现的，但是，我们想让我们的编辑窗口关联到Scriptable数据上，我们想让用户双击DialogTree时，能够自动打开编辑窗口，然后对该DialogTree进行编辑，所以，我们需要修改一下窗口的代码：

public class DialogGraphWindow : EditorWindow
{/*这是之前的打开方式，我们不再需要它了[MenuItem("Dialog Graph/Editor Window")]public static void OpenEditorWindow(){DialogGraphWindow wnd = GetWindow<DialogGraphWindow>();wnd.titleContent = new GUIContent("DialogGraphWindow");}*/// 当双击Assets时，如果双击的是一颗对话树，那我们就编辑它[OnOpenAsset(1)]public static bool OnOpenAssets(int id, int line){if( EditorUtility.InstanceIDToObject(id) is DialogTree tree ){DialogGraphWindow wnd = GetWindow<DialogGraphWindow>();wnd.titleContent = new GUIContent($"图形化对话系统");Label titleLab = wnd.rootVisualElement.Q<Label>("TreeViewTitle");if( titleLab != null )titleLab.text = $"对话图 -{tree.name}";wnd.graphView.Populate(tree);return true;}return false;}public static void CloseEditorWindow(){DialogGraphWindow wnd = GetWindow<DialogGraphWindow>();wnd.Close();}private DialogGraphView graphView = null;private InspectorView inspectorView = null;public void CreateGUI(){var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Dialog Graph/Editor/EditorWindow/DialogGraphWindow.uxml");visualTree.CloneTree(rootVisualElement);graphView = rootVisualElement.Q<DialogGraphView>("GraphView");graphView.OnNodeSelected += WhenNodeSelected;inspectorView = rootVisualElement.Q<InspectorView>("Inspector");Button bt = rootVisualElement.Q<Button>("SaveButton");bt.clicked += OnSaveButtonClicked;}private void OnSaveButtonClicked(){AssetDatabase.SaveAssets();}private void OnDestroy(){AssetDatabase.SaveAssets();}
}

还有一个问题，如果用户双击了一个DialogTree，进入了编辑状态，然后它又将这个DialogTree删除了，怎么办？此时我们的编辑窗口所编辑的目标已经消失了，窗口应该要自动关闭才合理。所以，我们需要监听这种事情的发生。查阅资料后，果然有一个方法：

public class CloseEditorBeforeAssetRemoved : UnityEditor.AssetModificationProcessor
{public static AssetDeleteResult OnWillDeleteAsset(string assetPath, RemoveAssetOptions option){if( AssetDatabase.LoadAssetAtPath<DialogTree>(assetPath) is DialogTree tree ){DialogGraphWindow.CloseEditorWindow();}return AssetDeleteResult.DidNotDelete;}
}

Unity Graph View打造图形化对话编辑系统（三）相关推荐

qpython3可视图形界面_PySide——Python图形化界面入门教程(三)
PySide--Python图形化界面入门教程(三) --使用内建新号和槽 --Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
流程图外部数据内部数据图形_数据治理工具：基于SQL图形化数据血缘系统的实现和使用...
之前文章,提出了基于SQL图形化数据血缘系统的概念和设计. 这里我们提出系统的实现和使用教程. 把这些做成了视频,放在了网站上:https://www.kexuejisuan.com/all_vedi ...
介绍 9 款 MySQL 常见的图形化工具，第三款我用了 10 年
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试资料来源:狂野小青年 blog.csdn.net/veloi/arti ...
如何通过使用Xmanager的图形化界面修改系统
1. 首先需要开启Xmanager中的Xmanager –Passive功能. 2. 通过Xshell远程登录服务器(本服务器是红帽5.6操作系统). 3. 登录用户可以选用root用户. 4. ...
全国青少年信息素养大赛图形化编程初赛·模拟三卷，含答案解析
目录一.单选题打印文章下载进行做题: 全国青少年电子信息智能创新大赛图形化编程·选做题模拟三卷一.单选题 1. 要使以下代码运行后画出如图所示三角形风车,
百度的智能对话定制与服务平台UNIT，图形化对话流管理（复杂对话）
通过添加连线.节点,开发者可以精准把控每一步对话流程,从而实现复杂场景下的对话机器人. 一,词槽收集节点可以询问搜集用户指定的内容(设置询问词,当播放询问词后,搜集用户录入内容到词槽) 二,连线节点 ...
JAVA图形化后台报表系统
项目介绍一款 Java 语言基于 SpringBoot2.x.Layui.Thymeleaf.MybatisPlus.Shiro.MySQL等框架精心打造的一款模块化.插件化.高性能的前后端分离架构 ...
wxpython有没有可视化设计_python图形化界面设计(wxpython)三树控件(wx.TreeCtrl)
本篇内容来自https://www.jb51.net/article/181158.htm wxPython树控件介绍树(tree)是一种通过层次结构展示信息的控件,如下图所示是树控件示例,左窗口中 ...
python制作图形化成绩查询系统_怎样制作考试成绩在线查询系统呢？
谢谢邀请考试成绩查询系统是可以让学生自己从网上查询自己考试成绩的系统,学生输入查询条件,比如学号.姓名等就可以看到自己的考试成绩,建立考试成绩查询系统需要开发查询系统源码,购买服务器空间等,非常繁琐 ...
windows10安装Ubuntu20.04及界面图形化
这里写自定义目录标题 windows10安装Ubuntu20.04及界面图形化一.安装前windows的配置二.ubuntu20.04系统安装三.ubuntu 20.04更换清华大学源四.中文 ...

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

Unity Graph View打造图形化对话编辑系统（三）——UIBuilder构造Editor Window

目录

视频效果演示

最终源码先附在此

先得写几个类

Unity Graph View打造图形化对话编辑系统（三）相关推荐

最新文章

热门文章