1. 项目概述为什么我们需要一个专属的关卡编辑器做地牢RPG关卡设计是核心中的核心。无论是《暗黑破坏神》的随机地下城还是《哈迪斯》精心编排的房间序列其背后都有一套复杂的数据逻辑。早期开发我们可能用Excel表格来配置房间类型、敌人、宝箱和连接关系但这种方式效率低下且无法直观预览关卡结构。当策划想调整一个房间的出口或者美术想看看不同主题房间的拼接效果时沟通成本会急剧上升。Unity自带的场景编辑器Scene View虽然强大但它更适合处理具体的、实例化的游戏对象摆放对于抽象的、数据驱动的关卡逻辑关系管理就显得力不从心了。这时一个可视化的、基于节点的关卡编辑器就成了刚需。它能让策划和设计师在更高维度上“画”出关卡蓝图将房间、事件、条件、奖励等元素抽象为节点用连线表示它们之间的逻辑或空间关系所见即所得。Unity的GraphView正是为此而生。它是Unity UI Toolkit的一部分专为创建节点图Node Graph编辑器而设计。相比于传统的EditorWindowGUI方案GraphView提供了完整的节点、端口、连线、缩放、框选等交互功能让我们能像使用Shader Graph或Animation Window一样构建自己的可视化编程工具。这次我们就用GraphView从零开始打造一个专属于我们地牢RPG项目的关卡编辑器。目标很明确让关卡设计流程可视化、数据化、可迭代最终提升整个团队的生产力。2. 核心思路与架构设计在动手写代码之前我们必须想清楚这个编辑器要管什么以及数据最终如何驱动游戏。一个地牢关卡本质上是一个由“房间”构成的图Graph。每个房间是一个节点房间之间的通道门、楼梯、传送点就是连接节点的边。但我们的需求不止于此房间内包含的具体内容敌人、陷阱、宝箱、剧情触发点也需要被定义和管理。2.1 数据驱动设计分离逻辑与表现这是整个项目的基石。编辑器的核心任务是生成一份关卡数据文件例如JSON或ScriptableObject而不是直接创建场景中的GameObject。这份数据文件描述了关卡全局信息关卡ID、名称、推荐等级、背景音乐等。房间节点列表每个房间的ID、类型战斗、宝藏、商店、事件、BOSS、坐标用于在编辑器中布局、尺寸。连接边列表记录哪些房间是相连的以及连接的方向单向/双向和类型普通门、锁住的门、秘密通道。房间内容每个房间内包含的实体列表如敌人ID和数量、宝箱ID、可交互物体、触发器区域等。游戏运行时一个独立的“关卡加载器”系统会读取这份数据文件根据房间类型实例化对应的预制体根据连接信息摆放房间并根据内容列表生成敌人和物品。这样做的好处是策划在编辑器中调整数据完全不影响程序代码美术可以独立更新房间预制体数据和逻辑彻底解耦。2.2 GraphView编辑器架构我们的编辑器将是一个标准的Unity Editor扩展。其核心组件关系如下DungeonGraphView继承自UnityEditor.Experimental.GraphView.GraphView这是画布的载体负责处理整体的视图逻辑、用户输入点击、拖拽、框选、缩放和节点、边的管理。DungeonNode继承自Node代表关卡中的一个房间。我们需要自定义它的外观包括标题、输入/输出端口Port以及用于编辑房间属性的字段如Dropdown选择房间类型、TextField输入房间ID。DungeonGraphEditorWindow继承自EditorWindow这是编辑器的窗口本体。它负责创建DungeonGraphView实例并挂载到窗口上同时处理数据的保存与加载。数据模型ScriptableObject我们创建一个DungeonGraphAsset的ScriptableObject类用于持久化保存整个关卡图的数据。当用户点击保存时编辑器遍历GraphView中的所有DungeonNode和Edge将它们的属性序列化到该Asset中。注意GraphView目前位于UnityEditor.Experimental.GraphView命名空间下。尽管标有“Experimental”但它已被Shader Graph、Visual Scripting等官方工具广泛使用API相对稳定可以用于生产。但需注意未来版本升级时可能的变动。2.3 节点设计模板解析一个典型的“地牢房间节点”应该包含以下可视化元素节点标题栏显示房间名称或ID背景色可根据房间类型变化如战斗房红色、宝藏房金色。输入端口Input Port通常位于节点左侧允许从其他房间连接进来。一个房间可以有多个输入多个入口。输出端口Output Port通常位于节点右侧允许连接到其他房间。一个房间也可以有多个输出多个出口。属性面板节点主体部分以表单形式展示可编辑属性。房间类型Room TypeDropdown选择框选项包括Start起点、Enemy战斗、Treasure宝藏、Shop商店、Event事件、Boss首领、Rest休息点。房间IDRoom ID字符串唯一标识符。房间尺寸SizeVector2Int表示房间在网格地图上的占格大小如3x3。内容列表可折叠的区域用于添加敌人、物品等。这里可以用ListView或自定义控件实现初期可以简化为一个文本区用于填写配置ID。端口的方向和数量可以灵活定义。例如我们可以设计为每个节点有一个“入口”端口方向输入容量多和多个“出口”端口方向输出容量单这更符合地牢房间有多个门的概念。3. 实战第一步搭建基础编辑器窗口与画布理论清晰后我们开始动手。首先在Unity项目中创建一个Editor文件夹如果还没有所有编辑器代码都放在这里。3.1 创建编辑器窗口创建一个DungeonGraphEditorWindow.cs脚本。using UnityEditor; using UnityEngine; using UnityEngine.UIElements; using UnityEditor.Experimental.GraphView; using System.Collections.Generic; public class DungeonGraphEditorWindow : EditorWindow { private DungeonGraphView _graphView; private string _fileName New Dungeon; [MenuItem(Tools/Dungeon RPG/关卡编辑器)] public static void OpenWindow() { var window GetWindowDungeonGraphEditorWindow(); window.titleContent new GUIContent(地牢关卡编辑器); window.Show(); } private void OnEnable() { ConstructGraphView(); GenerateToolbar(); } private void OnDisable() { // 移除GraphView防止内存泄漏 rootVisualElement.Remove(_graphView); } private void ConstructGraphView() { _graphView new DungeonGraphView { name Dungeon Graph }; // 让GraphView充满整个窗口 _graphView.StretchToParentSize(); rootVisualElement.Add(_graphView); } private void GenerateToolbar() { var toolbar new Toolbar(); // 文件名输入框 var fileNameTextField new TextField(文件名:); fileNameTextField.SetValueWithoutNotify(_fileName); fileNameTextField.MarkDirtyRepaint(); fileNameTextField.RegisterValueChangedCallback(evt _fileName evt.newValue); toolbar.Add(fileNameTextField); // 按钮创建新节点 var createNodeButton new Button(() { _graphView.CreateNode(房间节点); }); createNodeButton.text 创建房间; toolbar.Add(createNodeButton); toolbar.Add(new Button(() RequestDataOperation(true)) { text 保存 }); toolbar.Add(new Button(() RequestDataOperation(false)) { text 加载 }); rootVisualElement.Add(toolbar); } private void RequestDataOperation(bool save) { if (string.IsNullOrEmpty(_fileName)) { EditorUtility.DisplayDialog(文件名无效, 请输入有效的文件名, 确定); return; } var saveUtility GraphSaveUtility.GetInstance(_graphView); if (save) saveUtility.SaveGraph(_fileName); else saveUtility.LoadGraph(_fileName); } }这段代码创建了一个标准的EditorWindow并通过菜单项Tools/Dungeon RPG/关卡编辑器打开。窗口包含一个工具栏有文件名输入、创建节点、保存、加载按钮。核心的DungeonGraphView实例被创建并添加到窗口的视觉树中。3.2 实现核心GraphView创建DungeonGraphView.cs脚本。这是编辑器的心脏。using System.Collections.Generic; using UnityEditor.Experimental.GraphView; using UnityEngine; using UnityEngine.UIElements; public class DungeonGraphView : GraphView { public DungeonGraphView() { // 1. 添加网格背景 this.AddGridBackground(); // 2. 添加基本的缩放和拖拽能力 this.AddManipulator(new ContentZoomer()); this.AddManipulator(new ContentDragger()); this.AddManipulator(new SelectionDragger()); this.AddManipulator(new RectangleSelector()); // 3. 创建初始的起点节点 var startNode CreateNode(起点房间, new Vector2(200, 300)); startNode.SetAsStartRoom(); // 自定义方法标记为起点 AddElement(startNode); } public DungeonNode CreateNode(string nodeName, Vector2 position default) { var node new DungeonNode { title nodeName }; node.SetPosition(new Rect(position, new Vector2(200, 250))); // 设置节点初始位置和大小 return node; } // 关键定义哪些端口可以连接 public override ListPort GetCompatiblePorts(Port startPort, NodeAdapter nodeAdapter) { var compatiblePorts new ListPort(); ports.ForEach(port { // 基本规则不能连接到自己输入只能连输出输出只能连输入 if (startPort ! port startPort.node ! port.node startPort.direction ! port.direction) { // 这里可以添加更复杂的连接规则比如检查房间类型是否允许连接 compatiblePorts.Add(port); } }); return compatiblePorts; } }GraphView的构造函数中我们做了四件事添加网格背景让画布看起来像坐标纸添加四个操作器分别支持缩放、拖拽画布、拖拽选中节点、框选节点重写了GetCompatiblePorts方法定义了端口连接的通用规则防止输入连输入、输出连输出以及自连接最后创建并添加了一个初始的“起点房间”节点。实操心得ContentZoomer默认的缩放中心是鼠标位置这很符合直觉。但如果你发现缩放不灵敏可以检查是否与其他操作器冲突。RectangleSelector对于批量操作节点非常方便。GetCompatiblePorts是控制连接逻辑的关键后续我们可以在这里加入业务规则比如“宝藏房不能直接连接到BOSS房”。4. 实战第二步设计并实现自定义房间节点节点是信息的载体。现在我们来创建DungeonNode.cs。using System; using UnityEditor.Experimental.GraphView; using UnityEngine; using UnityEngine.UIElements; public class DungeonNode : Node { public string RoomID { get; private set; } public RoomType Type { get; private set; } public Port InputPort { get; private set; } public Port OutputPort { get; private set; } public enum RoomType { Start, Enemy, Treasure, Shop, Event, Boss, Rest } public DungeonNode() { // 1. 设置节点样式 style.width 200; style.height 250; // 2. 创建输入输出端口 // 输入端口允许多个连接一个房间可以有多个入口 InputPort InstantiatePort(Orientation.Horizontal, Direction.Input, Port.Capacity.Multi, typeof(float)); InputPort.portName 入口; inputContainer.Add(InputPort); // 输出端口默认单个连接一个出口后续可动态添加更多 OutputPort InstantiatePort(Orientation.Horizontal, Direction.Output, Port.Capacity.Single, typeof(float)); OutputPort.portName 出口; outputContainer.Add(OutputPort); // 3. 创建节点内容属性部分 var roomIdField new TextField(房间ID:); roomIdField.RegisterValueChangedCallback(evt { RoomID evt.newValue; title string.IsNullOrEmpty(RoomID) ? 未命名房间 : RoomID; }); contentContainer.Add(roomIdField); // 房间类型下拉菜单 var roomTypeDropdown new DropdownField(房间类型:, new Liststring { 起点, 战斗, 宝藏, 商店, 事件, 首领, 休息 }, 0); // 默认选择第一个起点 roomTypeDropdown.RegisterValueChangedCallback(evt { Type (RoomType)Enum.Parse(typeof(RoomType), evt.newValue); UpdateNodeColor(); }); contentContainer.Add(roomTypeDropdown); // 4. 刷新布局使端口和内容可见 RefreshExpandedState(); RefreshPorts(); } public void SetAsStartRoom() { // 假设通过某种方式设置下拉框值为Start这里简化处理 Type RoomType.Start; UpdateNodeColor(); // 起点房间通常只有输出没有输入或输入禁用 if (InputPort ! null) { InputPort.capabilities ~Capabilities.Connectable; // 禁用连接能力 } } private void UpdateNodeColor() { // 根据房间类型改变节点标题栏颜色 Color color Type switch { RoomType.Start Color.green, RoomType.Enemy Color.red, RoomType.Treasure Color.yellow, RoomType.Shop Color.cyan, RoomType.Event Color.magenta, RoomType.Boss new Color(0.5f, 0f, 0f), // 深红 RoomType.Rest Color.gray, _ new Color(0.8f, 0.8f, 0.8f) // 默认灰色 }; titleContainer.style.backgroundColor new StyleColor(color); } }这个DungeonNode类做了以下几件事定义数据包含了房间ID、房间类型等属性。创建端口使用InstantiatePort方法创建了一个输入端口和一个输出端口并分别添加到inputContainer和outputContainer。这是端口能显示在节点左右两侧的关键。构建UI在contentContainer节点主体部分添加了用于编辑房间ID的TextField和选择房间类型的DropdownField。并为这些控件注册了值改变的回调以便实时更新节点数据与外观。视觉反馈UpdateNodeColor方法根据房间类型改变节点标题栏的背景色提供直观的视觉分类。特殊逻辑SetAsStartRoom方法演示了如何为特定类型节点起点定制行为比如禁用其输入端口。注意事项InstantiatePort的第四个参数type这里是typeof(float)目前仅用于端口类型的匹配检查。在GetCompatiblePorts中我们可以选择只允许相同类型的端口相连。对于地牢编辑器所有端口类型可以相同或者我们可以定义不同的类型来区分“物理连接”和“逻辑连接”。这里我们先使用统一类型。5. 实战第三步实现数据的序列化与反序列化编辑器光能画图不行必须能保存和读取。我们将数据保存为Unity原生资源ScriptableObject便于管理。5.1 定义数据模型创建DungeonGraphModel.cs和RoomNodeModel.cs。// DungeonGraphModel.cs using System.Collections.Generic; using UnityEngine; [CreateAssetMenu(fileName New Dungeon Graph, menuName Dungeon RPG/关卡图数据)] public class DungeonGraphModel : ScriptableObject { public ListRoomNodeModel Nodes new ListRoomNodeModel(); public ListNodeLinkData Links new ListNodeLinkData(); } // RoomNodeModel.cs [System.Serializable] public class RoomNodeModel { public string ID; public string RoomName; public DungeonNode.RoomType Type; public Vector2 Position; // 在GraphView中的坐标 public Liststring EnemyIds new Liststring(); public Liststring ItemIds new Liststring(); // 其他自定义属性... } // NodeLinkData.cs [System.Serializable] public class NodeLinkData { public string BaseNodeID; // 输出节点的ID public string PortName; // 输出端口名如果有多个输出端口时需要 public string TargetNodeID; // 输入节点的ID }DungeonGraphModel是一个ScriptableObject包含所有节点和连接的列表。RoomNodeModel序列化了单个房间节点的所有数据。NodeLinkData记录了一条连接关系。5.2 实现保存与加载工具创建GraphSaveUtility.cs这是连接GraphView可视化世界和数据模型的桥梁。using System.IO; using System.Linq; using UnityEditor; using UnityEditor.Experimental.GraphView; using UnityEngine; public class GraphSaveUtility { private DungeonGraphView _targetGraphView; private DungeonGraphModel _graphModel; private ListEdge Edges _targetGraphView.edges.ToList(); private ListDungeonNode Nodes _targetGraphView.nodes.ToList().CastDungeonNode().ToList(); public static GraphSaveUtility GetInstance(DungeonGraphView graphView) { return new GraphSaveUtility { _targetGraphView graphView }; } public void SaveGraph(string fileName) { // 1. 检查是否有同名资产没有则创建 if (!_graphModel) { _graphModel ScriptableObject.CreateInstanceDungeonGraphModel(); } // 2. 清空旧数据 _graphModel.Nodes.Clear(); _graphModel.Links.Clear(); // 3. 保存节点数据 foreach (var node in Nodes) { var nodeModel new RoomNodeModel { ID node.RoomID, RoomName node.title, Type node.Type, Position node.GetPosition().position // 获取节点在画布上的坐标 }; _graphModel.Nodes.Add(nodeModel); } // 4. 保存连接数据 foreach (var edge in Edges) { var outputNode edge.output.node as DungeonNode; var inputNode edge.input.node as DungeonNode; if (outputNode ! null inputNode ! null) { _graphModel.Links.Add(new NodeLinkData { BaseNodeID outputNode.RoomID, TargetNodeID inputNode.RoomID, PortName edge.output.portName // 记录是从哪个端口连出的 }); } } // 5. 创建或覆盖Asset文件 string assetPath $Assets/Resources/DungeonGraphs/{fileName}.asset; string folderPath Path.GetDirectoryName(assetPath); if (!Directory.Exists(folderPath)) { Directory.CreateDirectory(folderPath); } AssetDatabase.CreateAsset(_graphModel, assetPath); AssetDatabase.SaveAssets(); AssetDatabase.Refresh(); EditorUtility.DisplayDialog(保存成功, $关卡图已保存至{assetPath}, 确定); } public void LoadGraph(string fileName) { // 1. 加载Asset string assetPath $Assets/Resources/DungeonGraphs/{fileName}.asset; _graphModel AssetDatabase.LoadAssetAtPathDungeonGraphModel(assetPath); if (_graphModel null) { EditorUtility.DisplayDialog(文件未找到, $未找到文件{assetPath}, 确定); return; } ClearGraph(); CreateNodes(); ConnectNodes(); } private void ClearGraph() { // 获取所有节点的位置删除它们 foreach (var node in Nodes) { _targetGraphView.RemoveElement(node); } // 获取所有边的位置删除它们 foreach (var edge in Edges) { _targetGraphView.RemoveElement(edge); } } private void CreateNodes() { foreach (var nodeModel in _graphModel.Nodes) { var newNode _targetGraphView.CreateNode(nodeModel.RoomName, nodeModel.Position); newNode.RoomID nodeModel.ID; // 这里需要根据nodeModel.Type来设置下拉框的值并触发UpdateNodeColor // 由于DropdownField设置值不会自动触发回调需要手动调用 // 简化处理直接设置内部属性并更新颜色 // 实际项目中可能需要反射或公开一个初始化方法 _targetGraphView.AddElement(newNode); } } private void ConnectNodes() { // 这是一个简化的连接逻辑。实际项目中需要根据NodeLinkData中的端口信息进行精确连接。 // 这里假设每个节点只有一个输出端口和一个输入端口。 foreach (var link in _graphModel.Links) { var outputNode Nodes.FirstOrDefault(node node.RoomID link.BaseNodeID); var inputNode Nodes.FirstOrDefault(node node.RoomID link.TargetNodeID); if (outputNode ! null inputNode ! null) { // 创建一条从outputNode的输出端口到inputNode的输入端口的边 Edge edge outputNode.OutputPort.ConnectTo(inputNode.InputPort); _targetGraphView.AddElement(edge); } } // 连接完成后刷新所有节点的端口显示 foreach (var node in Nodes) { node.RefreshPorts(); } } }这个工具类负责保存遍历GraphView中所有节点和边将它们的属性提取出来填充到DungeonGraphModel中然后将其保存为.asset文件。加载从.asset文件读取数据清空当前GraphView然后根据数据重新创建节点并按照连接数据重新连线。踩坑记录在LoadGraph的CreateNodes方法中直接设置newNode.RoomID和Type可能不会自动更新节点UI如标题、颜色。这是因为UI控件TextField, DropdownField的值改变回调可能没有被触发。一个更稳健的做法是在DungeonNode中提供一个Initialize(RoomNodeModel model)方法在这个方法里显式地设置所有UI控件的值并调用UpdateNodeColor。此外端口连接时ConnectTo方法会自动创建Edge对象但必须将其AddElement到GraphView中连接才会在视觉上生效。最后别忘了调用RefreshPorts()来更新端口的视觉状态。6. 实战第四步增强编辑器功能与交互基础功能完成后我们需要打磨用户体验增加一些实用功能。6.1 右键菜单创建节点目前只能通过工具栏按钮创建节点不方便。GraphView支持右键菜单Contextual Menu。在DungeonGraphView构造函数中添加public DungeonGraphView() { // ... 之前的代码 ... // 添加右键菜单 nodeCreationRequest context { var worldMousePos context.screenMousePosition; var localMousePos contentViewContainer.WorldToLocal(worldMousePos); CreateNode(新房间, localMousePos); }; }现在在GraphView画布空白处右键点击就会在鼠标位置创建一个新的房间节点。6.2 实现节点删除与复制粘贴GraphView默认支持Delete键删除选中元素。但我们也可以增强它。为了支持复制粘贴我们需要序列化节点数据到系统剪贴板。这涉及更复杂的操作一个常见的做法是自定义一个GraphViewEditorWindow来重写CopyPaste相关的事件处理。作为简化我们可以先实现删除的确认对话框。在DungeonGraphView中添加public override void BuildContextualMenu(ContextualMenuPopulateEvent evt) { base.BuildContextualMenu(evt); // 保留基础菜单项如“创建节点” // 如果当前有选中的元素添加自定义删除项 if (selection.Count 0) { evt.menu.AppendAction(删除选中项, (action) DeleteSelectionCallback(AskUser.DontAskUser), (status) DropdownMenuAction.Status.Normal); } }同时确保DeleteSelectionCallback方法被正确调用基类已实现。6.3 添加迷你地图Overview对于大型关卡图迷你地图非常有用。GraphView内置了MiniMap组件。在DungeonGraphView构造函数中或某个初始化方法中添加var miniMap new MiniMap { anchored true }; miniMap.SetPosition(new Rect(10, 30, 200, 150)); // 定位在窗口左上角 Add(miniMap);现在编辑器窗口会有一个可拖拽的迷你地图显示整个关卡图的缩略图。6.4 房间内容详情的编辑之前节点只定义了房间类型和ID现在需要扩充内容。我们可以在节点上添加一个Foldout折叠栏点击后展开显示更详细的属性如敌人列表、宝箱列表。修改DungeonNode的构造函数public DungeonNode() { // ... 之前创建端口和基础属性的代码 ... // 创建内容折叠栏 var contentFoldout new Foldout { text 房间内容 }; contentFoldout.value false; // 默认折叠 // 敌人列表简易版用TextField输入ID逗号分隔 var enemyField new TextField(敌人ID:); enemyField.RegisterValueChangedCallback(evt { // 这里可以解析逗号分隔的字符串存入EnemyIds列表 // 简化处理先只存储字符串 }); contentFoldout.Add(enemyField); // 物品列表 var itemField new TextField(物品ID:); contentFoldout.Add(itemField); contentContainer.Add(contentFoldout); // ... 刷新布局 ... }对于更复杂的列表编辑可以考虑使用ListView或PropertyField需要配合SerializedObject。为了保持编辑器响应速度建议复杂属性编辑采用弹窗或Inspector面板的形式。7. 实战第五步从编辑器数据到游戏运行时编辑器产出的.asset文件是静态数据。游戏运行时需要加载这些数据并实例化成真正的游戏场景。7.1 运行时数据加载在Resources或Addressable中加载我们保存的DungeonGraphModel。// DungeonManager.cs - 游戏运行时管理器 using System.Collections.Generic; using UnityEngine; public class DungeonManager : MonoBehaviour { public DungeonGraphModel dungeonData; public GameObject roomPrefab; // 基础的房间预制体 public Dictionarystring, GameObject spawnedRooms new Dictionarystring, GameObject(); void Start() { if (dungeonData null) { Debug.LogError(未指定关卡数据); return; } GenerateDungeon(); } void GenerateDungeon() { // 1. 实例化所有房间 foreach (var nodeModel in dungeonData.Nodes) { var roomGO Instantiate(roomPrefab, new Vector3(nodeModel.Position.x, 0, nodeModel.Position.y), Quaternion.identity); roomGO.name nodeModel.RoomName; var roomController roomGO.GetComponentRoomController(); if (roomController ! null) { roomController.Initialize(nodeModel); } spawnedRooms.Add(nodeModel.ID, roomGO); } // 2. 根据连接数据处理房间之间的通路例如激活或生成门 foreach (var link in dungeonData.Links) { if (spawnedRooms.TryGetValue(link.BaseNodeID, out var baseRoom) spawnedRooms.TryGetValue(link.TargetNodeID, out var targetRoom)) { // 通知baseRoom它有一个出口通向targetRoom // 通知targetRoom它有一个入口来自baseRoom // 具体实现取决于你的游戏架构比如在房间预制体上挂接Door脚本 } } // 3. 根据房间类型生成内部内容敌人、宝箱等 // 这步可以在RoomController.Initialize中完成 } }7.2 房间控制器RoomController每个房间实例应该有一个控制器脚本来处理自身逻辑。// RoomController.cs using System.Collections; using System.Collections.Generic; using UnityEngine; public class RoomController : MonoBehaviour { public RoomNodeModel data; public ListDoor doors new ListDoor(); // 门组件列表 public void Initialize(RoomNodeModel nodeData) { data nodeData; name nodeData.RoomName; // 根据房间类型可能改变材质、灯光等视觉表现 switch (data.Type) { case DungeonNode.RoomType.Enemy: // 生成敌人 SpawnEnemies(data.EnemyIds); break; case DungeonNode.RoomType.Treasure: // 生成宝箱 SpawnChest(); break; // ... 其他类型 } } void SpawnEnemies(Liststring enemyIds) { foreach (var id in enemyIds) { // 根据ID从配置表或资源管理器获取敌人预制体并实例化 // GameObject enemyPrefab ResourceManager.LoadEnemy(id); // Instantiate(enemyPrefab, transform.position Random.insideUnitSphere * 5, Quaternion.identity, transform); } } // ... 其他方法 }7.3 动态连接与关卡生成上面的GenerateDungeon是一种“静态布局”即房间位置完全按照编辑器中的坐标。对于Roguelike地牢你可能需要“程序化布局”编辑器只定义连接关系图结构运行时再根据算法如随机行走、BSP树计算房间的实际位置和形状。这时DungeonGraphModel中的Position字段可能就用来表示在图中的逻辑位置而非世界坐标。运行时生成器会读取Nodes和Links然后运行自己的布局算法来摆放房间实体。8. 常见问题与排查技巧实录在实际开发中你肯定会遇到各种问题。这里记录一些我踩过的坑和解决方案。8.1 GraphView 不显示或显示异常问题打开编辑器窗口一片空白没有网格也没有节点。排查检查OnEnable确保在EditorWindow的OnEnable方法中正确创建并添加了GraphView实例到rootVisualElement。检查StretchToParentSize调用_graphView.StretchToParentSize()确保GraphView填充窗口。检查命名空间确认使用了UnityEditor.Experimental.GraphView和UnityEngine.UIElements。Unity版本确保你的Unity版本支持GraphView2019.4 LTS或更新版本通常都支持。8.2 端口无法连接或连接后不显示连线问题可以创建端口但拖拽时没有连接线或者连接后线不显示。排查端口方向确认GetCompatiblePorts逻辑正确。输入端口Direction.Input只能连接输出端口Direction.Output。端口容量检查端口实例化时的Port.Capacity。Single只能连接一条边Multi可以连接多条。如果输出端口是Single但已经连了一条线就无法再连第二条。RefreshPorts在动态添加或移除端口后或者在加载数据重新连接后必须调用节点的RefreshPorts()方法否则端口视觉状态不会更新。Edge的添加使用Port.ConnectTo方法创建Edge后必须调用graphView.AddElement(edge)这条边才会被GraphView管理和渲染。8.3 节点属性改变后数据未保存问题在节点UI上修改了房间类型或ID但保存后加载发现还是旧值。排查数据绑定确保UI控件如TextField、DropdownField的RegisterValueChangedCallback回调函数中正确更新了节点类背后的数据模型字段如RoomID、Type。保存时机GraphSaveUtility.SaveGraph中遍历节点时是从GraphView.nodes列表中获取DungeonNode实例然后读取其属性如node.RoomID。确保这里读取的属性与UI控件绑定的属性是同一个。ScriptableObject脏标记直接修改ScriptableObject的字段不会自动标记为脏。在SaveGraph中如果你是在修改一个已加载的Asset在最后应该调用EditorUtility.SetDirty(_graphModel)以确保更改被保存。不过AssetDatabase.CreateAsset会处理这个问题。8.4 编辑器性能问题问题当节点数量非常多比如几百个时编辑器操作变得卡顿。优化简化节点UI避免在单个节点内使用过于复杂的UI元素如嵌套多层ListView。对于复杂属性考虑使用双击节点弹窗编辑的方式。延迟加载对于超大型图可以实现一个基于视口的节点加载/卸载机制只渲染可视区域内的节点。使用ObjectField如果房间内容配置很复杂不要在节点上直接编辑所有细节。可以只放一个ObjectField让用户拖入一个RoomConfig的ScriptableObject资产详细配置在独立的Inspector中完成。8.5 自定义节点样式不生效问题通过代码设置的节点颜色、大小等样式没有效果。排查USS样式表GraphView大量使用USSUnity Style Sheets。更强大的样式控制需要通过加载USS文件实现。你可以创建.uss文件定义像.dungeon-node这样的选择器然后在节点创建时添加对应的样式类名node.AddToClassList(dungeon-node)。内联样式优先级通过style.xxx设置的内联样式通常优先级较高但如果存在USS样式表冲突可能需要使用!important或检查样式表顺序。样式继承确保你在正确的VisualElement上设置样式。例如设置节点背景色可能是mainContainer.style.backgroundColor而不是style.backgroundColor。这个基于Unity GraphView的地牢关卡编辑器从核心架构到具体实现再到问题排查基本框架已经搭建完毕。它成功地将抽象的关卡数据结构转化为可视化的节点图极大地提升了设计效率。你可以在此基础上继续扩展更多节点类型如事件节点、分支节点、更复杂的连接规则带条件的连接、甚至集成地图预览功能。记住好的工具是迭代出来的先做出最小可行产品MVP然后在实际项目中根据需求不断打磨和完善。
基于Unity GraphView构建可视化地牢关卡编辑器：从节点图到数据驱动设计
1. 项目概述为什么我们需要一个专属的关卡编辑器做地牢RPG关卡设计是核心中的核心。无论是《暗黑破坏神》的随机地下城还是《哈迪斯》精心编排的房间序列其背后都有一套复杂的数据逻辑。早期开发我们可能用Excel表格来配置房间类型、敌人、宝箱和连接关系但这种方式效率低下且无法直观预览关卡结构。当策划想调整一个房间的出口或者美术想看看不同主题房间的拼接效果时沟通成本会急剧上升。Unity自带的场景编辑器Scene View虽然强大但它更适合处理具体的、实例化的游戏对象摆放对于抽象的、数据驱动的关卡逻辑关系管理就显得力不从心了。这时一个可视化的、基于节点的关卡编辑器就成了刚需。它能让策划和设计师在更高维度上“画”出关卡蓝图将房间、事件、条件、奖励等元素抽象为节点用连线表示它们之间的逻辑或空间关系所见即所得。Unity的GraphView正是为此而生。它是Unity UI Toolkit的一部分专为创建节点图Node Graph编辑器而设计。相比于传统的EditorWindowGUI方案GraphView提供了完整的节点、端口、连线、缩放、框选等交互功能让我们能像使用Shader Graph或Animation Window一样构建自己的可视化编程工具。这次我们就用GraphView从零开始打造一个专属于我们地牢RPG项目的关卡编辑器。目标很明确让关卡设计流程可视化、数据化、可迭代最终提升整个团队的生产力。2. 核心思路与架构设计在动手写代码之前我们必须想清楚这个编辑器要管什么以及数据最终如何驱动游戏。一个地牢关卡本质上是一个由“房间”构成的图Graph。每个房间是一个节点房间之间的通道门、楼梯、传送点就是连接节点的边。但我们的需求不止于此房间内包含的具体内容敌人、陷阱、宝箱、剧情触发点也需要被定义和管理。2.1 数据驱动设计分离逻辑与表现这是整个项目的基石。编辑器的核心任务是生成一份关卡数据文件例如JSON或ScriptableObject而不是直接创建场景中的GameObject。这份数据文件描述了关卡全局信息关卡ID、名称、推荐等级、背景音乐等。房间节点列表每个房间的ID、类型战斗、宝藏、商店、事件、BOSS、坐标用于在编辑器中布局、尺寸。连接边列表记录哪些房间是相连的以及连接的方向单向/双向和类型普通门、锁住的门、秘密通道。房间内容每个房间内包含的实体列表如敌人ID和数量、宝箱ID、可交互物体、触发器区域等。游戏运行时一个独立的“关卡加载器”系统会读取这份数据文件根据房间类型实例化对应的预制体根据连接信息摆放房间并根据内容列表生成敌人和物品。这样做的好处是策划在编辑器中调整数据完全不影响程序代码美术可以独立更新房间预制体数据和逻辑彻底解耦。2.2 GraphView编辑器架构我们的编辑器将是一个标准的Unity Editor扩展。其核心组件关系如下DungeonGraphView继承自UnityEditor.Experimental.GraphView.GraphView这是画布的载体负责处理整体的视图逻辑、用户输入点击、拖拽、框选、缩放和节点、边的管理。DungeonNode继承自Node代表关卡中的一个房间。我们需要自定义它的外观包括标题、输入/输出端口Port以及用于编辑房间属性的字段如Dropdown选择房间类型、TextField输入房间ID。DungeonGraphEditorWindow继承自EditorWindow这是编辑器的窗口本体。它负责创建DungeonGraphView实例并挂载到窗口上同时处理数据的保存与加载。数据模型ScriptableObject我们创建一个DungeonGraphAsset的ScriptableObject类用于持久化保存整个关卡图的数据。当用户点击保存时编辑器遍历GraphView中的所有DungeonNode和Edge将它们的属性序列化到该Asset中。注意GraphView目前位于UnityEditor.Experimental.GraphView命名空间下。尽管标有“Experimental”但它已被Shader Graph、Visual Scripting等官方工具广泛使用API相对稳定可以用于生产。但需注意未来版本升级时可能的变动。2.3 节点设计模板解析一个典型的“地牢房间节点”应该包含以下可视化元素节点标题栏显示房间名称或ID背景色可根据房间类型变化如战斗房红色、宝藏房金色。输入端口Input Port通常位于节点左侧允许从其他房间连接进来。一个房间可以有多个输入多个入口。输出端口Output Port通常位于节点右侧允许连接到其他房间。一个房间也可以有多个输出多个出口。属性面板节点主体部分以表单形式展示可编辑属性。房间类型Room TypeDropdown选择框选项包括Start起点、Enemy战斗、Treasure宝藏、Shop商店、Event事件、Boss首领、Rest休息点。房间IDRoom ID字符串唯一标识符。房间尺寸SizeVector2Int表示房间在网格地图上的占格大小如3x3。内容列表可折叠的区域用于添加敌人、物品等。这里可以用ListView或自定义控件实现初期可以简化为一个文本区用于填写配置ID。端口的方向和数量可以灵活定义。例如我们可以设计为每个节点有一个“入口”端口方向输入容量多和多个“出口”端口方向输出容量单这更符合地牢房间有多个门的概念。3. 实战第一步搭建基础编辑器窗口与画布理论清晰后我们开始动手。首先在Unity项目中创建一个Editor文件夹如果还没有所有编辑器代码都放在这里。3.1 创建编辑器窗口创建一个DungeonGraphEditorWindow.cs脚本。using UnityEditor; using UnityEngine; using UnityEngine.UIElements; using UnityEditor.Experimental.GraphView; using System.Collections.Generic; public class DungeonGraphEditorWindow : EditorWindow { private DungeonGraphView _graphView; private string _fileName New Dungeon; [MenuItem(Tools/Dungeon RPG/关卡编辑器)] public static void OpenWindow() { var window GetWindowDungeonGraphEditorWindow(); window.titleContent new GUIContent(地牢关卡编辑器); window.Show(); } private void OnEnable() { ConstructGraphView(); GenerateToolbar(); } private void OnDisable() { // 移除GraphView防止内存泄漏 rootVisualElement.Remove(_graphView); } private void ConstructGraphView() { _graphView new DungeonGraphView { name Dungeon Graph }; // 让GraphView充满整个窗口 _graphView.StretchToParentSize(); rootVisualElement.Add(_graphView); } private void GenerateToolbar() { var toolbar new Toolbar(); // 文件名输入框 var fileNameTextField new TextField(文件名:); fileNameTextField.SetValueWithoutNotify(_fileName); fileNameTextField.MarkDirtyRepaint(); fileNameTextField.RegisterValueChangedCallback(evt _fileName evt.newValue); toolbar.Add(fileNameTextField); // 按钮创建新节点 var createNodeButton new Button(() { _graphView.CreateNode(房间节点); }); createNodeButton.text 创建房间; toolbar.Add(createNodeButton); toolbar.Add(new Button(() RequestDataOperation(true)) { text 保存 }); toolbar.Add(new Button(() RequestDataOperation(false)) { text 加载 }); rootVisualElement.Add(toolbar); } private void RequestDataOperation(bool save) { if (string.IsNullOrEmpty(_fileName)) { EditorUtility.DisplayDialog(文件名无效, 请输入有效的文件名, 确定); return; } var saveUtility GraphSaveUtility.GetInstance(_graphView); if (save) saveUtility.SaveGraph(_fileName); else saveUtility.LoadGraph(_fileName); } }这段代码创建了一个标准的EditorWindow并通过菜单项Tools/Dungeon RPG/关卡编辑器打开。窗口包含一个工具栏有文件名输入、创建节点、保存、加载按钮。核心的DungeonGraphView实例被创建并添加到窗口的视觉树中。3.2 实现核心GraphView创建DungeonGraphView.cs脚本。这是编辑器的心脏。using System.Collections.Generic; using UnityEditor.Experimental.GraphView; using UnityEngine; using UnityEngine.UIElements; public class DungeonGraphView : GraphView { public DungeonGraphView() { // 1. 添加网格背景 this.AddGridBackground(); // 2. 添加基本的缩放和拖拽能力 this.AddManipulator(new ContentZoomer()); this.AddManipulator(new ContentDragger()); this.AddManipulator(new SelectionDragger()); this.AddManipulator(new RectangleSelector()); // 3. 创建初始的起点节点 var startNode CreateNode(起点房间, new Vector2(200, 300)); startNode.SetAsStartRoom(); // 自定义方法标记为起点 AddElement(startNode); } public DungeonNode CreateNode(string nodeName, Vector2 position default) { var node new DungeonNode { title nodeName }; node.SetPosition(new Rect(position, new Vector2(200, 250))); // 设置节点初始位置和大小 return node; } // 关键定义哪些端口可以连接 public override ListPort GetCompatiblePorts(Port startPort, NodeAdapter nodeAdapter) { var compatiblePorts new ListPort(); ports.ForEach(port { // 基本规则不能连接到自己输入只能连输出输出只能连输入 if (startPort ! port startPort.node ! port.node startPort.direction ! port.direction) { // 这里可以添加更复杂的连接规则比如检查房间类型是否允许连接 compatiblePorts.Add(port); } }); return compatiblePorts; } }GraphView的构造函数中我们做了四件事添加网格背景让画布看起来像坐标纸添加四个操作器分别支持缩放、拖拽画布、拖拽选中节点、框选节点重写了GetCompatiblePorts方法定义了端口连接的通用规则防止输入连输入、输出连输出以及自连接最后创建并添加了一个初始的“起点房间”节点。实操心得ContentZoomer默认的缩放中心是鼠标位置这很符合直觉。但如果你发现缩放不灵敏可以检查是否与其他操作器冲突。RectangleSelector对于批量操作节点非常方便。GetCompatiblePorts是控制连接逻辑的关键后续我们可以在这里加入业务规则比如“宝藏房不能直接连接到BOSS房”。4. 实战第二步设计并实现自定义房间节点节点是信息的载体。现在我们来创建DungeonNode.cs。using System; using UnityEditor.Experimental.GraphView; using UnityEngine; using UnityEngine.UIElements; public class DungeonNode : Node { public string RoomID { get; private set; } public RoomType Type { get; private set; } public Port InputPort { get; private set; } public Port OutputPort { get; private set; } public enum RoomType { Start, Enemy, Treasure, Shop, Event, Boss, Rest } public DungeonNode() { // 1. 设置节点样式 style.width 200; style.height 250; // 2. 创建输入输出端口 // 输入端口允许多个连接一个房间可以有多个入口 InputPort InstantiatePort(Orientation.Horizontal, Direction.Input, Port.Capacity.Multi, typeof(float)); InputPort.portName 入口; inputContainer.Add(InputPort); // 输出端口默认单个连接一个出口后续可动态添加更多 OutputPort InstantiatePort(Orientation.Horizontal, Direction.Output, Port.Capacity.Single, typeof(float)); OutputPort.portName 出口; outputContainer.Add(OutputPort); // 3. 创建节点内容属性部分 var roomIdField new TextField(房间ID:); roomIdField.RegisterValueChangedCallback(evt { RoomID evt.newValue; title string.IsNullOrEmpty(RoomID) ? 未命名房间 : RoomID; }); contentContainer.Add(roomIdField); // 房间类型下拉菜单 var roomTypeDropdown new DropdownField(房间类型:, new Liststring { 起点, 战斗, 宝藏, 商店, 事件, 首领, 休息 }, 0); // 默认选择第一个起点 roomTypeDropdown.RegisterValueChangedCallback(evt { Type (RoomType)Enum.Parse(typeof(RoomType), evt.newValue); UpdateNodeColor(); }); contentContainer.Add(roomTypeDropdown); // 4. 刷新布局使端口和内容可见 RefreshExpandedState(); RefreshPorts(); } public void SetAsStartRoom() { // 假设通过某种方式设置下拉框值为Start这里简化处理 Type RoomType.Start; UpdateNodeColor(); // 起点房间通常只有输出没有输入或输入禁用 if (InputPort ! null) { InputPort.capabilities ~Capabilities.Connectable; // 禁用连接能力 } } private void UpdateNodeColor() { // 根据房间类型改变节点标题栏颜色 Color color Type switch { RoomType.Start Color.green, RoomType.Enemy Color.red, RoomType.Treasure Color.yellow, RoomType.Shop Color.cyan, RoomType.Event Color.magenta, RoomType.Boss new Color(0.5f, 0f, 0f), // 深红 RoomType.Rest Color.gray, _ new Color(0.8f, 0.8f, 0.8f) // 默认灰色 }; titleContainer.style.backgroundColor new StyleColor(color); } }这个DungeonNode类做了以下几件事定义数据包含了房间ID、房间类型等属性。创建端口使用InstantiatePort方法创建了一个输入端口和一个输出端口并分别添加到inputContainer和outputContainer。这是端口能显示在节点左右两侧的关键。构建UI在contentContainer节点主体部分添加了用于编辑房间ID的TextField和选择房间类型的DropdownField。并为这些控件注册了值改变的回调以便实时更新节点数据与外观。视觉反馈UpdateNodeColor方法根据房间类型改变节点标题栏的背景色提供直观的视觉分类。特殊逻辑SetAsStartRoom方法演示了如何为特定类型节点起点定制行为比如禁用其输入端口。注意事项InstantiatePort的第四个参数type这里是typeof(float)目前仅用于端口类型的匹配检查。在GetCompatiblePorts中我们可以选择只允许相同类型的端口相连。对于地牢编辑器所有端口类型可以相同或者我们可以定义不同的类型来区分“物理连接”和“逻辑连接”。这里我们先使用统一类型。5. 实战第三步实现数据的序列化与反序列化编辑器光能画图不行必须能保存和读取。我们将数据保存为Unity原生资源ScriptableObject便于管理。5.1 定义数据模型创建DungeonGraphModel.cs和RoomNodeModel.cs。// DungeonGraphModel.cs using System.Collections.Generic; using UnityEngine; [CreateAssetMenu(fileName New Dungeon Graph, menuName Dungeon RPG/关卡图数据)] public class DungeonGraphModel : ScriptableObject { public ListRoomNodeModel Nodes new ListRoomNodeModel(); public ListNodeLinkData Links new ListNodeLinkData(); } // RoomNodeModel.cs [System.Serializable] public class RoomNodeModel { public string ID; public string RoomName; public DungeonNode.RoomType Type; public Vector2 Position; // 在GraphView中的坐标 public Liststring EnemyIds new Liststring(); public Liststring ItemIds new Liststring(); // 其他自定义属性... } // NodeLinkData.cs [System.Serializable] public class NodeLinkData { public string BaseNodeID; // 输出节点的ID public string PortName; // 输出端口名如果有多个输出端口时需要 public string TargetNodeID; // 输入节点的ID }DungeonGraphModel是一个ScriptableObject包含所有节点和连接的列表。RoomNodeModel序列化了单个房间节点的所有数据。NodeLinkData记录了一条连接关系。5.2 实现保存与加载工具创建GraphSaveUtility.cs这是连接GraphView可视化世界和数据模型的桥梁。using System.IO; using System.Linq; using UnityEditor; using UnityEditor.Experimental.GraphView; using UnityEngine; public class GraphSaveUtility { private DungeonGraphView _targetGraphView; private DungeonGraphModel _graphModel; private ListEdge Edges _targetGraphView.edges.ToList(); private ListDungeonNode Nodes _targetGraphView.nodes.ToList().CastDungeonNode().ToList(); public static GraphSaveUtility GetInstance(DungeonGraphView graphView) { return new GraphSaveUtility { _targetGraphView graphView }; } public void SaveGraph(string fileName) { // 1. 检查是否有同名资产没有则创建 if (!_graphModel) { _graphModel ScriptableObject.CreateInstanceDungeonGraphModel(); } // 2. 清空旧数据 _graphModel.Nodes.Clear(); _graphModel.Links.Clear(); // 3. 保存节点数据 foreach (var node in Nodes) { var nodeModel new RoomNodeModel { ID node.RoomID, RoomName node.title, Type node.Type, Position node.GetPosition().position // 获取节点在画布上的坐标 }; _graphModel.Nodes.Add(nodeModel); } // 4. 保存连接数据 foreach (var edge in Edges) { var outputNode edge.output.node as DungeonNode; var inputNode edge.input.node as DungeonNode; if (outputNode ! null inputNode ! null) { _graphModel.Links.Add(new NodeLinkData { BaseNodeID outputNode.RoomID, TargetNodeID inputNode.RoomID, PortName edge.output.portName // 记录是从哪个端口连出的 }); } } // 5. 创建或覆盖Asset文件 string assetPath $Assets/Resources/DungeonGraphs/{fileName}.asset; string folderPath Path.GetDirectoryName(assetPath); if (!Directory.Exists(folderPath)) { Directory.CreateDirectory(folderPath); } AssetDatabase.CreateAsset(_graphModel, assetPath); AssetDatabase.SaveAssets(); AssetDatabase.Refresh(); EditorUtility.DisplayDialog(保存成功, $关卡图已保存至{assetPath}, 确定); } public void LoadGraph(string fileName) { // 1. 加载Asset string assetPath $Assets/Resources/DungeonGraphs/{fileName}.asset; _graphModel AssetDatabase.LoadAssetAtPathDungeonGraphModel(assetPath); if (_graphModel null) { EditorUtility.DisplayDialog(文件未找到, $未找到文件{assetPath}, 确定); return; } ClearGraph(); CreateNodes(); ConnectNodes(); } private void ClearGraph() { // 获取所有节点的位置删除它们 foreach (var node in Nodes) { _targetGraphView.RemoveElement(node); } // 获取所有边的位置删除它们 foreach (var edge in Edges) { _targetGraphView.RemoveElement(edge); } } private void CreateNodes() { foreach (var nodeModel in _graphModel.Nodes) { var newNode _targetGraphView.CreateNode(nodeModel.RoomName, nodeModel.Position); newNode.RoomID nodeModel.ID; // 这里需要根据nodeModel.Type来设置下拉框的值并触发UpdateNodeColor // 由于DropdownField设置值不会自动触发回调需要手动调用 // 简化处理直接设置内部属性并更新颜色 // 实际项目中可能需要反射或公开一个初始化方法 _targetGraphView.AddElement(newNode); } } private void ConnectNodes() { // 这是一个简化的连接逻辑。实际项目中需要根据NodeLinkData中的端口信息进行精确连接。 // 这里假设每个节点只有一个输出端口和一个输入端口。 foreach (var link in _graphModel.Links) { var outputNode Nodes.FirstOrDefault(node node.RoomID link.BaseNodeID); var inputNode Nodes.FirstOrDefault(node node.RoomID link.TargetNodeID); if (outputNode ! null inputNode ! null) { // 创建一条从outputNode的输出端口到inputNode的输入端口的边 Edge edge outputNode.OutputPort.ConnectTo(inputNode.InputPort); _targetGraphView.AddElement(edge); } } // 连接完成后刷新所有节点的端口显示 foreach (var node in Nodes) { node.RefreshPorts(); } } }这个工具类负责保存遍历GraphView中所有节点和边将它们的属性提取出来填充到DungeonGraphModel中然后将其保存为.asset文件。加载从.asset文件读取数据清空当前GraphView然后根据数据重新创建节点并按照连接数据重新连线。踩坑记录在LoadGraph的CreateNodes方法中直接设置newNode.RoomID和Type可能不会自动更新节点UI如标题、颜色。这是因为UI控件TextField, DropdownField的值改变回调可能没有被触发。一个更稳健的做法是在DungeonNode中提供一个Initialize(RoomNodeModel model)方法在这个方法里显式地设置所有UI控件的值并调用UpdateNodeColor。此外端口连接时ConnectTo方法会自动创建Edge对象但必须将其AddElement到GraphView中连接才会在视觉上生效。最后别忘了调用RefreshPorts()来更新端口的视觉状态。6. 实战第四步增强编辑器功能与交互基础功能完成后我们需要打磨用户体验增加一些实用功能。6.1 右键菜单创建节点目前只能通过工具栏按钮创建节点不方便。GraphView支持右键菜单Contextual Menu。在DungeonGraphView构造函数中添加public DungeonGraphView() { // ... 之前的代码 ... // 添加右键菜单 nodeCreationRequest context { var worldMousePos context.screenMousePosition; var localMousePos contentViewContainer.WorldToLocal(worldMousePos); CreateNode(新房间, localMousePos); }; }现在在GraphView画布空白处右键点击就会在鼠标位置创建一个新的房间节点。6.2 实现节点删除与复制粘贴GraphView默认支持Delete键删除选中元素。但我们也可以增强它。为了支持复制粘贴我们需要序列化节点数据到系统剪贴板。这涉及更复杂的操作一个常见的做法是自定义一个GraphViewEditorWindow来重写CopyPaste相关的事件处理。作为简化我们可以先实现删除的确认对话框。在DungeonGraphView中添加public override void BuildContextualMenu(ContextualMenuPopulateEvent evt) { base.BuildContextualMenu(evt); // 保留基础菜单项如“创建节点” // 如果当前有选中的元素添加自定义删除项 if (selection.Count 0) { evt.menu.AppendAction(删除选中项, (action) DeleteSelectionCallback(AskUser.DontAskUser), (status) DropdownMenuAction.Status.Normal); } }同时确保DeleteSelectionCallback方法被正确调用基类已实现。6.3 添加迷你地图Overview对于大型关卡图迷你地图非常有用。GraphView内置了MiniMap组件。在DungeonGraphView构造函数中或某个初始化方法中添加var miniMap new MiniMap { anchored true }; miniMap.SetPosition(new Rect(10, 30, 200, 150)); // 定位在窗口左上角 Add(miniMap);现在编辑器窗口会有一个可拖拽的迷你地图显示整个关卡图的缩略图。6.4 房间内容详情的编辑之前节点只定义了房间类型和ID现在需要扩充内容。我们可以在节点上添加一个Foldout折叠栏点击后展开显示更详细的属性如敌人列表、宝箱列表。修改DungeonNode的构造函数public DungeonNode() { // ... 之前创建端口和基础属性的代码 ... // 创建内容折叠栏 var contentFoldout new Foldout { text 房间内容 }; contentFoldout.value false; // 默认折叠 // 敌人列表简易版用TextField输入ID逗号分隔 var enemyField new TextField(敌人ID:); enemyField.RegisterValueChangedCallback(evt { // 这里可以解析逗号分隔的字符串存入EnemyIds列表 // 简化处理先只存储字符串 }); contentFoldout.Add(enemyField); // 物品列表 var itemField new TextField(物品ID:); contentFoldout.Add(itemField); contentContainer.Add(contentFoldout); // ... 刷新布局 ... }对于更复杂的列表编辑可以考虑使用ListView或PropertyField需要配合SerializedObject。为了保持编辑器响应速度建议复杂属性编辑采用弹窗或Inspector面板的形式。7. 实战第五步从编辑器数据到游戏运行时编辑器产出的.asset文件是静态数据。游戏运行时需要加载这些数据并实例化成真正的游戏场景。7.1 运行时数据加载在Resources或Addressable中加载我们保存的DungeonGraphModel。// DungeonManager.cs - 游戏运行时管理器 using System.Collections.Generic; using UnityEngine; public class DungeonManager : MonoBehaviour { public DungeonGraphModel dungeonData; public GameObject roomPrefab; // 基础的房间预制体 public Dictionarystring, GameObject spawnedRooms new Dictionarystring, GameObject(); void Start() { if (dungeonData null) { Debug.LogError(未指定关卡数据); return; } GenerateDungeon(); } void GenerateDungeon() { // 1. 实例化所有房间 foreach (var nodeModel in dungeonData.Nodes) { var roomGO Instantiate(roomPrefab, new Vector3(nodeModel.Position.x, 0, nodeModel.Position.y), Quaternion.identity); roomGO.name nodeModel.RoomName; var roomController roomGO.GetComponentRoomController(); if (roomController ! null) { roomController.Initialize(nodeModel); } spawnedRooms.Add(nodeModel.ID, roomGO); } // 2. 根据连接数据处理房间之间的通路例如激活或生成门 foreach (var link in dungeonData.Links) { if (spawnedRooms.TryGetValue(link.BaseNodeID, out var baseRoom) spawnedRooms.TryGetValue(link.TargetNodeID, out var targetRoom)) { // 通知baseRoom它有一个出口通向targetRoom // 通知targetRoom它有一个入口来自baseRoom // 具体实现取决于你的游戏架构比如在房间预制体上挂接Door脚本 } } // 3. 根据房间类型生成内部内容敌人、宝箱等 // 这步可以在RoomController.Initialize中完成 } }7.2 房间控制器RoomController每个房间实例应该有一个控制器脚本来处理自身逻辑。// RoomController.cs using System.Collections; using System.Collections.Generic; using UnityEngine; public class RoomController : MonoBehaviour { public RoomNodeModel data; public ListDoor doors new ListDoor(); // 门组件列表 public void Initialize(RoomNodeModel nodeData) { data nodeData; name nodeData.RoomName; // 根据房间类型可能改变材质、灯光等视觉表现 switch (data.Type) { case DungeonNode.RoomType.Enemy: // 生成敌人 SpawnEnemies(data.EnemyIds); break; case DungeonNode.RoomType.Treasure: // 生成宝箱 SpawnChest(); break; // ... 其他类型 } } void SpawnEnemies(Liststring enemyIds) { foreach (var id in enemyIds) { // 根据ID从配置表或资源管理器获取敌人预制体并实例化 // GameObject enemyPrefab ResourceManager.LoadEnemy(id); // Instantiate(enemyPrefab, transform.position Random.insideUnitSphere * 5, Quaternion.identity, transform); } } // ... 其他方法 }7.3 动态连接与关卡生成上面的GenerateDungeon是一种“静态布局”即房间位置完全按照编辑器中的坐标。对于Roguelike地牢你可能需要“程序化布局”编辑器只定义连接关系图结构运行时再根据算法如随机行走、BSP树计算房间的实际位置和形状。这时DungeonGraphModel中的Position字段可能就用来表示在图中的逻辑位置而非世界坐标。运行时生成器会读取Nodes和Links然后运行自己的布局算法来摆放房间实体。8. 常见问题与排查技巧实录在实际开发中你肯定会遇到各种问题。这里记录一些我踩过的坑和解决方案。8.1 GraphView 不显示或显示异常问题打开编辑器窗口一片空白没有网格也没有节点。排查检查OnEnable确保在EditorWindow的OnEnable方法中正确创建并添加了GraphView实例到rootVisualElement。检查StretchToParentSize调用_graphView.StretchToParentSize()确保GraphView填充窗口。检查命名空间确认使用了UnityEditor.Experimental.GraphView和UnityEngine.UIElements。Unity版本确保你的Unity版本支持GraphView2019.4 LTS或更新版本通常都支持。8.2 端口无法连接或连接后不显示连线问题可以创建端口但拖拽时没有连接线或者连接后线不显示。排查端口方向确认GetCompatiblePorts逻辑正确。输入端口Direction.Input只能连接输出端口Direction.Output。端口容量检查端口实例化时的Port.Capacity。Single只能连接一条边Multi可以连接多条。如果输出端口是Single但已经连了一条线就无法再连第二条。RefreshPorts在动态添加或移除端口后或者在加载数据重新连接后必须调用节点的RefreshPorts()方法否则端口视觉状态不会更新。Edge的添加使用Port.ConnectTo方法创建Edge后必须调用graphView.AddElement(edge)这条边才会被GraphView管理和渲染。8.3 节点属性改变后数据未保存问题在节点UI上修改了房间类型或ID但保存后加载发现还是旧值。排查数据绑定确保UI控件如TextField、DropdownField的RegisterValueChangedCallback回调函数中正确更新了节点类背后的数据模型字段如RoomID、Type。保存时机GraphSaveUtility.SaveGraph中遍历节点时是从GraphView.nodes列表中获取DungeonNode实例然后读取其属性如node.RoomID。确保这里读取的属性与UI控件绑定的属性是同一个。ScriptableObject脏标记直接修改ScriptableObject的字段不会自动标记为脏。在SaveGraph中如果你是在修改一个已加载的Asset在最后应该调用EditorUtility.SetDirty(_graphModel)以确保更改被保存。不过AssetDatabase.CreateAsset会处理这个问题。8.4 编辑器性能问题问题当节点数量非常多比如几百个时编辑器操作变得卡顿。优化简化节点UI避免在单个节点内使用过于复杂的UI元素如嵌套多层ListView。对于复杂属性考虑使用双击节点弹窗编辑的方式。延迟加载对于超大型图可以实现一个基于视口的节点加载/卸载机制只渲染可视区域内的节点。使用ObjectField如果房间内容配置很复杂不要在节点上直接编辑所有细节。可以只放一个ObjectField让用户拖入一个RoomConfig的ScriptableObject资产详细配置在独立的Inspector中完成。8.5 自定义节点样式不生效问题通过代码设置的节点颜色、大小等样式没有效果。排查USS样式表GraphView大量使用USSUnity Style Sheets。更强大的样式控制需要通过加载USS文件实现。你可以创建.uss文件定义像.dungeon-node这样的选择器然后在节点创建时添加对应的样式类名node.AddToClassList(dungeon-node)。内联样式优先级通过style.xxx设置的内联样式通常优先级较高但如果存在USS样式表冲突可能需要使用!important或检查样式表顺序。样式继承确保你在正确的VisualElement上设置样式。例如设置节点背景色可能是mainContainer.style.backgroundColor而不是style.backgroundColor。这个基于Unity GraphView的地牢关卡编辑器从核心架构到具体实现再到问题排查基本框架已经搭建完毕。它成功地将抽象的关卡数据结构转化为可视化的节点图极大地提升了设计效率。你可以在此基础上继续扩展更多节点类型如事件节点、分支节点、更复杂的连接规则带条件的连接、甚至集成地图预览功能。记住好的工具是迭代出来的先做出最小可行产品MVP然后在实际项目中根据需求不断打磨和完善。
