Cocos Creator下JavaScript模拟射箭效果，附代码

获取代码

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

 

效果预览

 

操作方法

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

 

弓箭拉伸效果实现原理

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

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

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