MontSoftBartłomiej
← Back to the blog

Godot · video

Master animations — a Godot 4 guide

AnimatedSprite2D and AnimationPlayer in Godot 4: frames, loops, texture swaps, and scripts.

Video tutorial for this article · Open on YouTube ↗

Assets

1. Building an animation with AnimatedSprite2D

When to use it

AnimatedSprite2D is the right node when you already have animation frames as image files and you only want to import them and play them back.

Step by step

  • Add AnimatedSprite2D to the scene
    • Right-click in the node tree, choose Add Child Node, and add AnimatedSprite2D.
  • Add SpriteFrames
    • In the inspector, find Frames, click it, and choose New SpriteFrames.
    • Click the new SpriteFrames resource to open the animation editor.
  • Create the animation
    • In the SpriteFrames editor, add an animation (for example “walk”) and drag the frame files into the animation panel.
    • The files need to be in the File System dock first. Import them into the project if they are not there yet.
  • Configure it
    • Set:
      • FPS (frames per second) — how fast the animation plays.
      • Loop — turn this on if the animation should repeat.
    • To hold a single frame longer, click it and change its duration.
  • Switching animations
    • To move between animations (for example “walk” and “idle”), attach a short script to AnimatedSprite2D:
extends AnimatedSprite2D

func _process(delta):
    if Input.is_action_pressed("ui_right"):
        animation = "walk"
    else:
        animation = "idle"

2. Building an animation with AnimationPlayer

When to use it

AnimationPlayer fits when you do not have ready-made frames — for example when you animate the parts of a character (arms, legs, head) or other objects in the game.

Step by step

  1. Add AnimationPlayer’s parent to the scene
    • Add a node such as Node2D to act as the root of the character.
    • Add child Sprite2D nodes for the parts (body, head, arms).
  2. Place the sprites
    • Drag the right image onto each Sprite2D (the body on one, the arms on others).
    • Position them so the pieces read as one character.
    • For a mirrored piece, such as a second arm, set Scale X to a negative value, for example -1.
  3. Add AnimationPlayer
    • Add an AnimationPlayer node under the root (the Node2D).
  4. Create the animation
    • Select AnimationPlayer and click New in the bottom panel to create an animation (for example “Idle”).
    • Set the length, and turn on looping if it should repeat.
  5. Animate the pieces
    • Select the sprites (body, arms, head) and click the key icon to store their starting position and rotation as a keyframe.
    • Move the time cursor and change position or rotation (a small lift upward is enough). Click the key icon again to store the new frames.
    • Repeat until the motion is smooth — a gentle up-and-down idle, for example.
  6. Play it and loop it
    • Press Play and check that the motion reads.
    • To loop, enable Loop on the animation.

3. Keyframes and motion

Step by step

  1. Create keyframes
    • With the parts you care about selected (arms, body, head), click the key icon, Create, to store the starting position and rotation.
    • Move the time cursor (for example to 1 second) and change the pose, such as raising the arms.
    • Click the key again to store the next keyframes.
  2. Loop the motion
    • In the animation settings, enable Loop so the clip repeats.
    • That is how you get a continuous idle, a character bobbing in place.
  3. Add the other parts
    • A natural animation usually moves more than one piece.
      • Example: the head lifts slightly with the body. Select its Transform and offset it on Y (for example -10).
  4. Preview
    • Click Play and look at the result.

4. Animating a texture change

Step by step

  1. Swap textures during the clip
    • Pick a part, for example the face.
    • At the start of the animation, key the Texture property so the first texture is stored.
    • Move the cursor (for example to 0.2 seconds), assign a new texture, and key it again.
  2. A jump, as an example
    • On a jump animation you can swap the face to a happy or a sad expression, depending on what the moment means.
  3. Restore the texture at the end
    • Add a final keyframe that puts the original texture back, so the character does not stay stuck on the last face.

5. Driving animations from a script

A script on AnimationPlayer

  • Add a script to AnimationPlayer. A minimal version that switches clips:
extends AnimationPlayer

func _process(delta):
    if Input.is_action_just_pressed("ui_jump"):
        play("jump")
    elif Input.is_action_just_pressed("ui_idle"):
        play("idle")

Summary

Rules worth keeping

  1. Keyframes — always store the start and the end values.
  2. Looping — useful for cycles such as Idle.
  3. Resetting state — use a reset animation or a script so a texture does not stay on the wrong frame.
  4. Scripts — you need them to switch clips and to tie animation to the rest of the game.
  5. Experiment — you can animate motion, texture swaps, scale, and plenty of other properties.

Godot’s animation tools cover almost any motion your game needs. Good luck.

← Back to the blog