抛物线还是比较常用的,人物跳跃,投掷物等等,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();
  }
Logo

这里是一个专注于游戏开发的社区,我们致力于为广大游戏爱好者提供一个良好的学习和交流平台。我们的专区包含了各大流行引擎的技术博文,涵盖了从入门到进阶的各个阶段,无论你是初学者还是资深开发者,都能在这里找到适合自己的内容。除此之外,我们还会不定期举办游戏开发相关的活动,让大家更好地交流互动。加入我们,一起探索游戏开发的奥秘吧!

更多推荐