【cocos creator】【TS】贝塞尔曲线，地图之间显示曲线，顺着曲线移动

参考：
https://blog.csdn.net/Ctrls_/article/details/108731313
https://blog.csdn.net/qq_28299311/article/details/104009804

在这里插入图片描述

const { ccclass, property } = cc._decorator;@ccclass
export default class mapPanel extends cc.Component {@property(cc.Node)player: cc.Node = null;@property(cc.Node)build: cc.Node = null;@property(cc.Node)point: cc.Node = null;@property(cc.Node)root: cc.Node = null;start() {this.init();}init(data?) {data = {mapData: [{ id: 1, name: "1", pos: { x: 0, y: 100 } },{ id: 2, name: "2", pos: { x: -100, y: -100 } },{ id: 3, name: "3", pos: { x: 200, y: -80 } },{ id: 4, name: "4", pos: { x: 180, y: 300 } },{ id: 5, name: "5", pos: { x: 150, y: 50 } }],linkData: [[2, 1], [1, 4], [5, 1], [5, 3], [2, 5]],startPosId: 2,road: [2, 5, 1, 4]}data.mapData.forEach(element => {this.creatOneBuild(element, data.startPosId)});this.player.position = data.mapData[data.startPosId - 1].posdata.linkData.forEach(element => {this.setPoint(cc.v2(data.mapData[element[0] - 1].pos), cc.v2(data.mapData[element[1] - 1].pos))});let roadArray = []data.road.forEach((element) => {roadArray.push(data.mapData[element - 1].pos);})this.playTween(roadArray);}playTween(roadArray, moveSpeed = 0.003, time = 1.5, delayTime = 0.3, cb?) {let tween = cc.tween(this.player)let nowPos = roadArray[0]for (let i = 1; i < roadArray.length; i++) {let nextPos = roadArray[i]let pointArr = this.getOneroad(nowPos, nextPos, 1)let speed = moveSpeedif (pointArr.length * moveSpeed > time) speed = (time / pointArr.length)// if (speed > moveSpeed) speed = moveSpeedpointArr.forEach(element => {tween.to(speed, { position: element })});tween.delay(delayTime)nowPos = nextPos;}tween.call(() => {cb && cb()}).start();}creatOneBuild(data, nowId) {let build = cc.instantiate(this.build);build.parent = this.root;build.position = cc.v3(data.pos);build.getChildByName("name").getComponent(cc.Label).string = data.name;build.active = true;build.getChildByName("light").active = nowId == data.id;}creatOnePoint(pos: cc.Vec3) {let build = cc.instantiate(this.point);build.parent = this.root;build.position = pos;build.active = true;}/*** 设置点* @param startPoint 起点* @param endPoint 终点* @param pointDistance 小点间距* @param angel 弧度*/setPoint(startPoint, endPoint, pointDistance = 30, angel = 60) {let pointArr = this.getOneroad(startPoint, endPoint, pointDistance, angel)pointArr.forEach(element => {this.creatOnePoint(element)console.log(element);//每个小圆点点坐标，这里进行处理});}/*** 获取n点之间路径* @param startPoint 起点* @param endPoint 终点* @param pointDistance 小点间距* @param angel 弧度*/getTotalRoad(arrList, pointDistance = 30, angel = 60) {let pointArrTotal = []let nowPos = pointArrTotal.shift()let list = arrList;while (1) {let nextPos = list.shift()if (nextPos) {let pointArr = this.getOneroad(nowPos, nextPos, pointDistance, angel)pointArrTotal = pointArrTotal.concat(pointArr)nowPos = nextPos;}else {break;}}return pointArrTotal}/*** 获取两点之间路径* @param startPoint 起点* @param endPoint 终点* @param pointDistance 小点间距* @param angel 弧度*/getOneroad(startPoint, endPoint, pointDistance = 30, angel = 60) {startPoint = cc.v2(startPoint);endPoint = cc.v2(endPoint);let distance = startPoint.sub(endPoint).mag();let middlePoint = cc.v2((startPoint.x + endPoint.x) / 2, (startPoint.y + endPoint.y) / 2)let height = Math.sin(angel * (180 / Math.PI)) * (distance / 2) * 1.5;cc.log(height)let middlePoint2 = this.findPointCInRightTriangle(startPoint, middlePoint, height);let number = Number((distance / pointDistance).toFixed(0));let pointArr = this.getBezierPoints(number, startPoint, height ? middlePoint2 : middlePoint, endPoint)return pointArr;}/*** 获取两点之间垂直平分线线上的点* @param startPoint * @param endPoint * @param bcLength * @returns */findPointCInRightTriangle(startPoint: cc.Vec2, endPoint: cc.Vec2, bcLength: number, isUP = true): cc.Vec2 | null {let ax = endPoint.x;let ay = endPoint.y;let bx = startPoint.x;let by = startPoint.y;// 计算向量AB  const dx = bx - ax;const dy = by - ay;// 计算AB的长度  const abLength = Math.sqrt(dx * dx + dy * dy);// 检查AB长度是否为零，以避免除以零的错误  if (abLength === 0) {return null; // 无法确定C点位置，因为AB长度为0  }// 计算AC的长度（利用勾股定理）  const acLength = Math.sqrt(bcLength * bcLength - abLength * abLength);// 计算向量AB的单位向量  const abUnitX = dx / abLength;const abUnitY = dy / abLength;// 计算向量AC，它垂直于向量AB（因为ABC是直角三角形）  const acUnitX = -abUnitY; // 垂直向量的x分量是原向量y分量的相反数  const acUnitY = abUnitX;  // 垂直向量的y分量是原向量x分量  // 计算点C的坐标  const cx = ax + acLength * acUnitX * (isUP ? -1 : 1);const cy = ay + acLength * acUnitY * (isUP ? -1 : 1);return cc.v2(cx, cy);}/*** 获取贝塞尔曲线上的点* @param {返回的点的数组长度} num * @param {起点} startPoint * @param {控制点} middlePoint * @param {终点} endPoint */getBezierPoints(num, startPoint, middlePoint, endPoint) {let pointList = [];let x1 = startPoint.x, y1 = startPoint.y;let x2 = endPoint.x, y2 = endPoint.y;let cx = middlePoint.x, cy = middlePoint.y;let t = 0;for (let i = 1; i < (num + 1); i++) {//用i当作t，算出点坐标，放入数组t = i / num;let x = Math.pow(1 - t, 2) * x1 + 2 * t * (1 - t) * cx + Math.pow(t, 2) * x2;let y = Math.pow(1 - t, 2) * y1 + 2 * t * (1 - t) * cy + Math.pow(t, 2) * y2;pointList.push(cc.v2(x, y))}return pointList;}// update (dt) {}
}