有一个项目，2.5D视角。角色在设定好的路线上自由移动，不能超出路线。

之前的做法是用空气墙，设定物理碰撞，然后角色移动。

我感觉这种做法性能有点低。手机上体验平均帧时是4ms

于是想用空间换时间，将可能的运算进行预处理，然后在运算的时候，只对部分数据进行运算以提升效率。

这个目前还在初始阶段，已经完成了移动。还未考虑到后续逻辑，不过应该没问题的。 

效果如下 

 实现思路

因为所有路线都是直线条，所以只要知道了两个点的坐标，然后基于基础菱形块的尺寸就可以算出两个块组成的一个多边形。然后在移动的时候，判断白块位置是否在这个多边形里，如果不在则不移动。

具体实现

地图节点编辑

地图里的数据，主要就是路线上的端点和拐点。所以在地图设计好了以后，就对场景里的端点和拐点创建一个节点。

节点数据初始化

创建这些节点的目的是用来组合出多边形。多边形组合如下图所示：

从图中可以看出，每一个单元，左、上、右、下都有可能会有一个相邻单元。距离可能不同。

对于我的地图，最多也只能会有4个相邻单元。

所以，可以组合出5个凸多边形。如下图所示：

 1，2，3，4个平行四边形和中间的一个菱形。

那么怎么确定，每个菱形单元附近是哪些单元呢？我用的是有意义的节点命名。比如cell_x_a_b_c_d。其中x代表了这个单元的id，后面的a、b、c、d代表了按照左上右下的顺序排布的相邻节点的id。节点管理起的作用就是用来初始化这些数据。用一个数组管理所有单元，到时候用id就可以直接拿到对应的单元数据。每一个单元数据包含了坐标，相邻单元id和单元的5个多边形。

cocos creator代码如下：

//定义数组用于存储所有单元    
private readonly worldCellsArray: Cell[] = [];
//初始化所有单元
private initWorldCellsArray() {for (let cellNode of this.node.children) {const [curCellId, ...nearCells] = cellNode.name.replace('cell_', '').split('_').map(v => Number(v));this.worldCellsArray.push({node: cellNode,nearCellsIdArray: nearCells,zoonPolygon: []});}
}
//初始化所有单元的多边形，最多5个，最少也有2个。private initWorldCellsPolygon() {const halfCellWidth = this.cellWidth / 2;const halfCellHeight = this.cellHeight / 2;this.worldCellsArray.forEach(cell => {const { x, y } = cell.node.position;cell.zoonPolygon.push([x - halfCellWidth,y,x,y - halfCellHeight,x + halfCellWidth,y,x,y + halfCellHeight]);for (let id of cell.nearCellsIdArray) {const nearCell = this.worldCellsArray[id - 1];if (nearCell) {const { x: oX, y: oY } = nearCell.node.position;if (oX < x && oY < y) {//left bottomcell.zoonPolygon.push([oX - halfCellWidth,oY,oX,oY - halfCellHeight,x,y - halfCellHeight,x - halfCellWidth,y]);} else if (oX < x && oY > y) {//left topcell.zoonPolygon.push([oX,oY + halfCellHeight,oX - halfCellWidth,oY,x - halfCellWidth,y,x,y + halfCellHeight]);} else if (oX > x && oY > y) {//right topcell.zoonPolygon.push([oX,oY + halfCellHeight,x,y + halfCellHeight,x + halfCellWidth,y,oX + halfCellWidth,oY]);} else if (oX > x && oY < y) {//right bottomcell.zoonPolygon.push([x,y + halfCellHeight,x - halfCellWidth,y,oX,oY - halfCellHeight,oX + halfCellWidth,oY]);}}}});}

移动管理

当角色移动的时候，就拿到角色当前的单元id的多边形，挨个和5个多边形比较。但凡和点在一个多边形内，则返回正确，可以继续移动。并且把在哪个多边形同时也返回回去。就可以一直进行判断了。

代码如下：

    private readonly backObj: [boolean, number] = [false, 0];public judgeIsInCellZoonAndGetCurCellId(cellId: number, judgeVec2: Vec2) {const cell = this.worldCellsArray[cellId - 1];this.backObj[0] = false;this.backObj[1] = cellId;if (!cell) return this.backObj;for (let polygonIndex = 0; polygonIndex < cell.zoonPolygon.length; polygonIndex++) {const polygon = cell.zoonPolygon[polygonIndex];for (let vec2Index = 0; vec2Index < this.toolVec2Pool.length; vec2Index++) {this.toolVec2Pool[vec2Index].set(polygon[vec2Index * 2], polygon[vec2Index * 2 + 1]);}const isIn = Intersection2D.pointInPolygon(judgeVec2, this.toolVec2Pool);if (isIn) {this.backObj[0] = true;if (polygonIndex) {this.backObj[1] = cell.nearCellsIdArray[polygonIndex - 1];}break;}}return this.backObj;}

因为每次都只需要进行5个多边形的判断，所以性能比用物理碰撞好得多。最后的手机预览帧时为1.5ms。还是提升了很多的。