学习视频:https://player.bilibili.com/player.html?bvid=BV1NC4y1q7bZ&autoplay=0
资源下载:https://cupnooble.itch.io/sprout-lands-asset-pack
一、基础节点结构(场景树)
- 根节点 :
CharacterBody2D(重命名为PlayerCat) - 子节点 :
- Sprite2D:用于显示角色精灵图(spritesheet)。
- CollisionShape2D:添加矩形碰撞形状,调整大小以匹配精灵。
- AnimationPlayer:创建和管理动画片段。
- AnimationTree:用于控制动画状态和混合。
二、Sprite2D 和动画基础
- 导入纹理 :将精灵图(如
basic_character_sprites.png)拖入 Sprite2D 的texture属性。 - 设置像素风格 :在
项目设置 > 渲染 > 纹理中将默认纹理过滤器设为nearest,使像素清晰。 - 切分精灵图 :根据精灵图网格(如 4x4)设置
Hframes和Vframes。 - 创建动画 :在
AnimationPlayer中为每个方向(上、下、左、右)创建idle和walk动画片段,通过关键帧设置frame属性。

三、Animation Tree 详细配置
1. 添加节点
- 将
AnimationPlayer和AnimationTree添加为CharacterBody2D的子节点。 - 在
AnimationTree的Animation Player属性中,指定刚才添加的AnimationPlayer。
2. 设置状态机
- 在
AnimationTree中,选择Tree Root为AnimationNodeStateMachine。 - 创建两个
BlendSpace2D节点,分别命名为idle和walk。 - 连接节点:
start→idle,idle↔walk(双向过渡)。

3. 配置 BlendSpace2D
idle** BlendSpace**:- 添加四个动画:
idle_down、idle_up、idle_left、idle_right。 - 设置它们在二维空间中的位置(基于输入方向向量):
idle_down:(0, 1.1)idle_up:(0, -1.1)idle_left:(-1, 0)idle_right:(1, 0)
- 重要 :将
Blend Mode设为Discrete(立即切换,非插值),适合像素动画。
- 添加四个动画:

walk** BlendSpace**:- 类似地添加
walk_down、walk_up、walk_left、walk_right动画。 - 设置同样的位置坐标(如
walk_down在(0, 1.1))。 - 同样将
Blend Mode设为Discrete。
- 类似地添加
4. 激活 AnimationTree
- 在
AnimationTree属性中,将Active勾选上。 - 在
Parameters中,可以手动设置idle/blend_position的默认值(如(0, 0.5)使角色初始面朝下)。
四、脚本中的动画控制
1. 获取引用
plain
@onready var animation_tree = $AnimationTree
@onready var state_machine = animation_tree.get("parameters/playback")
2. 更新混合位置(根据输入方向)
在 _physics_process 中,根据输入向量更新 idle 和 walk 的 blend_position:
plain
animation_tree.set("parameters/idle/blend_position", input_direction)
animation_tree.set("parameters/walk/blend_position", input_direction)
3. 状态切换(idle ↔ walk)
根据角色是否移动(速度是否为 Vector2.ZERO)切换状态:
plain
if velocity != Vector2.ZERO:
state_machine.travel("walk")
else:
state_machine.travel("idle")
4. 初始方向设置
可以在 _ready 中设置初始面向方向:
plain
animation_tree.set("parameters/idle/blend_position", Vector2(0, 0.5))
五、最终效果
- 角色会根据移动方向(WASD/方向键输入)自动切换对应的 idle 和 walk 动画。
- 动画过渡平滑(通过
BlendSpace2D混合)。 - 当停止移动时,角色保持最后朝向的 idle 状态。
- 所有动画资源由
AnimationPlayer管理,AnimationTree负责逻辑切换。
核心要点
- AnimationTree 是 Godot 4 中强大的动画状态机工具,适合管理多方向、多状态的角色动画。
- BlendSpace2D 可根据二维向量(如输入方向)混合多个动画。
- Discrete 模式 适合像素动画,避免平滑插值导致的模糊。
- 通过脚本动态更新
blend_position和切换状态,实现流畅的动画响应。
这样配置后,你的 2D 角色就能具备完整的八方向移动动画系统了!
附录
python
extends CharacterBody2D
@export var move_speed : float = 100
@export var starting_direction : Vector2 = Vector2(0, 1)
@onready var animation_tree = $AnimationTree
@onready var state_machine = animation_tree.get("parameters/playback")
func _ready() -> void:
print("parameters/conditions/is_moving",animation_tree.get("parameters/conditions/is_moving"))
update_animation_parameters(starting_direction)
func _physics_process(delta: float) -> void:
var input_direction = Vector2(
Input.get_action_strength('right') - Input.get_action_strength('left'),
Input.get_action_strength('down') - Input.get_action_strength('up')
)
update_animation_parameters(input_direction)
velocity = input_direction.normalized() * move_speed if input_direction != Vector2.ZERO else Vector2.ZERO
move_and_slide()
pass
func update_animation_parameters(move_input: Vector2) -> void:
# 使用 playback 手动旅行到指定状态
if move_input.length() > 0.1:
state_machine.travel("Walk") # 确保这里的字符串和状态机里的状态名完全一致
else:
state_machine.travel("Idle")
# 方向更新保持不变
if move_input.length() > 0.1:
var dir = move_input.normalized()
animation_tree.set("parameters/Idle/blend_position", dir)
animation_tree.set("parameters/Walk/blend_position", dir)