cocos creator 3.x使用tween缓动接口和贝塞尔曲线实现简易抛物线
cocos creator 3.x使用tween缓动接口和贝塞尔曲线实现简易抛物线
·
抛物线还是比较常用的,人物跳跃,投掷物等等,2dx和3.x接口很多都不兼容了,本文使用3.x中的缓动函数配合onUpdate钩子,计算并设置贝塞尔曲线中的坐标实现简易的抛物线运动。
代码:
nodeMoving(node) { //node为做抛物线运动的节点
let startPos = node.position //起点,抛物线开始的坐标
let middlePos = new Vec3(node.position.x + 400, node.position.y + 600, 0) //中间坐标,即抛物线最高点坐标
let destPos = new Vec3(node.position.x + 800, node.position.y, 0) //终点,抛物线落地点
//计算贝塞尔曲线坐标函数
let twoBezier = (t: number, p1: Vec3, cp: Vec3, p2: Vec3) => {
let x = (1 - t) * (1 - t) * p1.x + 2 * t * (1 - t) * cp.x + t * t * p2.x;
let y = (1 - t) * (1 - t) * p1.y + 2 * t * (1 - t) * cp.y + t * t * p2.y;
return new Vec3(x, y, 0);
};
let tweenDuration: number = 1.0;
tween(node.position)
.to(tweenDuration, destPos, {
onUpdate: (target: Vec3, ratio: number) => {
node.position = twoBezier(ratio, startPos, middlePos, destPos);
}
}).start();
}
这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!
更多推荐
已为社区贡献2条内容
所有评论(0)