在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() #重新计算所有箭头的方向

复制代码

接下来我们需要完成 updateAngle()这个函数

思路是二手游戏拍卖每个小箭头根据前一个箭头和自己的位置来计算角度

func updateAngle():
for i in range(20):
if i==0:
list[0].rotation_degrees=270 #第一个小箭头就让他固定朝上好了
else:
var current=list[i] #当前的小箭头
var last=list[i-1] #前一个小箭头
var lenVec=current.position-last.position #两个箭头连线的向量
var a=lenVec.angle() #计算这个向量的角度，这个 angle()返回值是弧度
a=rad2deg(a) #弧度转成角度
current.rotation_degrees=a #更新小箭头的方向

复制代码

效果

我们的贝塞尔箭头就做好了，外界只要调用 reset 方法就能更新箭头，

不需要用的时候可以用 visible = false 把它隐藏掉

我把它放到游戏中看看效果

非常完美！

在Godot中制作杀戮尖塔的箭头相关推荐

使用GDScript(godot)生成仿杀戮尖塔地图
使用GDScript(godot)生成仿杀戮尖塔地图代码如下:需要中文增强版才可以运行 extends Node2Dexport (PackedScene) var Ballvar 被连接数 = { ...
godot中制作3d游戏时，如何实现isometric相机
在Godot中,实现等视投影相机可以通过使用"Isometric"摄像机控制器.可以在场景资源中添加一个新的"Isometric"摄像机,并将其设置为场景的根节 ...
杀戮尖塔(Slay the Spire) mod制作 --- 1
偶然间发现了杀戮尖塔是用java写的(震撼我一分钟),然后秉着试一试java准备尝试杀戮尖塔mod制作. 这篇文章主要是靠知乎上的文章和反编译其他现有的mod摸摸索索凑出来的,主要给有一定基础的人大致 ...
修改jar中的class：杀戮尖塔修改教程
缘起作为一只程序猿,游戏自然是标配.自从入了杀戮尖塔的坑,几年来陆陆续续玩了几百小时.然而steam上的成就至今没刷完,发牌员和各路小怪次次都在针对我.在第nn{n^n}nn次死于通往进阶20的三层 ...
STEAM 97%好评，体验堪比《杀戮尖塔》，为什么玩家说这是2020年上半年最超值的游戏？
当我们感叹<怪物火车>优秀地继承并创新了类<杀戮尖塔>的Roguelike DBG(卡牌构筑游戏,Deck Building Game)玩法时,或许不会想到在短短一个月后,又有 ...
杀戮尖塔是用java_杀戮尖塔修改class文件图文教程杀戮尖塔怎么改class
杀戮尖塔中玩家们可以单独来修改class文件,来在游戏中得到想要的状态.下面给大家带来杀戮尖塔修改class文件图文教程,感兴趣的玩家可以试一下. 杀戮尖塔修改class文件图文教程从网上看到有两种 ...
JAVA启动杀怒尖塔_杀戮尖塔如何修改class 杀戮尖塔修改class文件方法步骤图解
杀戮尖塔如何修改class?相信小伙伴们一定很好奇,修改class文件可以在游戏中得到想要的状态,下面小编为大家带来了杀戮尖塔修改class文件方法步骤图解,感兴趣的小伙伴赶紧跟着小编一起来看看吧. ...
杀戮尖塔有android版本吗,杀戮尖塔安卓版
杀戮尖塔安卓版尚未上线,很多小伙伴都不想错过这款高人气的卡牌游戏,因为它独特的游戏玩法和经典的魔幻场景无一不说明游戏的制作精良,玩过的小伙伴都不想弃玩了,不信你就来试试吧~ (杀戮尖塔目前仅登陆ios ...
【Unity】类杀戮尖塔手牌系统实现（初始卡组、随机抽牌、卡牌绘制）
制作初始卡组在DontDestroyOnLoad 的物体下挂不会被销毁的Global脚本,用于跨场景调用玩家当前手牌制作ScriptableObject类型的卡资源,这样策划可以直接在Unity编 ...

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

在Godot中制作杀戮尖塔的箭头相关推荐

最新文章

热门文章