Unity编辑器扩展： Json数据可视化编辑工具

maltadirk · 发表于 2022-8-31 15:00

JSON数据可视化编辑效果
https://www.zhihu.com/video/1545868249761476608
前言

编辑器扩展算是比较纯粹的功能开发，基本没有什么理论知识，都是一些Unity相关接口的使用与数据类型的设计操作等。在本篇文章主要的文字描述基本都是在做代码解释，为了使内容接受度更高，我会尽量描述到代码结构中的每个细节。如果有对此不太了解又很感兴趣的小伙伴可以尝试手动过一遍代码，相信很快很快就可以掌握编辑器开发方面的使用技巧
在前篇文章中有对编辑器扩展UI控件方面的一些基础内容做了简单的描述，大概说明了Unity编辑器界面相关控件的创建接口，链接为：
Unity编辑器扩展： UI控件
在掌握编辑器界面控件使用的基础上，利用该控件完成数据编辑工具，对于编辑器扩展来说，通常来说都是以数据编辑为基础的功能扩展。而数据的存储通常以Json为媒介来记录信息，掌握了Json数据的编辑后，可以很方便的在此基础上扩展自己的功能逻辑
一、设定数据类结构

通常来说，功能模块使用数据的结构通常以类为基本单位。在本数据编辑工具开发案例中，需要先设定几个数据类，作为数据转换的基础
在文章开头的动图中，核心数据块的结构如下，排序数值字段与唯一标识身份ID，除此之外就是一些功能性数据。在本案例中设定了一些字符串与枚举类型的数据字段

为提升通用性，封装排序数值字段与唯一标识身份ID到BaseData作为数据类的基类，基于其特性直接设定两个Int数据值类型即可。而后续所有需编辑数据类作为BaseData的派生类设定。如下面代码中的CharacterData，在继承基类的基础上设定自身需编辑器的核心数据字段，这里简单的设计了字符串与枚举等几个数据，该数据类的数据内容与上图中的UI节点相对应，后面提到的数据节点代指该类

public class BaseData
{
/// 编辑器状态下排序
public int SortNum;
/// 唯一ID
public int ID;
}

public class CharacterData : BaseData
{
public string name;
public CharacterType type;
public DetialCharacterData detialData;
}

public class MainData
{
public Dictionary<string, CharacterData> CharacterDatas;
}
除了需要编辑的数据类外，编辑器本身也需要设定缓存一组数据来维护界面显示的相关格式，如节点的位置、节点被选中的状态等状态。创建数据类命名为EditorNodeData，并代称节点编辑器数据，而关于类中相关字段的具体使用方式会在后面数据初始化时提到：
public class EditorNodeData
{
public int sortNum;
public int DataID = 0;
public bool isInstace;
public bool isSelect;
public Rect rect;
}
二、将缓存数据初始化

开始编辑器界面绘制前，定义一些数据字段作为临时缓存使用，并对数据做初始化：

mainData：MainData 类型数据，用来管理由Json反序列化数据与序列化为Json数据，即Json数据编辑时的内存缓存数据载体
selectNode：记录选中节点的节点编辑器数据
editorNodes：所有节点编辑器数据
canvasScrollPosition：用于背景拖动的坐标缓存数据

在初始化数据时，除了对各种数据容器实例化外，比较重要的是读取Json内容并反序列化到mainData，用来载入上次编辑后的保存的节点数据内容，具体的反序列化过程会在后面的内容中提到

private MainData mainData;
private Rect viewRect;
private Vector2 canvasScrollPosition;
private EditorNodeData selectNode;
private Dictionary<int, EditorNodeData> editorNodes;
void InitData()
{
      mainData = JsonToMainData();
      if(mainData == null) mainData = new MainData();
      if (mainData.CharacterData == null) mainData.CharacterData = new Dictionary<string, CharacterData>();
      editorNodes = new Dictionary<int, EditorNodeData>();
      viewRect = new Rect(0, 0, position.width, position.height);
      canvasScrollPosition = new Vector2(0, 0);
      InitNodasData();
}

完成对mainData的反序列化后，通过对数据节点编辑初始化编辑器界面对应的数据对象。具体到细节中，对排序字段与ID字段来说，字节读取mainData数据即可。同时由于反序列化而来的数据已存在实体，默认设定isInstance为true。最为关键的编辑器辅助数据就是rect矩形定位字段，用来确定当前数据具象化的UI节点在场景中的位置

public void InitNodasData()
{
      if (mainData == null) return;
      foreach (var data in mainData.CharacterDatas.Values)
      {
         EditorNodeData node = new EditorNodeData();
         node.sortNum = data.SortNum;
         node.DataID = data.ID;
         node.rect = new Rect(20 + node.sortNum * 250, 80, 230, 160);
         node.isInstance = true;
         if (250 + node.sortNum * 250 > viewRect.width)
         {
            viewRect.width += 250;
         }
         editorNodes.Add(node.sortNum, node);
      }
}
三、数据类序列化与Json数据反序列化

由于Unity内置的Json处理工具JsonUtility对于List与Dictionary支持不是很友好，在本案例中就选择使用LitJson作为对Json数据序列化与反序列化的处理工具。LitJson可以直接从Github上下载获取，链接地址：LitJson
既然要通过Json为介质媒体存储数据，首先创建以.json为后缀的文本文件并导入项目中，当然也可以直接使用Txt文件。然后获取到项目文件所在的路径，在前篇编辑器基础介绍中有描述到定位项目Asset文件路径的接口，并结合项目Asset的相对路径设定全局路径：
public static string jsonFIlePath
{
      get
      {
         return Application.dataPath + &#34;/Datas/dataDemo.json&#34;;
      }
}
前面数据初始化的时候，提到需要将本地存储数据反序列化到内存中。具体操作就是在得到存储数据的文本文件路径后，就可以通过该路径来获取到文件中的字节流并通过LitJson的接口方法将其反序列化，转换为实例化的数据结构MainData。由于本案例操作数据量较小，直接主线程内操作即可，如果Json数据量过大，可以考虑协程异步读取数据避免主线程的卡顿
private MainData JsonToMainData()
{
      byte[] bts = File.ReadAllBytes(jsonFIlePath);
      if (bts.Length == <span class="m">0) return null;
      string str=System.Text.Encoding.UTF8.GetString(bts);
      if(string.IsNullOrEmpty(str)) return null;
      return JsonMapper.ToObject<MainData>(str);
}
类似Json数据的反序列化，对于Json数据的序列化的过程做一个上面的反向操作即可。不过在序列化之前，需要对缓存数据做处理，即剔除未实例化数据的排序序号，使得编辑数据排序保持连续：
private void WriteDataToText()
{
      SortMainData();
      string str = JsonMapper.ToJson(mainData);
      byte[] bts = System.Text.Encoding.UTF8.GetBytes(str);
      File.WriteAllBytes(jsonFIlePath, bts);
}
public void SortMainData()
{
      if (mainData == null) return;
      if (!editorNodes.ContainsKey(mainData.CharacterDatas.Count)) return;
      int index = 0;
      for (int i = 0; i < editorNodes.Count; i++)
      {
         if (editorNodes.isInstance)
         {
            CharacterData data = mainData.CharacterDatas[editorNodes.DataID.ToString()];
            data.SortNum -= index;
         }
         else
         {
            index++;
         }
      }
}

需要注意的是，在前面的数据准备阶段对MainData数据结构设计时，是以CharacterData的ID作为CharacterDatas的键，而比较特殊的地方就是将本来为int类型ID的键转换成了字符串类型，这是因为LitJson在对于Dictionary类型数据处理时，只支持以字符串为键的格式设定。不过可以通过修改其源码的类型判断方法来让其支持其他类型
如果想了解具体修改方法可以查看该链接：  修改LitJson以支持int类型的字典Key
创建编辑器界面

在上篇文章已经介绍了编辑器界面的创建细节，所以这里就不再做详细的描述，如果对代码中的内容不理解，可以翻阅前篇文章或者Unity官方提供的文档介绍：
public class JsonEditor : EditorWindow
{
private static JsonEditor editorWindow;
[MenuItem(&#34;Editor/JsonEditor &1&#34;)]
public static JsonEditor CreateWindow()
{
      editorWindow = GetWindow<JsonEditor>( &#34;Json数据编辑器&#34;);
      editorWindow.autoRepaintOnSceneChange = true;
      editorWindow.Show();
      return editorWindow;
}
}
编辑器内容绘制与功能实现

最上栏Button列表：

编辑器界面的第一部分是五个全局操作功能按钮，用来做数据节点的增删查与界面和数据的总体管理
private void UpButtonBlock()
{
      if (GUI.Button(new Rect(10, 10, 130, 40), &#34;添加节点&#34;))
      {
         AddNode();
      }
      if(GUI.Button(new Rect(160, 10, 130, 40),&#34;删除选中节点&#34;))
      {
         RemoveSelectNode();
         return;
      }
      if (GUI.Button(new Rect(310, 10, 130, 40), &#34;查找节点&#34;))
      {
         isShowFindWindow = true;
      }
      if (GUI.Button(new Rect(460, 10, 130, 40), &#34;手动保存节点数据&#34;))
      {
         WriteDataToText();
      }
      if (GUI.Button(new Rect(610, 10, 130, 40), &#34;关闭窗口&#34;))
      {
         if (EditorUtility.DisplayDialog(&#34;提示&#34;, &#34;确定是否关闭界面&#34;, &#34;确定&#34;, &#34;取消&#34;))
         {
            Close();
         }
      }
}
接下来根据UI功能设计数据处理逻辑代码
添加节点数据：
创建新的编辑器节点数据EditorNodeData 并初始化，加入到节点编辑缓存数据editorNodes中，其中关键节点的设计意义为：

sortNum：作为排序存在，根据当前已存在数据做累加

rect：为UI节点定位并设定大小

isInstance ：添加节点后，如果未填入节点ID，不会实例化该数据状态，以该字段记录

private void AddNode()
{
      EditorNodeData node = new EditorNodeData();
      node.sortNum = editorNodes.Keys.Count;
      node.rect = new Rect(20 + node.sortNum * 250, 80, 230, 160);
      editorNodes.Add(node.sortNum, node);
      if ( 250 + node.sortNum * 250 > viewRect.width)
      {
         viewRect.width= viewRect.width + 250;
      }
      node.isInstance = false;
}
由于增加节点个数，会使得内容窗口边长，如果不做处理，后面的节点内容无法显示，因此会在增加节点时，增大内容框的长度，而内容框的具体显示逻辑，会在后续的UI层逻辑时处理
删除选中节点数据：
维护一个节点数据CharacterData的引用做为选中节点数据的标定，如果该节点数据不为空时，可触发数据的删除逻辑，通过对mainData内的选中的CharacterData清除，并再次序列化与初始化所有数据，来达到节点编辑器数据数据editorNodes完整刷新的目的。虽然这种暴力这种方式算不上优雅，不过用起来倒是非常简单干脆
private void RemoveSelectNode()
{
      if (selectNode == null) return;
      if (EditorUtility.DisplayDialog(&#34;提示&#34;, &#34;确定删除当前节点数据，该行为不可回溯&#34;, &#34;确定&#34;, &#34;取消&#34;))
      {
         mainData.CharacterDatas.Remove(selectNode.DataID.ToString());
         foreach (var item in mainData.CharacterDatas.Values)
         {
            if(item.SortNum>selectNode.sortNum)
            {
                  item.SortNum--;
            }
         }
         selectNode = null;
         WriteDataToText();
         InitData();
      }
}

手动保存节点数据：调用WriteDataToText()将编辑完的数据序列化并保存到本地文件内

查找节点：通过bool类型isShowFindWindow记录查找状态，在后续的界面逻辑处理切换到该状态

关闭窗口：对于Unity中编辑器关闭界面，调用EditorWindow中的 Close完成关闭

核心节点绘制：

对于核心节点窗口有上面几种状态：

各个节点状态设定为：

节点0：首次创建节点，在未填写ID时，无法填写其他数据

节点1：完成ID填写后，设定一些未初始化的数据提示

节点2：数据填写完整后的象时效果

节点3：选中状态下的显示效果

创建一个新的节点时，由于尚未填写节点ID，所以无法直接创建节点数据的实例，需要设定提示输入数据节点的ID，同时对输入的ID做合法性判断，来确保其满足唯一性或者其他条件，例如在本案例中会通过字典查询方式来确保数据ID的唯一性
类似于ID，可以同样对于数据节点内字段的输入状态监控并添加风险提示，提升数据编辑的可靠性，如节点排序为1的节点编辑单位中，添加对角色名字是否为空字符串的判断提示，来尽量避免人为失误产生的数据格式错误

private void CreateNodeUI(int sortNum)
{
      EditorGUI.LabelField(new Rect(100, 0, 50, 30), &#34;节点:&#34; + sortNum.ToString(), titleFontStyle);
      if(editorNodes.TryGetValue(sortNum,out EditorNodeData node))
      {
         EditorGUILayout.Space();
         if(node.isInstance)
         {
            if(mainData.CharacterDatas.TryGetValue(node.DataID.ToString(),out CharacterData data))
            {
                  EditorGUILayout.IntField(&#34;ID&#34;, data.ID);
                  data.name = EditorGUILayout.TextField(&#34;角色名字：&#34;, data.name);
                  if (string.IsNullOrEmpty(data.name))
                  {
                     EditorGUILayout.HelpBox(&#34;名字为空，未填写内容&#34;, MessageType.Error);
                  }
                  data.type = (CharacterType)EditorGUILayout.EnumPopup(&#34;角色类型：&#34;, data.type);
                  if (node.isSelect)
                  {
                     if (GUI.Button(new Rect(0, 130, 250, 30), &#34;处于选中状态&#34;)){}
                     GUI.Button(new Rect(0, 130, 30, 30), &#34;&#34;, windowSelectStyle.box);
                  }
                  else
                  {
                     if (GUI.Button(new Rect(0, 130, 250, 30), &#34;点我选中&#34;))
                     {
                        ChangeSelectNode(node);
                     }
                  }
            }
         }
         else
         {
            node.DataID = EditorGUILayout.DelayedIntField(&#34;ID&#34;, node.DataID);
            if (node.DataID == 0)
            {
                  EditorGUILayout.HelpBox(&#34;填写完ID后解锁功能（回车保存）&#34;, MessageType.Error);
            }
            else
            {
                  if (mainData.CharacterDatas.ContainsKey(node.DataID.ToString()))
                  {
                     EditorGUILayout.HelpBox(&#34;该ID已存在，不可使用&#34;, MessageType.Error);
                  }
                  else
                  {
                     CreateCharacterData(node);
                     node.isInstance = true;
                  }
            }
         }
      }
      else
      {
         EditorGUILayout.HelpBox(&#34;系统出现未知错误&#34;, MessageType.Error);
      }
}
在上面的节点界面中，节点标题与选中状态会额外设定格式，添加示意图突出选中状态。该效果的实现就需要通过手动设定控件皮肤格式

private void InitStyleData()
{
      titleFontStyle = new GUIStyle();
      titleFontStyle.fontStyle = FontStyle.Bold;
      titleFontStyle.fontSize = 16;
      titleFontStyle.normal.textColor = Color.white;

      windowSelectStyle = new GUISkin();
      windowSelectStyle.box.normal.textColor = Color.blue;
      windowSelectStyle.box.normal.background = AssetDatabase.LoadAssetAtPath<Texture2D>(textureAssetpath);
}
Unity中默认不存在对号的提示图片，需要从外部下载并放入项目内，然后通过资源路径加载
需要注意的是，为了避免游戏运行无用的资源被打包，会将该Texture2D放置于Editor路径下，而将其加载到内存中可以通过AssetDatabase.LoadAssetAtPath接口实现
节点数据查找：

通过ID来执行索引，查找mainData数据中是否存在该ID的节点数据，如果存在，将相关字段的数据编辑UI显示出来，不存在则显示提示内容
private void FindNodeWindow(int id)
{
      EditorGUI.LabelField(new Rect(100, 0, 50, 30), &#34;查找数据节点&#34;, titleFontStyle);

      if (GUILayout.Button(&#34;关闭界面&#34;))
      {
         isShowFindWindow = false;
         return;
      }
      EditorGUILayout.LabelField(&#34;请输入要查找的数据ID：&#34;);
      findDataKey = EditorGUILayout.IntField(findDataKey);
      EditorGUILayout.Space(20);
      if (mainData.CharacterDatas.TryGetValue(findDataKey.ToString(), out CharacterData data))
      {
         EditorGUILayout.LabelField(&#34;基本信息(不可修改）：&#34;);
         EditorGUILayout.IntField(&#34;ID&#34;, data.ID);
         EditorGUILayout.TextField(&#34;名字：&#34;, data.name);

         if (data.detialData == null)
         {
            data.detialData = new DetialCharacterData();
         }
         EditorGUILayout.Space();
         EditorGUILayout.LabelField(&#34;详细信息(可修改）：&#34;);
         EditorGUILayout.LabelField(&#34;详细描述：&#34;);
         data.detialData.describe = EditorGUILayout.TextField(data.detialData.describe, GUILayout.MaxHeight(50));
         data.detialData.IsHardStraight = EditorGUILayout.Toggle(&#34;是否无敌&#34;, data.detialData.IsHardStraight);
      }
      else
      {
         EditorGUILayout.HelpBox(&#34;不存在该ID的数据&#34;, MessageType.Warning);
      }
}
实现窗口拖拽效果

将窗口设定为一个大的ScrollView,通过控制外边框与内嵌的框体大小，然后调整内框位置实现滑动，首先是外边框，通常将其与窗口宽高绑定，内框则需要根据窗口内的节点数量做计算。计算相关的代码在前面初始化阶段与添加几点编辑数据时有涉及到
而拖动效果需要监控数据的输入状态，通过定义Event即Unity的事件监控系统，可以得到鼠标移动的速度向量。根据该速度向量就可以对ScrollView的内嵌框坐标位移，得到窗口的拖动效果
需要注意的EditorWindow的控件刷新并不一定是每帧更新，如果希望编辑器界面可以实时响应我们的操作，通过GUI.changed = true来强制刷新界面状态

      canvasScrollPosition = GUI.BeginScrollView(new Rect(0,0, position.width, position.height), canvasScrollPosition, viewRect, true, true);
      Event e = Event.current;
      if (e.isMouse)
      {
         if (canvasScrollPosition.x >= 0 && canvasScrollPosition.x <= viewRect.width)
         {
            canvasScrollPosition -= e.delta * 1.2f;
            GUI.changed = true;
         }
      }
      RefreshNoteDatas();
      GUI.EndScrollView();
总结

整个Json数据可视化编辑器的基础代码结构已经完成。不过其中还有一些需要完善的地方，比如数据的批量操作，节点数据的复制粘贴、节点灵活性排序等等的功能扩展

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

Unity编辑器扩展： Json数据可视化编辑工具

本帖子中包含更多资源