Godot Engine 学习笔记 拖尾效果

拖尾效果

效果图：

材料

Line2D 节点 官方文档3.1版

原理

• 尾巴的拉长

使用 Godot 的 Line2D 节点在每一帧（或一定的间隔）在当前节点所在 position（相对于父节点的position）向 Line2D 的 points 数组添加一个 point ，并将其他按钮加上前一帧的 global_position 与当前帧的 global_position 差值。

• 尾巴的收缩

为 point 添加个数量的限制，超过则移除。

制作

• 首先新建一个场景，并创建一个 Line2D 节点（以 Line2D 为根节点即可）。

• 为 Line2D 节点添加脚本。

extends Line2D

var glo_pos_history = Vector2()

func _ready():
	#初始化历史全局坐标
	glo_pos_history = global_position

func _process(delta):
	#每帧添加一个 point
	add_point(Vector2(0,0))
	#遍历除新增外的其他 point 并加上上一帧全局位置和当前帧全局位置的差值
	for i in range(get_point_count()-1):
		set_point_position(i,get_point_position(i)+glo_pos_history - global_position)
	#限制 point 数量，当达到限制的数量时删除 points 数组中最早创建的 point ，也就是下标为 0 的 point
	#后面的 point 下标会自动前移
	if get_point_count() > 20:
		remove_point(0)
	#更新全局位置历史供下一帧调用
	glo_pos_history = global_position

测试

• 创建一个场景

main 为 Node2D 节点，tails 为之前做的小尾巴场景实例化。

• 为 Sprite 节点添加控制节点移动的脚本

extends Sprite

#移动速度
var move_speed = 3000

func _ready():
	pass # Replace with function body.

func _process(delta):
	var dir = Vector2(0,0)
	if Input.is_action_pressed("ui_up"):
		dir += Vector2(0,-1)
	if Input.is_action_pressed("ui_down"):
		dir += Vector2(0,1)
	if Input.is_action_pressed("ui_left"):
		dir += Vector2(-1,0)
	if Input.is_action_pressed("ui_right"):
		dir += Vector2(1,0)
	
	position += dir.normalized() * delta * move_speed

• Sprite 添加图片纹理， Camera2D 相机的开启

为 Sprite 节点的 Texture 属性添加一张图片， 设置 Camera2D 的 Current 属性开启。

• 运行测试场景

这时按下键盘上的 上下左右 方向键就会出现一条蓝色细长的小尾巴，而且小尾巴还在图片之上。

• 改进①

1. 将 tails 的 Z Index 值设为 -1 使图片位于小尾巴之上。
2. 设置 tails 的 Width 属性为 192 （根据图片大小设置，比如我的图片是 256x256，但去掉透明部分估计只有192x192， 且 Sprite 的 scale 为 1,1 为了完全显示 图片我把 Camera2D 节点的 Zoom 属性设为 4,4）
3. 设置 tails 的 Default Color 属性可修改尾巴颜色，如果设置了 Fill 下的 Gradient （渐变）属性，那么 Default Color 则会失效。

• 运行测试场景

现在小尾巴变成大尾巴。

• 改进②

1. 添加纹理：tails 属性 Fill 下的 Texture 添加 ， 同时 Texture Mode 属性设为 Stretch 为纹理拉伸显示。（None 为不使用纹理， Tile 为纹理平铺显示）
2. 添加渐变：tails 属性 Fill 下的 Gradient 添加
3. 更加圆润：tails 属性 Capping 下的 Joint Mode 设为 Round或 Bevel
   Sharp：线的接点是尖的。如果 sharp_limit 大于接点的旋转，则它变为斜面接点。
   Round：线的接点将被斜切/倒角。
   Bevel：线的接点是圆的。
   Joint Mode 为中间部分的接点模式，Begin Cap Mode 与 End Cap Mode 分别为头尾两端的样式模式
   Begin Cap Mode 与 End Cap Mode 的样式选项
   None：无样式
   Box：将线条绘制为框
   Round：将线条绘制为圆形

• 运行测试场景

一条红蓝渐变的小尾巴就完成啦！