反复横跳的瞄准线！从向量计算说起！基于射线检测的实现！Cocos Creator!

Posted 2021-03-22 lamyoung

最近有小伙伴问我瞄准线遇到各种形状该怎么处理？如何实现反复横跳的瞄准线？最近刚好在《Cocos Creator游戏开发实战》中看到物理系统有一个射线检测，于是，基于这个射线检测，写了一个反复横跳的瞄准线效果。一起往下看吧！文章底部获取完整项目！

国际惯例，先上最终效果！

在讲解之前我们需要一些向量的知识，简单的介绍一些吧！

向量的加法，OA + AB = OB

向量的点乘，表示一个向量在另一个向量上的投影，是个标量，有正负之分。向量夹角小于 90度 为正数，等于 90度 为 零，大于 90度 为负数。

向量的叉乘，结果为向量，正好垂直于两个向量构成的平面(右手系)，也称为法向量。这里暂时没用到，顺便提一下。

接下来进入正题，已知入射向量(单位向量)，法向量(单位向量)，如何得出反射向量？

我们将反射向量平移至入射向量起点，延长法向量与其相交，这个延长线的长度，刚好是 入射向量在法向量上的投影的相反数的两倍 。再根据投影和向量加法可以推出反射向量的计算公式。

清楚了么？不清楚也没关系，记得最后的公式就可以了，接下来进入 cocos creator 操作环节。

既然是物理系统中的碰撞检测，我们在编辑器里添加的是物理系统中的碰撞器，而不是引擎的碰撞器，不要选错了哦。

不动的刚体类型设为 static ，添加完所有的物理碰撞器后如下所示。

用到物理引擎自然要把物理引擎打开。

cc.director.getPhysicsManager().enabled = true;

如何进行射线检测的？通过起始点、入射方向和剩余线段的长度获取射线检测的结果。如果检测到碰撞体，就画入射线段，并计算反射方向，再次进行射线检测；如果未检测到碰撞体，就把剩余线段画完。主要代码如下：

/**
 * @description 计算射线
 * @param startLocation 起始位置 世界坐标系
 * @param vector_dir 单位方向向量
 */
private drawRayCast(startLocation: cc.Vec2, vector_dir: cc.Vec2) {
    // 剩余长度
    const left_length = AIM_LINE_MAX_LENGTH - this._cur_length;
    if (left_length <= 0) return;
    // 计算线的终点位置
    const endLocation = startLocation.add(vector_dir.mul(left_length));
    // 射线测试
    const results = cc.director.getPhysicsManager().rayCast(startLocation, endLocation, cc.RayCastType.Closest);
    if (results.length > 0) {
        const result = results[0];
        // 指定射线与穿过的碰撞体在哪一点相交。
        const point = result.point;
        // 画入射线段
        this.drawAimLine(startLocation, point);
        // 计算长度
        const line_length = point.sub(startLocation).mag();
        // 计算已画长度
        this._cur_length += line_length;
        // 指定碰撞体在相交点的表面的法线单位向量。
        const vector_n = result.normal;
        // 入射单位向量
        const vector_i = vector_dir;
        // 反射单位向量
        const vector_r = vector_i.sub(vector_n.mul(2 * vector_i.dot(vector_n)));
        // 接着计算下一段
        this.drawRayCast(point, vector_r);
    } else {
        // 画剩余线段
        this.drawAimLine(startLocation, endLocation);
    }
}

如何画瞄准线小圈圈？通过结束位置和起始位置计算数量和间隔向量，画出一个个小圆圈。参考代码如下。

/**
 * @description 画瞄准线
 * @param startLocation 起始位置 世界坐标系
 * @param endLocation 结束位置 世界坐标系
 */
private drawAimLine(startLocation: cc.Vec2, endLocation: cc.Vec2) {
    // 转换坐标
    const graphic_startLocation = this.graphic_line.node.convertToNodeSpaceAR(startLocation);
    this.graphic_line.moveTo(graphic_startLocation.x, graphic_startLocation.y);
    // 画小圆圆
    // 间隔
    const delta = 20;
    // 方向
    const vector_dir = endLocation.sub(startLocation);
    // 数量
    const total_count = Math.round(vector_dir.mag() / delta);
    // 每次间隔向量
    vector_dir.normalizeSelf().mulSelf(delta);
    for (let index = 0; index < total_count; index++) {
        graphic_startLocation.addSelf(vector_dir)
        this.graphic_line.circle(graphic_startLocation.x, graphic_startLocation.y, 2);
    }
}

---

完整代码

---