1 准备精灵图

如果素材精灵图是上节那种没对齐的,那就需要自己手动处理,见站内文章//TODO使用aseprite处理不规则精灵图,处理好的精灵图如下

Player

替换之前的player.png

2 制作奔跑和休息动画

使用AnimationPlayer节点制作4个方向的奔跑和休息动画,效果展示:

动画

体会一下加载后自动播放和循环播放这两个功能,后面会用到

image-20240531033514786

3 脚本逻辑

  • 首先,得在初始化好之后才能访问AnimationPlayer节点,使用@onready
1
@onready var animation_player: AnimationPlayer = $AnimationPlayer
  • 移动的时候播放RunXXX动画,否则播放IdleXXX动画

    使用play方法播放动画

1
2
3
4
5
if input_vector != Vector2.ZERO:
animation_player.play("RunRight")
......
else :
animation_player.play("IdleRight")

动画

  • 再结合方向
1
2
3
4
5
6
7
8
9
10
11
if input_vector != Vector2.ZERO:
if input_vector.x >0:
animation_player.play("RunRight")
else :
animation_player.play("RunLeft")

......

else :
animation_player.play("IdleRight")
......

这样的写法比较笨,不好应对多方向的动画,将在下节改用动画树来实现

4 完成

目前效果

动画