地图编辑器开发（三）

系列教程：

地图编辑器开发（一）加载地图

地图编辑器开发（二）编辑地图

地图编辑器开发（三）测试阻挡

地图编辑器开发（四）导出阻挡信息

地图编辑器开发（五）导出地图资源

上一节已经把地图信息编辑做好了，这一节实现对编辑好的地图信息进行测试。主要实现以下功能：

A星寻路
显示路径
角色移动

A星寻路

A星寻路算法的基本概念，参考维基百科，算法核心有以下几个点：

开放列表和关闭列表
按 f 值排序
回溯路径

推荐一个视频教程，概念，算法过程，实现都讲得非常详细。

A星寻路算法最终要实现的是，传入地图信息，起点和终点，得到一个从起点到终点的路径，即从起点到终点所经过的格子列表。核心代码如下：

 // 把起点放入开启列表中this.openList.push(this.fromNode);let cur;while(true) {// 从开启列表中取出消耗最少的节点（已拍下，取最后一个节点）cur = this.openList.pop();// 如果是终点，则返回路径if (cur === this.toNode) {let pathList = [];pathList.push(cur);let end = cur;while(end.last) {pathList.unshift(end.last);end = end.last;}return pathList;} else {// 不是终点，则加入到关闭列表中this.closeList.push(cur);}// 将当前点周围的点，放入开启列表this.searchRound(cur);// 死路判断if (this.openList.length === 0) {return;}// 排序，保证最后一个消耗最少this.openList.sort((a, b) => {return b.f - a.f;});}

显示路径

使用A星寻路找出路径之后，把找出的路径显示出来，便于观察。显示路径的方法是把找出的格子画成绿色。主要代码如下：

drawPath() {let node;for (let i = 0; i < this.pathList.length; i++) {let node = this.pathList[i];this.gphPath.rect(node.x * this.cellW, node.y * this.cellH, this.cellW, this.cellH);this.gphPath.fillColor = this.colorPath;this.gphPath.fill();}
},

运行结果：

角色移动

为了方便设置起点和终点，添加一个图标作为游戏玩家，拖动游戏玩家设置寻路的起点，之后鼠标点击的位置，作为寻路的终点。另外在在工具栏加一个测试按钮，区分测试和正常编辑这两个状态。

还是不够直观，再把角色移动的路径也画出来，代码如下：

void drawTrack() {this.gphPath.strokeColor = this.colorPathLine;this.gphPath.lineWidth = 5;let pre;for (let i = 1; i < this.pathList.length; i++) {pre = this.pathList[i - 1];this.gphPath.moveTo ((pre.x + 0.5) * this.cellW, (pre.y + 0.5) * this.cellH)node = this.pathList[i];this.gphPath.lineTo ((node.x + 0.5) * this.cellW, (node.y + 0.5) * this.cellH);}
}

这样就能直观的看到角色移动时所经过的格子和行动的轨迹。

辅助工具都有了，最后就是让角色移动起来，为了简单直接使用 cocos creator 提供的动画来实现。给角色挂上一个脚本，将寻路算法返回的路径列表传递给该脚本，然后实现一个移动到指点格子的方法，逐个将路径中的点传递给该方法。

runToNext() {this.srcNode = this.pathList[this.toIndex];this.toIndex += 1;this.dstNode = this.pathList[this.toIndex];let node = this.pathList[this.toIndex];if (node) {this.runTo((node.x + 0.5) * this.cellW, (node.y + 0.5) * this.cellH);}
},runTo(x, y){// 移动方向let dir = [this.dstNode.x - this.srcNode.x, this.dstNode.y - this.srcNode.y];let rad = Math.atan2(dir[1], dir[0]);let angle = 180/Math.PI * rad;this.node.angle = angle;// 移动时间tm = 0.2;if (this.srcNode.x !== this.dstNode.x && this.srcNode.y !== this.dstNode.y) {// 斜方向移动距离更长，时间要长一点tm *= 1.4;}cc.tween(this.node).to(tm, {position: cc.v2(x, y)}).call(() => {this.runToNext()}).start()
},

其中两个小点要注意：

斜方向移动时，距离相交竖直和水平移动更长，因此动画时间要放大一点；
角色朝向设置，在角色节点上加了一个小方块表示角色正面，根据移动方向设置角色朝向。

角色移动的过程如下：

测试这一块到这里就差不多了，下一节再看导出地图数据。