之前在学习数据结构与算法 - AStar(A*)等寻路算法的过程中提到过网格地图时由类似0是可移动节点、1是障碍节点的网格组成的一张地图，这些地图信息是怎样生成出来的呢？
引言地图编辑器是一种所见即所得的游戏地图制作工具，它辅助设计和输出地图数据，包括创建、编辑、存储和管理游戏地图数据。
如何生成地图数据只考虑 2D 地图，一般来说有两种方式：
PhotoShop打开原始地图文件，按照网格大小进行标注类型
地图编辑器2D 游戏有很多成熟的编辑器，比如：tiled editor，但本着“造轮子”的原则就是开发一套啦！
地图编辑器使用什么技术来开发，选择也很多样性。
考虑学习成本问题，这里使用 Cocos Creator + Typescript 来开发一套简易的地图编辑器。
实现步骤加载贴图文件
根据指定网格大小进行划分网格
可以对网格填充不同的颜色（可行走、不可行走）
导出结果
地图编辑器是游戏开发中最入门的部分，简单粗暴！
加载贴图文件创建一个用于显示地图的Sprite节点。
123456789101112131415161718192021const { ccclass, property } = cc._decorator;@ccclassexport default class main extends cc.Component { // 地图贴图节点 @property(cc.Node) mapNode: cc.Node = null; start() {} onLoad() { // init logic cc.resources.load("textures/4006", cc.SpriteFrame, (err, frame: cc.SpriteFrame) => { if (err) { console.error(err.message || err); return; } this.mapNode.getComponent(cc.Sprite).spriteFrame = frame; }); }}划分网格在 Sprite 节点下创建一个绘图子节点Graphics。
1234567891011// 绘图节点@property(cc.Graphics)mapGraphics: cc.Graphics = null;// 地图原始尺寸originWidth: number = 2862;originHeight: number = 2304;// 网格大小gridWidth: number = 20;gridHeight: number = 20;之后在Graphics节点进行绘制。
1234567891011121314151617181920this.mapGraphics.clear(); // 清除所有绘制this.mapGraphics.strokeColor = cc.Color.RED; // 红色this.mapGraphics.lineWidth = 1; // 线宽度// 画竖线let xMax: number = Math.floor(this.mapNode.width / this.gridWidth);// console.log("xMax = width / gridWidth", xMax, this.mapNode.width, this.gridWidth)for (let i: number = 0; i < xMax; i++) { let x = i * this.gridWidth; this.mapGraphics.moveTo(x, 0); this.mapGraphics.lineTo(x, this.mapNode.height);}// 画横线let yMax: number = Math.floor(this.mapNode.height / this.gridHeight);// console.log("yMax = height / gridHeight", yMax, this.mapNode.height, this.gridHeight)for (let i: number = 0; i < yMax; i++) { let y = i * this.gridHeight; this.mapGraphics.moveTo(0, y); this.mapGraphics.lineTo(this.mapNode.width, y);}this.mapGraphics.stroke();填充颜色监听触屏事件TOUCH_START、TOUCH_MOVE。
123// mouse eventthis.mapNode.on(cc.Node.EventType.TOUCH_START, this.updateGrid, this);this.mapNode.on(cc.Node.EventType.TOUCH_MOVE, this.updateGrid, this);事件触发，给鼠标所在坐标的网格填充颜色。这里需要注意的小知识点坐标系的转换，可分为：世界坐标、本地坐标、像素坐标。
1234567const eventPos: cc.Vec2 = event.getLocation();let pos = this.mapNode.convertToNodeSpaceAR(eventPos); // 转换至节点坐标let x: number = Math.floor(pos.x / this.gridWidth);let y: number = Math.floor(pos.y / this.gridHeight);this.mapGraphics.rect(x * this.gridWidth, y * this.gridHeight, this.gridWidth, this.gridHeight);this.mapGraphics.fillColor = cc.Color.BLUE;this.mapGraphics.fill();导出结果导出结果逻辑很简单，需要在填充颜色时记录对应网格的类型，最后输出到文件。
生成 x*y 个网。
12// 网格信息grids: Array
12345678// 记录格子信息this.grids = new Array(xMax);for (let i: number = 0; i < xMax; i++) { this.grids[i] = new Array(yMax); for (let j: number = 0; j < yMax; j++) { this.grids[i][j] = 1; // 默认不可行走 }}输出到文件
12345678910111213141516171819202122232425const v: object = { map: { originWidth: this.originWidth, originHeight: this.originHeight, width: this.mapNode.width, height: this.mapNode.height, }, grid: { width: this.gridWidth, height: this.gridHeight, }, data: this.grids,};if (cc.sys.isBrowser) { let json = JSON.stringify(v); let blob = new Blob([json], { type: "application/json" }); let aLink = document.createElement("a"); aLink.download = "map.json"; if (window.webkitURL != null) { aLink.href = window.webkitURL.createObjectURL(blob); } aLink.click();} else { console.error("导出仅支持浏览器");}最后附上完整代码：map-editor