1

获取代码

感谢「一枚小工」的投稿,关注他的微信公众号,发送【射箭】获取代码

 

2

效果预览

 

Cocos Creator模拟射箭效果 | 附代码_微信公众号

3

操作方法

 

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

 

4

弓箭拉伸效果实现原理

 

弓箭所有内容放置在一个空节点weapon上,控制逻辑挂在weapon上,实现逻辑的控制。 Cocos Creator模拟射箭效果 | 附代码_实现原理_02要注意几个节点的锚点,根据UI需要调整节点的锚点位置,以达到拉伸过程中显示的最佳效果,本demo中怎么设置的,可以参考代码。弓箭由4部分组成:弓、箭、上弦、下弦,如上说明,调整各节点的位置,以达到最佳视觉效果,如上弦的锚点设置成(0.5, 1),下弦的锚点设置成(0, 0.5),这样在旋转的时候,只需要修改弦的旋转角度和修改弦的长度即可,而不必关心弦往哪个方向变化。其他节点的锚点设置类似,弓只需要旋转角度,箭只需要修改水平方向位置。 Cocos Creator模拟射箭效果 | 附代码_旋转角度_03

 

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

 

5

力度控制实现原理

 

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

6

方向控制实现原理

游戏需要,射出方向,由触摸结束点,指向触摸起始点,具体游戏,可以根据需要修改。