来源:indienova 原地址:https://www.indienova.com/indie-game-development/making-slay-the-spire-arrow-with-godot/ 杀戮尖塔的卡牌箭头 杀戮尖塔里面使用卡牌时的箭头是这样的: 贝塞尔曲线 箭头的形态非常符合贝塞尔曲线。 PS 中的钢笔工具就是用的贝塞尔曲线: 如图,一条贝塞尔曲线需要用四个点来确定,一个起点,一个终点,加上两个控制点。 我们把四个点分别命名:起点(startPos),终点(endPos),控制点 A(ctrlAPos),控制点 B(ctrlBPos) 贝塞尔曲线的公式是:
四个点都确定后,公式里的 t 就是唯一的变量,t 是指从起点到终点的百分比,取值是 0~1。 比如 0 代表曲线起点,0.2 代表曲线从起点开始 20% 的位置,0.5 代表曲线中间位置,1 代表曲线终点。 公式的计算结果 position 就是当前 t 值所对应的曲线上的点。 不过在游戏中我们是使用两个点来确定曲线的,卡牌所在位置是曲线的起点,鼠标所在位置是曲线的终点。 那么两个控制点就要根据起点和终点来进行计算。 杀戮尖塔里的曲线大致是这样: 我们可以大致的写出控制点的计算公式:
当然这个计算公式可以自己微调,使曲线更符合自己想要的形态 Godot 中的实现 理解了曲线的原理,现在开始在 godot 中实现。 我画了两个箭头,箭头 1 和箭头 2,如图。 在 godot 中新建一个场景,新建 Node2D,命名为贝塞尔箭头。添加脚本。 开始写脚本。首先我们的箭头有20节,我们需要在初始化的时候准备好。 之后更新箭头时重新排好每一节就能形成一条曲线。
然后我们需要一个函数来设置箭头的起点和终点
接下来我们需要完成 updateAngle()这个函数 思路是每个小箭头根据前一个箭头和自己的位置来计算角度
效果 我们的贝塞尔箭头就做好了,外界只要调用 reset 方法就能更新箭头, 不需要用的时候可以用 visible = false 把它隐藏掉 我把它放到游戏中看看效果 非常完美! |