角色动画

这是最后一课，我们会使用 Godot 的内置动画工具制作角色的浮动和拍打动画。你会学到如何在编辑器中设计动画，以及如何使用代码让游戏变得活灵活现。

image0

我们将会开始介绍动画编辑器的使用。

动画编辑器的使用

该引擎自带的工具可以在编辑器中编写动画。然后你可以在运行时使用代码来播放和控制它们。

打开玩家场景，选中 Player 节点，然后添加一个 AnimationPlayer 节点。

动画停靠面板就会出现在底部面板中。

image1

它的特点是顶部有一个工具栏和动画下拉菜单，中间有一个轨道编辑器，目前是空的，底部有过滤、捕捉和缩放选项。

让我们来创建一个动画。请点击动画 -> 新建。

image2

将动画命名为“float”（漂浮）。

image3

创建动画后，将显示时间轴，其中数字表示以秒为单位的时间。

image4

我们希望让这个动画在游戏开始时自动开始播放，而且还应该循环播放。

要执行此操作，你可以单击动画工具栏上的自动播放按钮（自动播放）和循环箭头。

image5

你还可以单击右上角的图钉图标，将动画编辑器进行固定。这样它就不会在你点击视口取消选择节点时折叠。

image6

在面板右上角将动画的时长设为 1.2 秒。

image7

你应该看到灰色带子变宽了一点。它显示动画的开始和结束，垂直蓝线是你的时间光标。

image8

单击并拖拽右下角的滑动条，即可将时间线进行缩放。

image9

漂浮动画

使用动画播放器节点，你可以对所需任意数量的节点的大多数属性做动画。请注意检查器中属性旁的钥匙图标。在上面单击就可以创建一个关键帧，即对应属性的一对时间与值。关键帧会被插入到时间线上的时间光标处。

让我们来开始插入帧吧。这里，我们要为 Character 节点的位置（position）和旋转（rotation）做动画。

选中 Character 并在检查器中展开 Transform 栏。单击 Position 和 Rotation 旁的钥匙图标。

image10

../../_images/curves.webp

对于本教程，我们只创建默认选择 RESET（重置）轨道

编辑器中会出现两个轨道，各有一个代表关键帧的菱形图标。

image11

你可以在菱形滑块上单击并拖动，以移动它们的时间。将位置（position ）帧移动到 0.3 秒处，将旋转（rotation ）帧移动到 0.1 秒处。

image12

在灰色的时间线上单击并拖拽，将时间光标移动至 0.5 秒位置。

timeline_05_click

在 检查器 中，将 Position 的 Y 轴设置为 0.65 米，将 Rotation 的 X 轴设置为 8 。

如果你在检查器面板中没有看到属性，请在场景面板中再次点击 Character 节点。

image13

为这两个属性分别创建一个关键帧

second_keys_both

现在开始在时间线上拖动，将位置（position）的关键帧移动到 0.7 秒。

image14

备注

关于动画原理的讲解已经超出了本教程的范围。请注意，你不想均匀地分配时间和空间。取而代之的是，动画师使用时间和间隔，这两个核心动画原则。你希望让它们存在一定的偏移，在角色的运动中产生对比，以使他们感觉生动。

将时间光标移动到动画结尾，即 1.2 秒。将 Y 平移量设为约 0.35、X 旋转量设为 -9 度。再次为这两个属性添加帧。

animation_final_keyframes

单击播放按钮或者按 Shift + D 即可预览结果。单击停止按钮或者按 S 即可停止播放。

image15

你可以看到引擎通过在关键帧之间插值来生成连续动画。不过目前，生成的动作非常机械。这是因为默认的插值是线性的，会导致持续的过渡，并且与现实世界中生物的移动方式不同。

我们可以使用缓动曲线来控制关键帧之间的过渡。

单击并拖拽，框选时间线上的前两个帧。

image16

可以在检查器中同时编辑这两个帧的属性，其中就有一个属性叫做 Easing（缓动）。

image17

单击并拖动曲线，把它往左拉。这样就会让他实现缓出，也就是说，一开始变得快，然后时间光标越接近下一个关键帧就变得越慢。

image18

再次播放动画以查看差异。前半部分应该已经感觉有点弹性了。

将缓动效果应用于旋转轨迹中的第二个关键帧。

image19

对第二个平移关键帧执行相反操作，将其拖动到右侧。

image20

你的动画应该类似这样。

image21

备注

每一帧，动画都会去更新被动画的节点的属性，覆盖掉初始值。如果我们直接对 Player 节点做动画，就没法使用代码来移动它了。这就是 Pivot 节点的用处：尽管我们为 Character 做了动画，我们还是可以在此动画之上，再通过代码来移动并旋转 Pivot。

如果你运行游戏，玩家的生物就会漂浮起来！

如果这个生物离地面太近了，你可以将 Pivot 向上移动，达成偏移的目的。

使用代码控制动画

我们可以使用代码来根据玩家的输入控制动画的播放。让我们在角色移动时修改动画的速度吧。

点击 Player 旁的脚本图标打开其脚本。

image22

在 _physics_process() 中检查 direction 向量的那一行之后添加如下代码。

GDScriptC#

  1. func _physics_process(delta):
  2.     #...
  3.     if direction != Vector3.ZERO:
  4.         #...
  5.         $AnimationPlayer.speed_scale = 4
  6.     else:
  7.         $AnimationPlayer.speed_scale = 1
  1. public override void _PhysicsProcess(double delta)
  2. {
  3.     // ...
  4.     if (direction != Vector3.Zero)
  5.     {
  6.         // ...
  7.         GetNode<AnimationPlayer>("AnimationPlayer").SpeedScale = 4;
  8.     }
  9.     else
  10.     {
  11.         GetNode<AnimationPlayer>("AnimationPlayer").SpeedScale = 1;
  12.     }
  13. }

这段代码的作用是让玩家在移动时将播放速度乘以 4。在停止移动时将其恢复原状。

我们提到 Pivot（轴心）可以在动画之上叠加变换。我们可以用下面这行代码使角色在跳跃时产生弧线。把它加在 _physics_process() 的最后。

GDScriptC#

  1. func _physics_process(delta):
  2.     #...
  3.     $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse
  1. public override void _PhysicsProcess(double delta)
  2. {
  3.     // ...
  4.     var pivot = GetNode<Node3D>("Pivot");
  5.     pivot.Rotation = new Vector3(Mathf.Pi / 6.0f * Velocity.Y / JumpImpulse, pivot.Rotation.Y, pivot.Rotation.Z);
  6. }

为小怪制作动画

在 Godot 中还有一个很好的动画技巧：只要你使用类似的节点结构，你就可以把它们复制到不同的场景中。

例如，Mob 和 Player 场景都有 Pivot 和 Character 节点，所以我们可以在它们之间复用动画。

这个应用程序是一个开源项目。要报告bug或者做出贡献，请前往该应用程序的源代码仓库：`GitHub repository`_.

然后打开 mob.tscn ，创建一个 AnimationPlayer 子节点并且选中它。点击 动画 > 管理动画 ，然后 新建库 ，你应该看到信息 “将创建全局库”。文本处留白然后点击OK。点击 粘贴 图标(剪贴板)然后它应当出现在窗口上。点击OK来关闭窗口。

Next, make sure that the autoplay button (自动播放) and the looping arrows (Animation looping) are also turned on in the animation editor in the bottom panel. That’s it; all monsters will now play the float animation.

我们可以根据生物的 random_speed 来更改播放速度。打开 Mob 的脚本，在 initialize() 函数的末尾添加下面这行代码。

GDScriptC#

  1. func initialize(start_position, player_position):
  2.     #...
  3.     $AnimationPlayer.speed_scale = random_speed / min_speed
  1. public void Initialize(Vector3 startPosition, Vector3 playerPosition)
  2. {
  3.     // ...
  4.     GetNode<AnimationPlayer>("AnimationPlayer").SpeedScale = randomSpeed / MinSpeed;
  5. }

这样，你就完成了你第一个完整 3D 游戏的编码。

恭喜！

In the next part, we’ll quickly recap what you learned and give you some links to keep learning more. But for now, here are the complete player.gd and mob.gd so you can check your code against them.

这是 Player 脚本。

GDScriptC#

  1. extends CharacterBody3D
  3. signal hit
  5. # How fast the player moves in meters per second.
  6. @export var speed = 14
  7. # The downward acceleration while in the air, in meters per second squared.
  8. @export var fall_acceleration = 75
  9. # Vertical impulse applied to the character upon jumping in meters per second.
  10. @export var jump_impulse = 20
  11. # Vertical impulse applied to the character upon bouncing over a mob
  12. # in meters per second.
  13. @export var bounce_impulse = 16
  15. var target_velocity = Vector3.ZERO
  18. func _physics_process(delta):
  19.     # We create a local variable to store the input direction
  20.     var direction = Vector3.ZERO
  22.     # We check for each move input and update the direction accordingly
  23.     if Input.is_action_pressed("move_right"):
  24.         direction.x = direction.x + 1
  25.     if Input.is_action_pressed("move_left"):
  26.         direction.x = direction.x - 1
  27.     if Input.is_action_pressed("move_back"):
  28.         # Notice how we are working with the vector's x and z axes.
  29.         # In 3D, the XZ plane is the ground plane.
  30.         direction.z = direction.z + 1
  31.     if Input.is_action_pressed("move_forward"):
  32.         direction.z = direction.z - 1
  34.     # Prevent diagonal movement being very fast
  35.     if direction != Vector3.ZERO:
  36.         direction = direction.normalized()
  37.         $Pivot.look_at(position + direction,Vector3.UP)
  38.         $AnimationPlayer.speed_scale = 4
  39.     else:
  40.         $AnimationPlayer.speed_scale = 1
  42.     # Ground Velocity
  43.     target_velocity.x = direction.x * speed
  44.     target_velocity.z = direction.z * speed
  46.     # Vertical Velocity
  47.     if not is_on_floor(): # If in the air, fall towards the floor
  48.         target_velocity.y = target_velocity.y - (fall_acceleration * delta)
  50.     # Jumping.
  51.     if is_on_floor() and Input.is_action_just_pressed("jump"):
  52.         target_velocity.y = jump_impulse
  54.     # Iterate through all collisions that occurred this frame
  55.     # in C this would be for(int i = 0; i < collisions.Count; i++)
  56.     for index in range(get_slide_collision_count()):
  57.         # We get one of the collisions with the player
  58.         var collision = get_slide_collision(index)
  60.         # If the collision is with ground
  61.         if collision.get_collider() == null:
  62.             continue
  64.         # If the collider is with a mob
  65.         if collision.get_collider().is_in_group("mob"):
  66.             var mob = collision.get_collider()
  67.             # we check that we are hitting it from above.
  68.             if Vector3.UP.dot(collision.get_normal()) > 0.1:
  69.                 # If so, we squash it and bounce.
  70.                 mob.squash()
  71.                 target_velocity.y = bounce_impulse
  72.                 # Prevent further duplicate calls.
  73.                 break
  75.     # Moving the Character
  76.     velocity = target_velocity
  77.     move_and_slide()
  79.     $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse
  81. # And this function at the bottom.
  82. func die():
  83.     hit.emit()
  84.     queue_free()
  86. func _on_mob_detector_body_entered(body):
  87.     die()
  1. using Godot;
  3. public partial class Player : CharacterBody3D
  4. {
  5.     // Emitted when the player was hit by a mob.
  6.     [Signal]
  7.     public delegate void HitEventHandler();
  9.     // How fast the player moves in meters per second.
  10.     [Export]
  11.     public int Speed { get; set; } = 14;
  12.     // The downward acceleration when in the air, in meters per second squared.
  13.     [Export]
  14.     public int FallAcceleration { get; set; } = 75;
  15.     // Vertical impulse applied to the character upon jumping in meters per second.
  16.     [Export]
  17.     public int JumpImpulse { get; set; } = 20;
  18.     // Vertical impulse applied to the character upon bouncing over a mob in meters per second.
  19.     [Export]
  20.     public int BounceImpulse { get; set; } = 16;
  22.     private Vector3 _targetVelocity = Vector3.Zero;
  24.     public override void _PhysicsProcess(double delta)
  25.     {
  26.         // We create a local variable to store the input direction.
  27.         var direction = Vector3.Zero;
  29.         // We check for each move input and update the direction accordingly.
  30.         if (Input.IsActionPressed("move_right"))
  31.         {
  32.             direction.X += 1.0f;
  33.         }
  34.         if (Input.IsActionPressed("move_left"))
  35.         {
  36.             direction.X -= 1.0f;
  37.         }
  38.         if (Input.IsActionPressed("move_back"))
  39.         {
  40.             // Notice how we are working with the vector's X and Z axes.
  41.             // In 3D, the XZ plane is the ground plane.
  42.             direction.Z += 1.0f;
  43.         }
  44.         if (Input.IsActionPressed("move_forward"))
  45.         {
  46.             direction.Z -= 1.0f;
  47.         }
  49.         // Prevent diagonal movement being very fast.
  50.         if (direction != Vector3.Zero)
  51.         {
  52.             direction = direction.Normalized();
  53.             GetNode<Node3D>("Pivot").LookAt(Position + direction, Vector3.Up);
  54.             GetNode<AnimationPlayer>("AnimationPlayer").PlaybackSpeed = 4;
  55.         }
  56.         else
  57.         {
  58.             GetNode<AnimationPlayer>("AnimationPlayer").PlaybackSpeed = 1;
  59.         }
  61.         // Ground velocity
  62.         _targetVelocity.X = direction.X * Speed;
  63.         _targetVelocity.Z = direction.Z * Speed;
  65.         // Vertical velocity
  66.         if (!IsOnFloor())
  67.         {
  68.             _targetVelocity.Y -= FallAcceleration * (float)delta;
  69.         }
  71.         // Jumping.
  72.         if (IsOnFloor() && Input.IsActionJustPressed("jump"))
  73.         {
  74.             _targetVelocity.Y += JumpImpulse;
  75.         }
  77.         // Iterate through all collisions that occurred this frame.
  78.         for (int index = 0; index < GetSlideCollisionCount(); index++)
  79.         {
  80.             // We get one of the collisions with the player.
  81.             KinematicCollision3D collision = GetSlideCollision(index);
  83.             // If the collision is with a mob.
  84.             if (collision.GetCollider() is Mob mob)
  85.             {
  86.                 // We check that we are hitting it from above.
  87.                 if (Vector3.Up.Dot(collision.GetNormal()) > 0.1f)
  88.                 {
  89.                     // If so, we squash it and bounce.
  90.                     mob.Squash();
  91.                     _targetVelocity.Y = BounceImpulse;
  92.                     // Prevent further duplicate calls.
  93.                     break;
  94.                 }
  95.             }
  96.         }
  98.         // Moving the character
  99.         Velocity = _targetVelocity;
  100.         MoveAndSlide();
  102.         var pivot = GetNode<Node3D>("Pivot");
  103.         pivot.Rotation = new Vector3(Mathf.Pi / 6.0f * Velocity.Y / JumpImpulse, pivot.Rotation.Y, pivot.Rotation.Z);
  104.     }
  106.     private void Die()
  107.     {
  108.         EmitSignal(SignalName.Hit);
  109.         QueueFree();
  110.     }
  112.     private void OnMobDetectorBodyEntered(Node body)
  113.     {
  114.         Die();
  115.     }
  116. }

这是 Mob 的脚本。

GDScriptC#

  1. extends CharacterBody3D
  3. # Minimum speed of the mob in meters per second.
  4. @export var min_speed = 10
  5. # Maximum speed of the mob in meters per second.
  6. @export var max_speed = 18
  8. # Emitted when the player jumped on the mob
  9. signal squashed
  11. func _physics_process(_delta):
  12.     move_and_slide()
  14. # This function will be called from the Main scene.
  15. func initialize(start_position, player_position):
  16.     # We position the mob by placing it at start_position
  17.     # and rotate it towards player_position, so it looks at the player.
  18.     look_at_from_position(start_position, player_position, Vector3.UP)
  19.     # Rotate this mob randomly within range of -45 and +45 degrees,
  20.     # so that it doesn't move directly towards the player.
  21.     rotate_y(randf_range(-PI / 4, PI / 4))
  23.     # We calculate a random speed (integer)
  24.     var random_speed = randi_range(min_speed, max_speed)
  25.     # We calculate a forward velocity that represents the speed.
  26.     velocity = Vector3.FORWARD * random_speed
  27.     # We then rotate the velocity vector based on the mob's Y rotation
  28.     # in order to move in the direction the mob is looking.
  29.     velocity = velocity.rotated(Vector3.UP, rotation.y)
  31.     $AnimationPlayer.speed_scale = random_speed / min_speed
  33. func _on_visible_on_screen_notifier_3d_screen_exited():
  34.     queue_free()
  36. func squash():
  37.     squashed.emit()
  38.     queue_free() # Destroy this node
  1. using Godot;
  3. public partial class Mob : CharacterBody3D
  4. {
  5.     // Emitted when the played jumped on the mob.
  6.     [Signal]
  7.     public delegate void SquashedEventHandler();
  9.     // Minimum speed of the mob in meters per second
  10.     [Export]
  11.     public int MinSpeed { get; set; } = 10;
  12.     // Maximum speed of the mob in meters per second
  13.     [Export]
  14.     public int MaxSpeed { get; set; } = 18;
  16.     public override void _PhysicsProcess(double delta)
  17.     {
  18.         MoveAndSlide();
  19.     }
  21.     // This function will be called from the Main scene.
  22.     public void Initialize(Vector3 startPosition, Vector3 playerPosition)
  23.     {
  24.         // We position the mob by placing it at startPosition
  25.         // and rotate it towards playerPosition, so it looks at the player.
  26.         LookAtFromPosition(startPosition, playerPosition, Vector3.Up);
  27.         // Rotate this mob randomly within range of -45 and +45 degrees,
  28.         // so that it doesn't move directly towards the player.
  29.         RotateY((float)GD.RandRange(-Mathf.Pi / 4.0, Mathf.Pi / 4.0));
  31.         // We calculate a random speed (integer).
  32.         int randomSpeed = GD.RandRange(MinSpeed, MaxSpeed);
  33.         // We calculate a forward velocity that represents the speed.
  34.         Velocity = Vector3.Forward * randomSpeed;
  35.         // We then rotate the velocity vector based on the mob's Y rotation
  36.         // in order to move in the direction the mob is looking.
  37.         Velocity = Velocity.Rotated(Vector3.Up, Rotation.Y);
  39.         GetNode<AnimationPlayer>("AnimationPlayer").SpeedScale = randomSpeed / MinSpeed;
  40.     }
  42.     public void Squash()
  43.     {
  44.         EmitSignal(SignalName.Squashed);
  45.         QueueFree(); // Destroy this node
  46.     }
  48.     private void OnVisibilityNotifierScreenExited()
  49.     {
  50.         QueueFree();
  51.     }
  52. }