1. 鱼类数据
消息数据FishMsg，
模板数据FishTemplate
2. 运动
首先我们确定运动路线的移动点配置 points.json。通过编辑器生成配置文件。
版本1
直接使用moveTo()，在编辑器上绘制移动点。对于转弯处，多加点一动点。在转向时使用rotateTo，短时间内完成转向。
// 配置文件格式points.json
{
"1":[-1.5499,1.6221,-1.2454,0.221,-0.0323,0.044],
"2":[-1.5499,1.6221,-1.2454,0.221,-0.0323,0.044],
}
// 路线1:[x1,y1,x2,y2,x3,y3] ....
问题：在转向时明显生硬。运动不平滑。而且在转弯处会多出很多控制点。
版本2
运动使用bezierTo()。
// 配置文件格式points.json
{
"1":[{"points":[-1.5499,1.6221,-1.2454,0.221,-0.0323,0.044],"dis":1319.7123619243716},
{"points":[-0.0323,0.044,1.0018,-0.029,1.5671,-1.5864],"dis":1329.6391190179793}],
"2":[{"points":[-1.6555,-0.8832,-1.0402,-0.5708,-0.4808,-0.2843],"dis":782.1132685083086},
{"points":[-0.4808,-0.2843,0.076,-0.0186,0.6531,0.2627],"dis":751.9416486697122},
{"points":[0.6531,0.2627,1.1982,0.5284,1.6023,0.7315],"dis":630.5624639882999}]
}
// 路线1:points：[x1,y1,x2,y2,x3,y3] 贝塞尔曲线控制点，起点1 控制点2 结束点3 dis：路线长度
//
路线是由多段贝塞尔曲线拼接成的一条长曲线。 因为需求是需要能画出圆圈样的路线，那么不管是二阶还是三阶的贝塞尔曲线都无法满足这样的需求。只有将多条曲线拼接起来。
因为传递的点是3个点，而第一个点为起点。这样同样有问题：起点和第一个控制点相同，在这段距离上，贝塞尔曲线还是计算出了这段曲线对应的速度和时间，那么在从第一段曲线运动到第二段曲线时，会出现一会停顿。然后才会继续运动。
解决：
/**
* //升阶函数， 我们在使用返回的数组是需要跑去第一个起点。传后3个点到bezierTo()
* @param arr
* @return 返回数组[起点，控制点1，控制点2，终点]
*/
public static fixBezierPoints(arr:Array<cc.Vec2>) : Array<cc.Vec2>
{
arr = arr.slice(0,3);
var newP = [];//用于存储新的绘制点
var x,y,n = arr.length;
newP.push(arr[0]);
for (var i = 1; i < arr.length; i++) {
x = i/n*arr[i-1].x + (n-i)/n*arr[i].x;
y = i/n*arr[i-1].y + (n-i)/n*arr[i].y;
newP.push(new cc.Vec2(x,y));
}
newP.push(arr[n-1]);
return newP;
}
问题：同步问题。在重联时，无法准确定位到重联时的具体位置。
版本3
配置文件格式和版本2一样。
运动使用update()，通过设置每帧的位置来移动。
那么这个方案的问题来了。
1. 我们需要知道曲线上的每个点的位置，
2. 计算有多少帧，有多少点。
/*
生成贝塞尔曲线点
*/
public static pointOnCubicBezier(cp:Array<cc.Vec2>, t:number): cc.Vec2
{
let ax, bx, cx, ay, by, cy;
let tSquared, tCubed;
let result: cc.Vec2 = cc.p(0, 0);
/* 计算多项式系数 */
cx = 3.0 * (cp[1].x - cp[0].x);
bx = 3.0 * (cp[2].x - cp[1].x) - cx;
ax = cp[3].x - cp[0].x - cx - bx;
cy = 3.0 * (cp[1].y - cp[0].y);
by = 3.0 * (cp[2].y - cp[1].y) - cy;
ay = cp[3].y - cp[0].y - cy - by;
/* 计算t位置的点值 */
tSquared = t * t;
tCubed = tSquared * t;
result.x = (ax * tCubed) + (bx * tSquared) + (cx * t) + cp[0].x;
result.y = (ay * tCubed) + (by * tSquared) + (cy * t) + cp[0].y;
return result;
}
/**
* 计算贝塞尔曲线上的点数
* @param cp 控制点数组[起点，控制点1，控制点2，终点]
* @param numberOfPoints 划取的总点数
*/
public static computeBezier(cp:Array<cc.Vec2> , numberOfPoints:number ): Array<cc.Vec2>
{
let curve:Array<cc.Vec2> = [];
let dt:number;
let i:number;
dt = 1.0 / (numberOfPoints - 1);
for (i = 0; i < numberOfPoints; i++) {
curve[i] = CatchFishHelper.pointOnCubicBezier(cp, i*dt);
}
return curve;
}
方法来源：https://blog.csdn.net/zggxyx2004/article/details/83413582
坑点：在两段曲线的连接处，对应的点有两个一样的。我们需要删掉一个，不然会出现转向的问题。
3. 转向
在每帧的移动中同时计算转向。
记录上一个点，取当前点。
/**
* 刷新旋转角度
*/
protected refreshRotation(): void
{
if (null == this.lastPoint)
{
return;
}
if (this.curPathIndex == 0 || this.curPathIndex >= this.pathAllPoints.length)
{
return;
}
let curPoint: cc.Vec2 = this.pathAllPoints[this.curPathIndex]; //获取鱼当前坐标 this.node.position;//
if (curPoint == this.lastPoint) //
{
return ;
}
let K = Math.atan2(this.lastPos.y - curPoint.y, curPoint.x - this.lastPos.x);
let rota: number = K*180.0/Math.PI;
// 避免鱼出现仰泳 ╮(╯﹏╰）╭
// if (Math.abs(rota) > 90)
// {
// rota = rota > 0 ? (rota + 180) : (rota - 180);
// this.node.scaleX = -Math.abs(this.node.scaleX);
// }
// else
// {
// this.node.scaleX = Math.abs(this.node.scaleX);
// }
this.node.rotation = rota;
this.lastPoint = curPoint; //保存当前的坐标给下一轮刷新使用
}
4.鱼重联策略
现在正常情况下，我们的鱼都已经完成了。
那么重联情况下，我们要怎么同步鱼呢？
在上面的运动版本3中，我们已经知道了路径的总距离。而且鱼的游动速度我们是一直的。
那么对于同步的话，也就简单了。
我们依靠服务器记录的每条鱼的存活时间，计算出当前鱼的时间和点坐标index。
网友评论