在Godot中制作杀戮尖塔的箭头

indienova2018-10-09

来源：indienova

原地址：https://www.indienova.com/indie-game-development/making-slay-the-spire-arrow-with-godot/

杀戮尖塔的卡牌箭头

杀戮尖塔里面使用卡牌时的箭头是这样的：

贝塞尔曲线

箭头的形态非常符合贝塞尔曲线。

PS 中的钢笔工具就是用的贝塞尔曲线：

如图，一条贝塞尔曲线需要用四个点来确定，一个起点，一个终点，加上两个控制点。

我们把四个点分别命名：起点（startPos），终点（endPos），控制点 A（ctrlAPos），控制点 B（ctrlBPos）

贝塞尔曲线的公式是：

position = startPos*(1-t)*(1-t)*(1-t)
+ 3*ctrlAPos*t*(1-t)*(1-t)
+ 3*ctrlBPos*t*t*(1-t)
+ endPos*t*t*t

复制代码

四个点都确定后，公式里的 t 就是唯一的变量，t 是指从起点到终点的百分比，取值是 0~1。

比如 0 代表曲线起点，0.2 代表曲线从起点开始 20% 的位置，0.5 代表曲线中间位置，1 代表曲线终点。

公式的计算结果 position 就是当前 t 值所对应的曲线上的点。

不过在游戏中我们是使用两个点来确定曲线的，卡牌所在位置是曲线的起点，鼠标所在位置是曲线的终点。

那么两个控制点就要根据起点和终点来进行计算。

杀戮尖塔里的曲线大致是这样：

我们可以大致的写出控制点的计算公式:

ctrlAPos.x = startPos.x + (startPos.x - endPos.x) * 0.2
ctrlAPos.y = endPos.y - (endPos.y - startPos.y) * 0.2
ctrlBPos.x = startPos.x - (startPos.x - endPos.x) * 0.2
ctrlBPos.y = endPos.y + (endPos.y - startPos.y) * 0.2

复制代码

当然这个计算公式可以自己微调，使曲线更符合自己想要的形态

Godot 中的实现

理解了曲线的原理，现在开始在 godot 中实现。

我画了两个箭头，箭头 1 和箭头 2，如图。

在 godot 中新建一个场景，新建 Node2D，命名为贝塞尔箭头。添加脚本。

开始写脚本。首先我们的箭头有20节，我们需要在初始化的时候准备好。

之后更新箭头时重新排好每一节就能形成一条曲线。

extends Node2D
var list=[] #数组，用来保存20节小箭头
func _ready():
#生成19节尾巴小箭头，用箭头1的图片
for i in range(19):
var sprite=Sprite.new() #新建 Sprite 节点
add_child(sprite) #添加到场景里
list.append(sprite) #添加到数组里
sprite.texture=load("res://Sprites/箭头1.png") #把图片换成箭头1
sprite.scale=Vector2(1,1)*(0.2+float(i)/18*0.8) #改变缩放，根据杀戮尖塔，箭头是一节节越来越大的
sprite.offset=Vector2(-25,0) #由于我画的图片中心点在箭头中间，
#这里改变一下图片偏移，把图片中心点移动到箭头头部
#最后生成终点的箭头，用箭头2的图片
var sprite=Sprite.new()
add_child(sprite)
list.append(sprite)
sprite.texture=load("res://Sprites/箭头2.png")
sprite.offset=Vector2(-25,0)

复制代码

然后我们需要一个函数来设置箭头的起点和终点

func reset(startPos,endPos):
#根据传入的起点和终点来计算两个控制点
var ctrlAPos=Vector2()
var ctrlBPos=Vector2()
ctrlAPos.x=startPos.x+(startPos.x-endPos.x)*0.1 #这里我把参数做了微调，感觉这样更加符合杀戮尖塔的效果
ctrlAPos.y=endPos.y-(endPos.y-startPos.y)*0.2
ctrlBPos.y=endPos.y+(endPos.y-startPos.y)*0.3
ctrlBPos.x=startPos.x-(startPos.x-endPos.x)*0.3
#根据贝塞尔曲线重新设置所有小箭头的位置
for i in range(20):
var t=float(i)/19
var pos=startPos*(1-t)*(1-t)*(1-t)+3*ctrlAPos*t*(1-t)*(1-t)+3*ctrlBPos*t*t*(1-t)+endPos*t*t*t
list[i].position=pos
#虽然更改了箭头的位置，不过还需要重新计算箭头的方向
updateAngle() #重新计算所有箭头的方向