Unity基于GraphView的可视化关卡编辑器开发指南_unity graphview
一、GraphView技术基础与应用场景
1. GraphView核心组件
2. 关卡编辑器核心功能规划
图表
节点创建
连接编辑
属性配置
实时预览
数据序列化
场景生成
二、基础编辑器框架实现
1. 编辑器窗口创建
对惹，这里有一个游戏开发交流小组，希望大家可以点击进来一起交流一下开发经验呀
using UnityEditor;using UnityEditor.Experimental.GraphView;using UnityEngine.UIElements;public class LevelGraphWindow : EditorWindow{ private LevelGraphView _graphView; [MenuItem(\"Tools/Level Graph Editor\")] public static void OpenWindow() { var window = GetWindow(); window.titleContent = new GUIContent(\"Level Editor\"); } private void OnEnable() { ConstructGraphView(); GenerateToolbar(); } private void ConstructGraphView() { _graphView = new LevelGraphView { name = \"Level Graph\" }; _graphView.StretchToParentSize(); rootVisualElement.Add(_graphView); } private void GenerateToolbar() { var toolbar = new Toolbar(); var createRoomBtn = new Button(() => _graphView.CreateRoomNode(\"Room\")) { text = \"Create Room\" }; toolbar.Add(createRoomBtn); var saveBtn = new Button(() => SaveGraph()) { text = \"Save\" }; toolbar.Add(saveBtn); rootVisualElement.Add(toolbar); } private void SaveGraph() { var saveUtility = GraphSaveUtility.GetInstance(_graphView); saveUtility.SaveGraph(\"LevelDesign\"); }}
2. 自定义GraphView
public class LevelGraphView : GraphView{ public LevelGraphView() { // 基础设置 SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale); this.AddManipulator(new ContentDragger()); this.AddManipulator(new SelectionDragger()); this.AddManipulator(new RectangleSelector()); // 网格背景 var grid = new GridBackground(); Insert(0, grid); grid.StretchToParentSize(); // 样式设置 var styleSheet = AssetDatabase.LoadAssetAtPath(\"Assets/Editor/LevelGraph.uss\"); styleSheets.Add(styleSheet); } public RoomNode CreateRoomNode(string nodeName) { var roomNode = new RoomNode(this, nodeName); AddElement(roomNode); return roomNode; } // 创建节点连接关系 public override List GetCompatiblePorts(Port startPort, NodeAdapter nodeAdapter) { var compatiblePorts = new List(); ports.ForEach(port => { // 禁止自连接 if (startPort.node == port.node) return; // 输入只能连输出 if (startPort.direction == port.direction) return; // 不同类型端口不能连接 if (startPort.portType != port.portType) return; compatiblePorts.Add(port); }); return compatiblePorts; }}
三、关卡节点系统实现
1. 房间节点实现
public class RoomNode : Node{ public string GUID; public RoomType RoomType; public Vector2 Position; private LevelGraphView _graphView; public RoomNode(LevelGraphView graphView, string title) { GUID = Guid.NewGuid().ToString(); title = title; _graphView = graphView; // 创建输入端口 var inputPort = GeneratePort(\"Input\", Direction.Input, Port.Capacity.Multi); inputContainer.Add(inputPort); // 创建输出端口 var outputPort = GeneratePort(\"Output\", Direction.Output, Port.Capacity.Multi); outputContainer.Add(outputPort); // 房间类型下拉菜单 var roomTypeField = new EnumField(RoomType.Normal); roomTypeField.RegisterValueChangedCallback(evt => { RoomType = (RoomType)evt.newValue; }); mainContainer.Add(roomTypeField); // 敌人数量字段 var enemyCountField = new IntegerField(\"Enemies\"); enemyCountField.value = 0; enemyCountField.RegisterValueChangedCallback(evt => { // 保存到节点数据 }); mainContainer.Add(enemyCountField); // 样式设置 RefreshExpandedState(); RefreshPorts(); } private Port GeneratePort(string name, Direction direction, Port.Capacity capacity) { return InstantiatePort( Orientation.Horizontal, direction, capacity, typeof(float) // 使用虚拟类型 ); }}
2. 特殊节点类型
public class SpawnNode : Node{ public SpawnPointType SpawnType; public SpawnNode() { title = \"Spawn Point\"; // 玩家/敌人选择 var typeField = new EnumField(SpawnPointType.Player); typeField.RegisterValueChangedCallback(evt => { SpawnType = (SpawnPointType)evt.newValue; }); mainContainer.Add(typeField); // 位置偏移 var offsetField = new Vector3Field(\"Offset\"); mainContainer.Add(offsetField); }}public class BossRoomNode : RoomNode{ public BossRoomNode(LevelGraphView graphView) : base(graphView, \"Boss Room\") { // 添加特殊属性 var bossTypeField = new EnumField(BossType.Dragon); mainContainer.Add(bossTypeField); // 样式覆盖 AddToClassList(\"boss-node\"); }}
四、数据持久化与场景生成
1. 序列化数据结构
[System.Serializable]public class NodeSaveData{ public string GUID; public string Type; public Vector2 Position; public string AdditionalData; // JSON序列化扩展数据}[System.Serializable]public class EdgeSaveData{ public string InputNodeGUID; public string OutputNodeGUID;}[System.Serializable]public class GraphSaveData{ public List Nodes = new List(); public List Edges = new List();}
2. 序列化管理器
public class GraphSaveUtility{ private LevelGraphView _graphView; public static GraphSaveUtility GetInstance(LevelGraphView graphView) { return new GraphSaveUtility { _graphView = graphView }; } public void SaveGraph(string fileName) { var saveData = new GraphSaveData(); // 收集节点数据 foreach (var node in _graphView.nodes.ToList().Cast()) { saveData.Nodes.Add(new NodeSaveData { GUID = node.GUID, Position = node.GetPosition().position, Type = node.GetType().Name, AdditionalData = JsonUtility.ToJson(node.GetSaveData()) }); } // 收集连接数据 foreach (var edge in _graphView.edges.ToList()) { var inputNode = edge.input.node as BaseNode; var outputNode = edge.output.node as BaseNode; saveData.Edges.Add(new EdgeSaveData { InputNodeGUID = inputNode.GUID, OutputNodeGUID = outputNode.GUID }); } // 保存到文件 string json = JsonUtility.ToJson(saveData, true); string path = $\"Assets/LevelDesign/{fileName}.level\"; File.WriteAllText(path, json); AssetDatabase.Refresh(); } public void LoadGraph(string fileName) { string path = $\"Assets/LevelDesign/{fileName}.level\"; if (!File.Exists(path)) return; string json = File.ReadAllText(path); var saveData = JsonUtility.FromJson(json); // 重建节点 var nodeMap = new Dictionary(); foreach (var nodeData in saveData.Nodes) { BaseNode node = CreateNodeFromType(nodeData.Type); node.GUID = nodeData.GUID; node.SetPosition(new Rect(nodeData.Position, Vector2.zero)); node.LoadData(JsonUtility.FromJson(nodeData.AdditionalData, node.GetSaveType())); nodeMap.Add(nodeData.GUID, node); _graphView.AddElement(node); } // 重建连接 foreach (var edgeData in saveData.Edges) { var inputNode = nodeMap[edgeData.InputNodeGUID]; var outputNode = nodeMap[edgeData.OutputNodeGUID]; Port inputPort = inputNode.GetInputPort(); Port outputPort = outputNode.GetOutputPort(); var edge = inputPort.ConnectTo(outputPort); _graphView.AddElement(edge); } }}
3. 场景生成器
public class LevelGenerator{ public void GenerateLevel(GraphSaveData levelData) { // 创建根对象 var levelRoot = new GameObject(\"GeneratedLevel\"); // 实例化房间 var roomMap = new Dictionary(); foreach (var nodeData in levelData.Nodes) { if (nodeData.Type == \"RoomNode\") { var roomData = JsonUtility.FromJson(nodeData.AdditionalData); var roomPrefab = GetRoomPrefab(roomData.RoomType); var roomObj = PrefabUtility.InstantiatePrefab(roomPrefab) as GameObject; roomObj.transform.SetParent(levelRoot.transform); roomObj.transform.position = roomData.Position; roomMap.Add(nodeData.GUID, roomObj); } } // 创建连接通道 foreach (var edgeData in levelData.Edges) { var startRoom = roomMap[edgeData.OutputNodeGUID]; var endRoom = roomMap[edgeData.InputNodeGUID]; CreatePathBetweenRooms(startRoom, endRoom); } } private void CreatePathBetweenRooms(GameObject start, GameObject end) { // 计算路径 Vector3 startPos = start.transform.position; Vector3 endPos = end.transform.position; Vector3 direction = (endPos - startPos).normalized; // 实例化路径预制体 var pathPrefab = Resources.Load(\"PathSegment\"); float distance = Vector3.Distance(startPos, endPos); int segments = Mathf.CeilToInt(distance / 5f); for (int i = 0; i < segments; i++) { Vector3 pos = startPos + direction * (i * 5f); var segment = GameObject.Instantiate(pathPrefab, pos, Quaternion.LookRotation(direction)); segment.transform.SetParent(start.transform.parent); } }}
五、实时预览系统实现
1. 场景视图渲染
[InitializeOnLoad]public class LevelPreviewRenderer{ static LevelPreviewRenderer() { SceneView.duringSceneGui += RenderLevelPreview; } private static void RenderLevelPreview(SceneView sceneView) { if (_graphView == null) return; Handles.BeginGUI(); // 绘制房间 foreach (var node in _graphView.nodes) { if (node is RoomNode roomNode) { Vector3 worldPos = GetWorldPosition(roomNode); DrawRoomPreview(worldPos, roomNode.RoomType); } } // 绘制连接 foreach (var edge in _graphView.edges) { var startNode = edge.output.node as RoomNode; var endNode = edge.input.node as RoomNode; if (startNode != null && endNode != null) { Vector3 startPos = GetWorldPosition(startNode); Vector3 endPos = GetWorldPosition(endNode); Handles.DrawDottedLine(startPos, endPos, 5f); } } Handles.EndGUI(); } private static Vector3 GetWorldPosition(RoomNode node) { // 将节点位置转换为世界坐标 return new Vector3( node.Position.x, 0, node.Position.y ); } private static void DrawRoomPreview(Vector3 position, RoomType type) { Color color = type switch { RoomType.Start => Color.green, RoomType.Boss => Color.red, RoomType.Treasure => Color.yellow, _ => Color.gray }; Handles.color = color; Handles.DrawWireCube(position, Vector3.one * 10); Handles.Label(position + Vector3.up * 6, type.ToString()); }}
2. 3D小地图实现
public class LevelMinimap : EditorWindow{ [MenuItem(\"Tools/Level Minimap\")] public static void ShowWindow() { GetWindow(\"Level Minimap\"); } void OnGUI() { if (_graphView == null) return; // 计算视图参数 Rect viewRect = GetLevelBounds(); float scale = Mathf.Min( position.width / viewRect.width, position.height / viewRect.height ); // 绘制背景 EditorGUI.DrawRect(new Rect(0, 0, position.width, position.height), Color.black); // 绘制房间 foreach (var node in _graphView.nodes) { if (node is RoomNode roomNode) { Vector2 viewPos = TransformToView(roomNode.Position, viewRect, scale); DrawRoomMinimap(viewPos, roomNode.RoomType); } } } private Vector2 TransformToView(Vector2 nodePos, Rect bounds, float scale) { return new Vector2( (nodePos.x - bounds.x) * scale, (nodePos.y - bounds.y) * scale ); } private void DrawRoomMinimap(Vector2 position, RoomType type) { // 绘制逻辑类似场景预览 }}
六、进阶功能扩展
1. 自动布局算法
public class LevelLayoutOrganizer{ public void AutoArrange(LevelGraphView graphView) { // 1. 分组处理 var roomGroups = FindConnectedGroups(graphView); // 2. 应用力导向布局 foreach (var group in roomGroups) { ApplyForceDirectedLayout(group); } } private List<List> FindConnectedGroups(GraphView graphView) { // 使用DFS查找连通分量 var visited = new HashSet(); var groups = new List<List>(); foreach (var node in graphView.nodes.OfType()) { if (!visited.Contains(node)) { var group = new List(); DFS(node, visited, group); groups.Add(group); } } return groups; } private void ApplyForceDirectedLayout(List nodes) { // 实现力导向布局算法 for (int iter = 0; iter 0) { Vector2 force = delta.normalized * RepulsionForce(distance); node1.Position += force * Time.deltaTime; } } // 计算连接点引力 foreach (var edge in _graphView.edges) { var start = edge.output.node as RoomNode; var end = edge.input.node as RoomNode; if (start != null && end != null) { Vector2 delta = end.Position - start.Position; Vector2 force = delta * AttractionForce(delta.magnitude); start.Position += force * Time.deltaTime; end.Position -= force * Time.deltaTime; } } } }}
2. 规则验证系统
public class LevelRuleValidator{ public List Validate(LevelGraphView graphView) { var errors = new List(); // 检查起点存在性 if (!graphView.nodes.Any(n => n is RoomNode r && r.RoomType == RoomType.Start)) { errors.Add(\"Level must have a starting room\"); } // 检查Boss房间可达性 var bossRooms = graphView.nodes.OfType() .Where(r => r.RoomType == RoomType.Boss); foreach (var bossRoom in bossRooms) { if (!IsReachableFromStart(bossRoom)) { errors.Add($\"Boss room {bossRoom.title} is not reachable from start\"); } } return errors; } private bool IsReachableFromStart(RoomNode target) { // BFS遍历验证可达性 var startRoom = _graphView.nodes.OfType() .FirstOrDefault(r => r.RoomType == RoomType.Start); if (startRoom == null) return false; var visited = new HashSet(); var queue = new Queue(); queue.Enqueue(startRoom); while (queue.Count > 0) { var current = queue.Dequeue(); if (current == target) return true; foreach (var edge in _graphView.edges) { if (edge.output.node == current) { var nextRoom = edge.input.node as RoomNode; if (nextRoom != null && !visited.Contains(nextRoom)) { visited.Add(nextRoom); queue.Enqueue(nextRoom); } } } } return false; }}
七、完整项目参考
-
官方示例
Package Manager > GraphView Samples > State Machine -
开源关卡编辑器
Unity-Level-Editor
核心功能：-
可视化节点编辑
-
3D实时预览
-
一键场景生成
-
八、总结与最佳实践
1. 性能优化建议
2. 扩展方向
-
AI路径规划：集成A*算法可视化
-
动态事件系统：基于节点的脚本触发器
-
多人协作：实时同步编辑状态
通过GraphView构建的可视化关卡编辑器，可提升关卡设计效率3-5倍，特别适合复杂地牢、开放世界等场景。关键点在于平衡可视化编辑能力与运行时数据转换效率，建议结合ScriptableObject实现灵活的数据驱动架构。
