Godot Engine 学习笔记 拖尾效果

拖尾效果

  • 拖尾效果
    • 材料
    • 原理
    • 制作
    • 测试

拖尾效果

效果图:
Godot Engine 学习笔记 拖尾效果_第1张图片

材料

Line2D 节点 官方文档3.1版

原理

  • 尾巴的拉长

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

  • 尾巴的收缩

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

制作

  • 首先新建一个场景,并创建一个 Line2D 节点(以 Line2D 为根节点即可)。

Godot Engine 学习笔记 拖尾效果_第2张图片

  • 为 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

测试

  • 创建一个场景

Godot Engine 学习笔记 拖尾效果_第3张图片
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 属性开启。

Godot Engine 学习笔记 拖尾效果_第4张图片
Godot Engine 学习笔记 拖尾效果_第5张图片

  • 运行测试场景

Godot Engine 学习笔记 拖尾效果_第6张图片
这时按下键盘上的 上下左右 方向键就会出现一条蓝色细长的小尾巴,而且小尾巴还在图片之上。

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

Godot Engine 学习笔记 拖尾效果_第7张图片

  • 运行测试场景

Godot Engine 学习笔记 拖尾效果_第8张图片
现在小尾巴变成大尾巴。

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

Godot Engine 学习笔记 拖尾效果_第9张图片

  • 运行测试场景

Godot Engine 学习笔记 拖尾效果_第10张图片

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

你可能感兴趣的:(Godot,Engine)