Cocos Creator模拟射箭效果 | 附代码

1

获取代码

关注微信公众号，发送【射箭】获取代码

2

效果预览

3

操作方法

点击屏幕，屏幕出现起始位置标志的圆点，不松开手指，滑动屏幕，控制力度和方向，移动距离越大，弓箭拉伸效果越大，松开以后，箭将沿着结束点到起始点方向射出去。

4

弓箭拉伸效果实现原理

弓箭所有内容放置在一个空节点weapon上，控制逻辑挂在weapon上，实现逻辑的控制。

要注意几个节点的锚点，根据UI需要调整节点的锚点位置，以达到拉伸过程中显示的最佳效果，本demo中怎么设置的，可以参考代码。

弓箭由4部分组成：弓、箭、上弦、下弦，如上说明，调整各节点的位置，以达到最佳视觉效果，如上弦的锚点设置成(0.5, 1)，下弦的锚点设置成(0, 0.5)，这样在旋转的时候，只需要修改弦的旋转角度和修改弦的长度即可，而不必关心弦往哪个方向变化。其他节点的锚点设置类似，弓只需要旋转角度，箭只需要修改水平方向位置。

在获取到力度和方向以后，通过修改箭的位置，上弦和下弦的旋转方向，实现弓箭拉伸的效果，弓箭旋转，直接通过选中武器根节点的方向实现。

5

力度控制实现原理

根据触摸的起始点和结束点，计算两点之间的距离，力度控制逻辑，根据距离的长短，实现力度大小的控制，超过了最大力度，直接使用最大力度。