引言
哈喽大家好 ，我是亿元程序员。
合集2.0 更新完结已经过去 10 天了，本来想着躺平休息，没想到一躺就 10 天了，小伙伴们差点以为我要停更了。
不约而同地 发来慰问、提供素材和建议：
小伙伴们 太热情了，因为合集 2.0 的效果不怎么好，我都还在想还要不要继续 3.0 ，结果让我有点小感动。
先不管3.0的事，更新还是要更新的。
躺平期间 翻看了小伙伴们的私信和建议，有这么一条：
打开图片一看，吓了一跳：
言归正传 ，本期带大家看看， 如何在Cocos游戏开发中实现“弯”的箭头游戏效果 ，大家记得三键三连。
弯的箭头游戏
笔者 前面介绍过《Cocos游戏开发中的箭头游戏效果》，是关于前阵子很火的箭头游戏：
其实 “弯”的箭头游戏的规则和”直”的是一致的，只是箭头从方方正正的变成了弯弯曲曲的：
那我们在Cocos如何能实现这种弯的箭头效果？
实战前夕
在实战之前 ，可能就有小伙伴跃跃欲试了：
我知道我知道 ，可以先找 美术妹子 聊聊天，然后让她帮我出一堆箭头的图片！然后拖到游戏中就可以了！
话不多说，直接开干，玩得就是真实！
1.下载Cocos
打开 官网，(这么久没来这个地方，发现有了些许变化)，我们直接点击下载：
没想到 又跳回了这里：
再次点击 下载，完成 CocosDashboard 的下载安装。
2.安装编辑器
打开 CocosDashboard ，点击 安装->安装编辑器->选择我们合适引擎版本->这里我们选择3.8.7 ：
3.新建项目
编辑器 安装好之后，我们创建一个名为 arrow_wan 的 2D 空项目：
4.资源准备
找 美术妹子要来一张箭头图片，放到工程 assets 目录下，并且直接放拖到 Canvas 下：
5.效果预览
拖完 之后我们点击预览就可以看到一个弯曲的箭头啦：
但是只是静态展示，箭头游戏还需要点击动起来，下面我们写点代码
6.写代码
新建 一个 Main.ts ，也同样直接拖拽到 Canvas 下:
然后 在脚本开头通过 @property(Node) 绑定我们的图片：
找到 属性检查器中的 Main ，如下图所示将图片和脚本绑定：
想要 让图片动起来，我们只需要一个 tween 动画即可：
7.再次效果预览
**？？？**怎么停下来了？（ 哈哈，把距离算短了，问题不大，我们再点一次就好 ）
可以看出，通过图片的形式，箭头没办法像之前那样“逃逸”，我们要换个方式
弯箭头实战
下面 我们通过 Graphics 画箭头，并且让其像箭头逃逸一样的效果动起来。
1.绘制箭头线
绘制箭头 的方式其实很简单，我们只需要通过 Graphics 的 quadraticCurveTo 绘制二次贝赛尔曲线路径，输入起点、控制点、终点，最后 stroke 一下：
效果如下
2.绘制箭头
上面 可以看到只是一条线，缺少箭头标志，我们只需要通过计算，再画一个三角形即可：
效果如下
3.让箭头动起来
先说下 原理，由于画箭头的时候，我们只有起点、终点和控制点，没办法让箭头沿着轨迹走，于是我们把箭头细化成若干个路径点：
代码如下 ：
想要 箭头动起来，我们需要先加一个点击事件：
其中 判断是否点击到箭头的方法：
在Update 中累加逃出距离，不断重绘：
最后 就可以像贪吃蛇一样，只需要移动箭头的头和尾，即可让箭头移动起来：
4.效果演示
以上就是如何在Cocos游戏开发中实现“弯”的箭头游戏效果的全部内容。
结语
不忘初心，保持更新。
那么 问题来了， 弯的箭头编辑器应该怎么写呢？ ，欢迎评论区讨论一下。
本文 实例工程 可通过 点赞后私信 发送“ 弯箭头 ”获取。
更多 实战完整源码包含编辑器 可以看亿元Cocos小游戏实战合集2.0(已完结)，感谢小伙伴们对创作的支持。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
实不相瞒，想要个 赞 和 爱心 ！请把该文章 分享 给你觉得有需要的其他小伙伴。谢谢！
推荐文章：