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

最近有小伙伴问我瞄准线遇到各种形状该怎么处理？如何实现反复横跳的瞄准线？最近刚好在《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);}
}

完整代码

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

奥义蛇皮走位之反复横跳（一）
今天让我们来学习一下奥义--反复横跳 ....额不,是奥义--反复循环 "愚公移山"之 while 循环问:愚公移山,要移到什么时候? 答:只要山还在 ...
LeetCode 周赛 334，在算法的世界里反复横跳
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 今天是 LeetCode 第 334 场周赛,你参加了吗?这场周赛考察范围比较基础,整体 ...
creator 反复横跳瞄准线的实现
1.效果 2.原理对有反射功能的物体添加物理引擎的刚体与碰撞器,利用射线检查路线上面是否有对应的碰撞物体.有就对当前碰撞点.进行向量加法与点乘计算(具体计算公式请面向百度或者查看代码)来得到反射的向 ...
中兴捧月比特派E题——反复横跳
题目描述牛牛在位置s,牛妹在位置t,初始时op=1,step=1,牛牛每次可以执行以下操作之一: 1.跳:牛牛从当前所在位置x跳到x=x+op*step,随后op=op∗−1,step=step∗2 ...
奥义蛇皮走位之反复横跳（二）
循环嵌套之暴力破解密码 //首先写一个登录程序 #include <iostream> #include <Windows.h> #include <string> ...
学习笔记——GEE\USGS\地理空间数据云\ENVI反复横跳的心酸过程
整个问题实际上是在用GEE做无监督分类时,发现影像拼接色彩差距较大.出现明显拼接缝的问题,在尝试了网上已有的直方图匹配算法之后效果不佳且经常溢出,所以回归本心用ENVI去校正,试图获得色彩统一的整个影 ...
抛物线的瞄准线的绘制！ Cocos Creator!
给平抛高抛发射添加一个瞄准线!文章底部附完整代码! 效果预览在如何实现高抛平抛发射?从抛物线说起! 中介绍了物体平抛或高抛发射的一种实现.这次我们为它添加一个瞄准线. 需求分析已知物体初速度v, ...
能力一般，却可以大厂随便横跳？强在哪里？
职场需要的能力有很多种,面试能力往往就是高薪offer的敲门砖.很多人明明技术很强,但总是在面试中谈不下来一个好薪水,或者是拿不到心仪公司的offer,很可能就是面试能力不够. 最近看到这样一条职言, ...
第二个五年，左右横跳到P8年薪100w
原创不易,求分享.求一键三连之前写了一篇个人经历介绍: 34岁回顾人生,也怕中年危机! 有人觉得很有帮助,有人觉得很啰嗦,但更多的是吐槽「太长了」,尼玛读完需要一个小时,谁还愿意读? 所以这里特意将 ...
11.Unity2D 横版简单AI 之背后受击转身+寻路跟随敌人+模块化+射线检测
总目录https://blog.csdn.net/qq_54263076/category_11900070.html?spm=1001.2014.3001.5482 1.敌人背后受击转身+背部攻击伤 ...

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

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

最新文章

热门文章