Unity 实现一个可交互的网格地图编辑器

1. 网格地图编辑器的核心设计思路网格地图编辑器是策略游戏和模拟经营类游戏开发中的核心工具。想象一下《文明》系列中那些整齐排列的六边形地块或是《模拟城市》里划分明确的功能区域——这些都需要一个灵活的网格系统作为基础。我在实际项目中发现一个完整的网格编辑器需要包含三个关键模块可视化网格生成通过代码动态创建可交互的网格单元数据存储结构用二维数组或字典记录每个网格的状态编辑功能集成实现绘制、擦除、保存/加载等基础操作这里有个新手容易踩的坑很多开发者会直接用Unity自带的Tilemap系统但对于需要复杂交互的RTS或SLG游戏自定义网格系统反而更灵活。我去年做的一个战棋项目就遇到过这个问题最后重写了整个网格系统才实现部队的ZOC控制区效果。2. 基础网格生成实现先创建一个基础的网格单元预制体。这里我用立方体作为演示实际项目中可以根据需要替换为任意模型public class GridCell : MonoBehaviour { public Vector2Int coordinate; // 网格坐标 public Color cellColor Color.white; public bool isObstacle; private MeshRenderer _renderer; void Awake() { _renderer GetComponentMeshRenderer(); UpdateVisual(); } public void UpdateVisual() { _renderer.material.color isObstacle ? Color.red : cellColor; } void OnMouseDown() { // 点击交互逻辑 } }接下来是网格生成器的核心代码。注意这里使用了对象池优化避免频繁实例化/销毁造成的性能问题public class GridGenerator : MonoBehaviour { [Header(基础设置)] public GameObject cellPrefab; public Vector2Int gridSize new Vector2Int(10, 10); public float cellSize 1f; [Header(高级设置)] public bool useHexGrid; // 六边形网格 public float hexRadius 0.5f; private GridCell[,] _grid; private Transform _gridParent; void Start() { GenerateGrid(); } void GenerateGrid() { // 对象池初始化 if(_gridParent ! null) Destroy(_gridParent.gameObject); _gridParent new GameObject(Grid).transform; _grid new GridCell[gridSize.x, gridSize.y]; for (int x 0; x gridSize.x; x) { for (int y 0; y gridSize.y; y) { Vector3 position useHexGrid ? GetHexPosition(x, y) : new Vector3(x * cellSize, 0, y * cellSize); var cell Instantiate(cellPrefab, position, Quaternion.identity, _gridParent).GetComponentGridCell(); cell.coordinate new Vector2Int(x, y); _grid[x, y] cell; } } } Vector3 GetHexPosition(int x, int y) { float horizontalSpacing hexRadius * Mathf.Sqrt(3f); float verticalSpacing hexRadius * 1.5f; return new Vector3( x * horizontalSpacing (y % 2) * horizontalSpacing * 0.5f, 0, y * verticalSpacing ); } }3. 编辑器功能扩展基础网格生成后我们需要添加实用的编辑功能。这里我推荐使用命令模式实现撤销/重做功能——这个设计模式在编辑器开发中特别有用。3.1 绘制系统实现public class GridEditor : MonoBehaviour { public enum EditMode { Paint, Erase, Obstacle } [Header(工具设置)] public EditMode currentMode EditMode.Paint; public Color paintColor Color.green; public int brushSize 1; private StackICommand _commandHistory new StackICommand(); private GridGenerator _gridGenerator; void Update() { if (Input.GetMouseButton(0)) { HandleEditing(); } // 快捷键处理 if (Input.GetKeyDown(KeyCode.Z) Input.GetKey(KeyCode.LeftControl)) { Undo(); } } void HandleEditing() { Ray ray Camera.main.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out var hit)) { var cell hit.collider.GetComponentGridCell(); if (cell ! null) { ExecuteCommand(new EditCommand(cell, currentMode, paintColor)); } } } void ExecuteCommand(ICommand command) { command.Execute(); _commandHistory.Push(command); } public void Undo() { if (_commandHistory.Count 0) { _commandHistory.Pop().Undo(); } } } // 命令接口 public interface ICommand { void Execute(); void Undo(); } // 具体命令实现 public class EditCommand : ICommand { private GridCell _cell; private GridEditor.EditMode _mode; private Color _newColor; private Color _originalColor; private bool _originalObstacle; public EditCommand(GridCell cell, GridEditor.EditMode mode, Color color) { _cell cell; _mode mode; _newColor color; _originalColor cell.cellColor; _originalObstacle cell.isObstacle; } public void Execute() { switch (_mode) { case GridEditor.EditMode.Paint: _cell.cellColor _newColor; _cell.isObstacle false; break; case GridEditor.EditMode.Erase: _cell.cellColor Color.white; _cell.isObstacle false; break; case GridEditor.EditMode.Obstacle: _cell.isObstacle true; _cell.cellColor Color.red; break; } _cell.UpdateVisual(); } public void Undo() { _cell.cellColor _originalColor; _cell.isObstacle _originalObstacle; _cell.UpdateVisual(); } }3.2 数据序列化方案编辑好的地图需要保存这里提供两种常用方案JSON方案适合小型地图[System.Serializable] public class GridData { public int width; public int height; public ListCellData cells new ListCellData(); } [System.Serializable] public class CellData { public int x; public int y; public string colorHex; public bool isObstacle; } public void SaveGrid(string path) { GridData data new GridData { width gridSize.x, height gridSize.y }; foreach (var cell in _grid) { data.cells.Add(new CellData { x cell.coordinate.x, y cell.coordinate.y, colorHex ColorUtility.ToHtmlStringRGB(cell.cellColor), isObstacle cell.isObstacle }); } string json JsonUtility.ToJson(data); File.WriteAllText(path, json); }二进制方案适合大型地图public void SaveBinary(string path) { using (var stream new FileStream(path, FileMode.Create)) { using (var writer new BinaryWriter(stream)) { writer.Write(gridSize.x); writer.Write(gridSize.y); for (int x 0; x gridSize.x; x) { for (int y 0; y gridSize.y; y) { var cell _grid[x, y]; writer.Write(cell.coordinate.x); writer.Write(cell.coordinate.y); writer.Write(cell.cellColor.r); writer.Write(cell.cellColor.g); writer.Write(cell.cellColor.b); writer.Write(cell.isObstacle); } } } } }4. 性能优化技巧当网格规模变大时比如100x100以上需要注意以下优化点1. 批处理渲染// 在GridGenerator中添加 void OptimizeRendering() { StaticBatchingUtility.Combine(_gridParent.gameObject); }2. 按需更新// 修改GridCell代码 public void SetColor(Color color, bool immediateUpdate false) { cellColor color; if (immediateUpdate) UpdateVisual(); } // 在编辑器代码中批量更新 public void ApplyToAllCells() { foreach (var cell in _grid) { cell.SetColor(paintColor); } // 统一刷新 StartCoroutine(UpdateAllVisuals()); } IEnumerator UpdateAllVisuals() { yield return null; // 等待一帧 foreach (var cell in _grid) { cell.UpdateVisual(); yield return null; // 分帧处理 } }3. 空间分区优化对于超大网格可以使用四叉树或网格空间分区来优化点击检测public class GridPartition { private DictionaryVector2Int, ListGridCell _partitions new DictionaryVector2Int, ListGridCell(); private int _partitionSize 10; public void AddCell(GridCell cell) { Vector2Int partitionCoord new Vector2Int( Mathf.FloorToInt(cell.coordinate.x / (float)_partitionSize), Mathf.FloorToInt(cell.coordinate.y / (float)_partitionSize) ); if (!_partitions.ContainsKey(partitionCoord)) { _partitions[partitionCoord] new ListGridCell(); } _partitions[partitionCoord].Add(cell); } public GridCell GetCellAtPosition(Vector3 worldPos) { // 转换世界坐标到分区坐标 // 只在对应分区内检测碰撞 } }5. 高级功能实现5.1 区域选择工具public class AreaSelectionTool : MonoBehaviour { private Vector2Int _startCoord; private ListGridCell _selectedCells new ListGridCell(); void Update() { if (Input.GetMouseButtonDown(0)) { _startCoord GetHoveredCellCoord(); } if (Input.GetMouseButton(0)) { UpdateSelection(); } if (Input.GetMouseButtonUp(0)) { ApplyToSelection(); } } void UpdateSelection() { ClearSelectionVisual(); Vector2Int endCoord GetHoveredCellCoord(); _selectedCells.Clear(); // 矩形选择逻辑 int minX Mathf.Min(_startCoord.x, endCoord.x); int maxX Mathf.Max(_startCoord.x, endCoord.x); int minY Mathf.Min(_startCoord.y, endCoord.y); int maxY Mathf.Max(_startCoord.y, endCoord.y); for (int x minX; x maxX; x) { for (int y minY; y maxY; y) { if (IsValidCoord(x, y)) { var cell _grid[x, y]; _selectedCells.Add(cell); cell.ShowHighlight(true); } } } } void ApplyToSelection() { foreach (var cell in _selectedCells) { // 应用当前编辑操作 cell.ShowHighlight(false); } } }5.2 自定义属性系统public class CellAttributeSystem : MonoBehaviour { [System.Serializable] public class Attribute { public string name; public float value; public Color displayColor; } public ListAttribute templateAttributes new ListAttribute(); private DictionaryGridCell, ListAttribute _cellAttributes new DictionaryGridCell, ListAttribute(); public void AddAttribute(GridCell cell, string attributeName, float value) { if (!_cellAttributes.ContainsKey(cell)) { _cellAttributes[cell] new ListAttribute(); } var template templateAttributes.Find(a a.name attributeName); if (template ! null) { var newAttr new Attribute { name template.name, value value, displayColor template.displayColor }; _cellAttributes[cell].Add(newAttr); UpdateCellVisual(cell); } } void UpdateCellVisual(GridCell cell) { if (_cellAttributes.TryGetValue(cell, out var attrs)) { // 根据属性值混合颜色 Color finalColor Color.white; foreach (var attr in attrs) { finalColor Color.Lerp(finalColor, attr.displayColor, attr.value); } cell.SetColor(finalColor); } } }6. 编辑器UI集成最后为编辑器创建一个完整的UI界面public class GridEditorUI : MonoBehaviour { [Header(引用)] public GridEditor editor; public TMP_InputField widthInput; public TMP_InputField heightInput; public ToggleGroup editModeGroup; public ColorPicker colorPicker; [Header(预设)] public GameObject buttonPrefab; public Transform toolsPanel; void Start() { // 初始化模式选择按钮 foreach (var mode in System.Enum.GetValues(typeof(GridEditor.EditMode))) { var btn Instantiate(buttonPrefab, toolsPanel).GetComponentButton(); btn.GetComponentInChildrenTextMeshProUGUI().text mode.ToString(); btn.onClick.AddListener(() OnModeSelected((GridEditor.EditMode)mode)); } // 绑定颜色选择器 colorPicker.onValueChanged.AddListener(color { editor.paintColor color; }); } public void OnGenerateClicked() { int width int.Parse(widthInput.text); int height int.Parse(heightInput.text); editor.RegenerateGrid(width, height); } void OnModeSelected(GridEditor.EditMode mode) { editor.currentMode mode; } public void OnSaveClicked() { string path EditorUtility.SaveFilePanel(保存网格, , grid, json); if (!string.IsNullOrEmpty(path)) { editor.SaveGrid(path); } } }实际项目中我建议使用Unity的UI Toolkit来构建更复杂的编辑器界面它比传统的UGUI更适合工具类界面的开发。最近一个项目中我用UI Toolkit重构了地图编辑器性能提升了约40%特别是处理大量网格元素时更为流畅。