Character animation

In this final lesson, we’ll use Godot’s built-in animation tools to make our characters float and flap. You’ll learn to design animations in the editor and use code to make your game feel alive.

image0

We’ll start with an introduction to using the animation editor.

Using the animation editor

The engine comes with tools to author animations in the editor. You can then use the code to play and control them at runtime.

Open the player scene, select the player node, and add an AnimationPlayer node.

The Animation dock appears in the bottom panel.

image1

It features a toolbar and the animation drop-down menu at the top, a track editor in the middle that’s currently empty, and filter, snap, and zoom options at the bottom.

Let’s create an animation. Click on Animation -> New.

image2

Name the animation “float”.

image3

Once you created the animation, the timeline appears with numbers representing time in seconds.

image4

We want the animation to start playback automatically at the start of the game. Also, it should loop.

To do so, you can click the button with an “A+” icon in the animation toolbar and the looping arrows, respectively.

image5

You can also pin the animation editor by clicking the pin icon in the top-right. This prevents it from folding when you click on the viewport and deselect the nodes.

image6

Set the animation duration to 1.2 seconds in the top-right of the dock.

image7

You should see the gray ribbon widen a bit. It shows you the start and end of your animation and the vertical blue line is your time cursor.

image8

You can click and drag the slider in the bottom-right to zoom in and out of the timeline.

image9

The float animation

With the animation player node, you can animate most properties on as many nodes as you need. Notice the key icon next to properties in the Inspector. You can click any of them to create a keyframe, a time and value pair for the corresponding property. The keyframe gets inserted where your time cursor is in the timeline.

Let’s insert our first keys. Here, we will animate both the translation and the rotation of the Character node.

Select the Character and click the key icon next to Translation in the Inspector. Do the same for Rotation Degrees.

image10

Two tracks appear in the editor with a diamond icon representing each keyframe.

image11

You can click and drag on the diamonds to move them in time. Move the translation key to 0.2 seconds and the rotation key to 0.1 seconds.

image12

Move the time cursor to 0.5 seconds by clicking and dragging on the gray timeline. In the Inspector, set the Translation‘s Y axis to about 0.65 meters and the Rotation Degrees‘ X axis to 8.

image13

Create a keyframe for both properties and shift the translation key to 0.7 seconds by dragging it on the timeline.

image14

Note

A lecture on the principles of animation is beyond the scope of this tutorial. Just note that you don’t want to time and space everything evenly. Instead, animators play with timing and spacing, two core animation principles. You want to offset and contrast in your character’s motion to make them feel alive.

Move the time cursor to the end of the animation, at 1.2 seconds. Set the Y translation to about 0.35 and the X rotation to -9 degrees. Once again, create a key for both properties.

You can preview the result by clicking the play button or pressing Shift + D. Click the stop button or press S to stop playback.

image15

You can see that the engine interpolates between your keyframes to produce a continuous animation. At the moment, though, the motion feels very robotic. This is because the default interpolation is linear, causing constant transitions, unlike how living things move in the real world.

We can control the transition between keyframes using easing curves.

Click and drag around the first two keys in the timeline to box select them.

image16

You can edit the properties of both keys simultaneously in the Inspector, where you can see an Easing property.

image17

Click and drag on the curve, pulling it towards the left. This will make it ease-out, that is to say, transition fast initially and slow down as the time cursor reaches the next keyframe.

image18

Play the animation again to see the difference. The first half should already feel a bit bouncier.

Apply an ease-out to the second keyframe in the rotation track.

image19

Do the opposite for the second translation keyframe, dragging it to the right.

image20

Your animation should look something like this.

image21

Note

Animations update the properties of the animated nodes every frame, overriding initial values. If we directly animated the Player node, it would prevent us from moving it in code. This is where the Pivot node comes in handy: even though we animated the Character, we can still move and rotate the Pivot and layer changes on top of the animation in a script.

If you play the game, the player’s creature will now float!

If the creature is a little too close to the floor, you can move the Pivot up to offset it.

Controlling the animation in code

We can use code to control the animation playback based on the player’s input. Let’s change the animation speed when the character is moving.

Open the Player‘s script by clicking the script icon next to it.

image22

In _physics_process(), after the line where we check the direction vector, add the following code.

GDScript   C#

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

This code makes it so when the player moves, we multiply the playback speed by 4. When they stop, we reset it to normal.

We mentioned that the pivot could layer transforms on top of the animation. We can make the character arc when jumping using the following line of code. Add it at the end of _physics_process().

GDScript   C#

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

Animating the mobs

Here’s another nice trick with animations in Godot: as long as you use a similar node structure, you can copy them to different scenes.

For example, both the Mob and the Player scenes have a Pivot and a Character node, so we can reuse animations between them.

Open the Player scene, select the animation player node and open the “float” animation. Next, click on Animation > Copy. Then open Mob.tscn and open its animation player. Click Animation > Paste. That’s it; all monsters will now play the float animation.

We can change the playback speed based on the creature’s random_speed. Open the Mob‘s script and at the end of the initialize() function, add the following line.

GDScript   C#

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

And with that, you finished coding your first complete 3D game.

Congratulations!

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.

Here’s the Player script.

GDScript   C#

  1. extends KinematicBody
  3. # Emitted when the player was hit by a mob.
  4. signal hit
  6. # How fast the player moves in meters per second.
  7. export var speed = 14
  8. # The downward acceleration when in the air, in meters per second per second.
  9. export var fall_acceleration = 75
  10. # Vertical impulse applied to the character upon jumping in meters per second.
  11. export var jump_impulse = 20
  12. # Vertical impulse applied to the character upon bouncing over a mob in meters per second.
  13. export var bounce_impulse = 16
  15. var velocity = Vector3.ZERO
  18. func _physics_process(delta):
  19.     var direction = Vector3.ZERO
  21.     if Input.is_action_pressed("move_right"):
  22.         direction.x += 1
  23.     if Input.is_action_pressed("move_left"):
  24.         direction.x -= 1
  25.     if Input.is_action_pressed("move_back"):
  26.         direction.z += 1
  27.     if Input.is_action_pressed("move_forward"):
  28.         direction.z -= 1
  30.     if direction != Vector3.ZERO:
  31.         direction = direction.normalized()
  32.         $Pivot.look_at(translation + direction, Vector3.UP)
  33.         $AnimationPlayer.playback_speed = 4
  34.     else:
  35.         $AnimationPlayer.playback_speed = 1
  37.     velocity.x = direction.x * speed
  38.     velocity.z = direction.z * speed
  40.     # Jumping
  41.     if is_on_floor() and Input.is_action_just_pressed("jump"):
  42.         velocity.y += jump_impulse
  44.     velocity.y -= fall_acceleration * delta
  45.     velocity = move_and_slide(velocity, Vector3.UP)
  47.     for index in range(get_slide_count()):
  48.         var collision = get_slide_collision(index)
  49.         if collision.collider.is_in_group("mob"):
  50.             var mob = collision.collider
  51.             if Vector3.UP.dot(collision.normal) > 0.1:
  52.                 mob.squash()
  53.                 velocity.y = bounce_impulse
  55.     $Pivot.rotation.x = PI / 6 * velocity.y / jump_impulse
  58. func die():
  59.     emit_signal("hit")
  60.     queue_free()
  63. func _on_MobDetector_body_entered(_body):
  64.     die()
  1. public class Player : KinematicBody
  2. {
  3.     // Emitted when the player was hit by a mob.
  4.     [Signal]
  5.     public delegate void Hit();
  7.     // How fast the player moves in meters per second.
  8.     [Export]
  9.     public int Speed = 14;
  10.     // The downward acceleration when in the air, in meters per second squared.
  11.     [Export]
  12.     public int FallAcceleration = 75;
  13.     // Vertical impulse applied to the character upon jumping in meters per second.
  14.     [Export]
  15.     public int JumpImpulse = 20;
  16.     // Vertical impulse applied to the character upon bouncing over a mob in meters per second.
  17.     [Export]
  18.     public int BounceImpulse = 16;
  20.     private Vector3 _velocity = Vector3.Zero;
  22.     public override void _PhysicsProcess(float delta)
  23.     {
  24.         var direction = Vector3.Zero;
  26.         if (Input.IsActionPressed("move_right"))
  27.         {
  28.             direction.x += 1f;
  29.         }
  30.         if (Input.IsActionPressed("move_left"))
  31.         {
  32.             direction.x -= 1f;
  33.         }
  34.         if (Input.IsActionPressed("move_back"))
  35.         {
  36.             direction.z += 1f;
  37.         }
  38.         if (Input.IsActionPressed("move_forward"))
  39.         {
  40.             direction.z -= 1f;
  41.         }
  43.         if (direction != Vector3.Zero)
  44.         {
  45.             direction = direction.Normalized();
  46.             GetNode<Spatial>("Pivot").LookAt(Translation + direction, Vector3.Up);
  47.             GetNode<AnimationPlayer>("AnimationPlayer").PlaybackSpeed = 4;
  48.         }
  49.         else
  50.         {
  51.             GetNode<AnimationPlayer>("AnimationPlayer").PlaybackSpeed = 1;
  52.         }
  54.         _velocity.x = direction.x * Speed;
  55.         _velocity.z = direction.z * Speed;
  57.         // Jumping.
  58.         if (IsOnFloor() && Input.IsActionJustPressed("jump"))
  59.         {
  60.             _velocity.y += JumpImpulse;
  61.         }
  63.         _velocity.y -= FallAcceleration * delta;
  64.         _velocity = MoveAndSlide(_velocity, Vector3.Up);
  66.         for (int index = 0; index < GetSlideCount(); index++)
  67.         {
  68.             KinematicCollision collision = GetSlideCollision(index);
  69.             if (collision.Collider is Mob mob && mob.IsInGroup("mob"))
  70.             {
  71.                 if (Vector3.Up.Dot(collision.Normal) > 0.1f)
  72.                 {
  73.                     mob.Squash();
  74.                     _velocity.y = BounceImpulse;
  75.                 }
  76.             }
  77.         }
  79.         var pivot = GetNode<Spatial>("Pivot");
  80.         pivot.Rotation = new Vector3(Mathf.Pi / 6f * _velocity.y / JumpImpulse, pivot.Rotation.y, pivot.Rotation.z);
  81.     }
  83.     private void Die()
  84.     {
  85.         EmitSignal(nameof(Hit));
  86.         QueueFree();
  87.     }
  89.     public void OnMobDetectorBodyEntered(Node body)
  90.     {
  91.         Die();
  92.     }
  93. }

And the Mob‘s script.

GDScript   C#

  1. extends KinematicBody
  3. # Emitted when the player jumped on the mob.
  4. signal squashed
  6. # Minimum speed of the mob in meters per second.
  7. export var min_speed = 10
  8. # Maximum speed of the mob in meters per second.
  9. export var max_speed = 18
  11. var velocity = Vector3.ZERO
  14. func _physics_process(_delta):
  15.     move_and_slide(velocity)
  18. func initialize(start_position, player_position):
  19.     look_at_from_position(start_position, player_position, Vector3.UP)
  20.     rotate_y(rand_range(-PI / 4, PI / 4))
  22.     var random_speed = rand_range(min_speed, max_speed)
  23.     velocity = Vector3.FORWARD * random_speed
  24.     velocity = velocity.rotated(Vector3.UP, rotation.y)
  26.     $AnimationPlayer.playback_speed = random_speed / min_speed
  29.  func squash():
  30.     emit_signal("squashed")
  31.     queue_free()
  34. func _on_VisibilityNotifier_screen_exited():
  35.     queue_free()
  1. public class Mob : KinematicBody
  2. {
  3.     // Emitted when the played jumped on the mob.
  4.     [Signal]
  5.     public delegate void Squashed();
  7.     // Minimum speed of the mob in meters per second
  8.     [Export]
  9.     public int MinSpeed = 10;
  10.     // Maximum speed of the mob in meters per second
  11.     [Export]
  12.     public int MaxSpeed = 18;
  14.     private Vector3 _velocity = Vector3.Zero;
  16.     public override void _PhysicsProcess(float delta)
  17.     {
  18.         MoveAndSlide(_velocity);
  19.     }
  21.     public void Initialize(Vector3 startPosition, Vector3 playerPosition)
  22.     {
  23.         LookAtFromPosition(startPosition, playerPosition, Vector3.Up);
  24.         RotateY((float)GD.RandRange(-Mathf.Pi / 4.0, Mathf.Pi / 4.0));
  26.         float randomSpeed = (float)GD.RandRange(MinSpeed, MaxSpeed);
  27.         _velocity = Vector3.Forward * randomSpeed;
  28.         _velocity = _velocity.Rotated(Vector3.Up, Rotation.y);
  30.         GetNode<AnimationPlayer>("AnimationPlayer").PlaybackSpeed = randomSpeed / MinSpeed;
  31.     }
  33.     public void Squash()
  34.     {
  35.         EmitSignal(nameof(Squashed));
  36.         QueueFree();
  37.     }
  39.     public void OnVisibilityNotifierScreenExited()
  40.     {
  41.         QueueFree();
  42.     }
  43. }