【想做一百款小游戏】之《萌喵对对碰》 - Showcase - Cocos中文社区像这个贴子里面得第二款游戏，那个身体节点丝滑的移动效果该怎么处理？我实现出来的，看起来存在卡顿的问题，一顿一顿的。有没有大佬帮帮忙，给点思路？十分感谢
我的做法一般是先生成路径点，弯道路径部分用贝塞尔曲线实现，然后按路径点移动就可以了。正好最近也在做类似功能。
1赞
楼上说的可取，此外可以再用一下插值看看会不会更平滑一些
我也是这个思路，移动我用update，dtspeeddir.x，y值也同样如此，去移动，然后还有一个路径点的标识，看上去就是怪怪的。所以我怀疑是不是我移动哪里不对了？
然后我的节点回退的时候能衔接好，但是再次往前往前移动的时候，后退过的点，又会产生一些位置上的偏差。不知道是不是我的路径点标识的处理，存在问题？
有没有偏差只能自己打log看了，如果不确定是不是判断到达路径点的方法有问题用tween做移动也可以。
如果转向僵硬可以用lerp插值 + 每帧最大角度限制做平滑处理
tween我就是觉得可能会不太好控制。
打印出来的点也看不明白，肉眼可见，就是不对了
不是自己写的代码吗？怎么会看不明白
插值计算出来的点，都是配置路径点与点之间的点，看这些点也没用啊。每次看，都不一样。肉眼可见就是不对了。
写过一个更复杂的形状, 说下我个人的实现和优化思路
- 尽量使用自定义的 渲染器(2d assembler/3d 的mesh renderer),相当于粒子的模式
- 固定长度比如最多10000节,方便内存管理,以数组的形式去管理每个部位. 每个部位{pos:[],uv:[],offset:number},只渲染有数据的部分, 用双指针维护删减, 这里因为我的蛇头是随机的,蛇头是移动蛇头的pos,后面做了lerp,针对标准图形更简单,更简单一点, z +=spd*dt(2D 可以用y), 算出x
private _updateEff(eff: EffectConfig,
buffers: EffectBuffer, dt: number) {
const { shapeCount, vertexStride } = eff;
const pos = eff.pos;
const lerpT = eff.lerpSpeed * dt;
//size[0] for x, size[1] for z
const size = eff.xzSize;
const effOffset = eff.offset;
const floats = MultiEffect.FLOATS_PER_VERT;
// 更新头部顶点
for (let i = 0; i < shapeCount; i++) {
const shape = eff.shape[i];
const offset = effOffset + i * floats;
buffers.vbF32[offset] = shape[0] + pos[0];
buffers.vbF32[offset + 1] = shape[1] + pos[1];
buffers.vbF32[offset + 2] = shape[2] + pos[2];
}
const el = eff.length;
// 更新后续顶点
for (let s = 1; s < el; s++) {
const baseOffset = effOffset + s * vertexStride;
const prevBaseOffset = effOffset + (s - 1) * vertexStride;
for (let i = 0; i < shapeCount; i++) {
const currOff = baseOffset + i * floats;
const prevOff = prevBaseOffset + i * floats;
//前两个是正常的形状
buffers.vbF32[currOff + 2] = buffers.vbF32[prevOff + 2] + size[1];
if (s ==1) {
buffers.vbF32[currOff] = buffers.vbF32[prevOff] + size[0];
buffers.vbF32[currOff + 2] = buffers.vbF32[prevOff + 2] + size[1];
} else {
buffers.vbF32[currOff + 1] += (buffers.vbF32[prevOff + 1] - buffers.vbF32[currOff + 1]) * lerpT;
//后面lerp拖尾
buffers.vbF32[currOff] += (buffers.vbF32[prevOff] - buffers.vbF32[currOff]) * lerpT;
buffers.vbF32[currOff + 2] += (buffers.vbF32[prevOff + 2] - buffers.vbF32[currOff + 2]) * lerpT;
}
}
}
}
- 整体蛇抽象成数学公式
k是衰减系数, 把sin 做个table, a是宽度,b是间隔, 具体的形状可以根据需求自定义, 一个渲染器搞定,里面的
- 每一个身子抽象成棱形,走曼哈顿具体检测.
项目是以前写的, 低端机跑个1000-2000节身子 问题不大.
3赞
也？瞅瞅看！
核心思路给你了,别偷懒 