🎞️ Lesson 11.1: Frame-Based Sprite Animation

Animation Is a Flipbook

Think of the little flipbook you drew in the corner of a school notebook: a stack of pages, each slightly different, riffled fast enough to look alive. Frame-based 2D animation is exactly that. You have a row of sprite images — say four poses of a character running — and Unity shows them one after another, several times a second, so the character appears to run.

In Lesson 10.2 you sliced a sprite sheet into individual sprites. Those slices are your flipbook pages. Now you'll arrange them on a timeline so they play in order.

Because a clip animates any property, the same Animation window you use here also animates position, colour, or scale. But for classic 2D characters, the star property is the sprite swap.

Creating a Clip from Frames

The fastest way to build a sprite clip is to let Unity do the work — drag the frames in and it creates the clip and the keyframes for you:

1. Select your character GameObject in the scene (it should already have a Sprite Renderer).
2. Open Window ▸ Animation ▸ Animation (shortcut Ctrl+6). With nothing recorded yet, the window shows a Create button.
3. In the Project window, expand your sliced sprite sheet and select the run frames in order (click the first, Shift-click the last).
4. Drag all selected frames onto the Animation window's timeline. Unity asks where to save the new .anim file, then drops each sprite onto the Sprite track as evenly spaced keyframes.

That's it — press the Play button inside the Animation window and your character runs. Unity also auto-creates an Animator Controller and an Animator component on the object the first time you record a clip, exactly like it did in Module 1.

Reading the Animation Window

The Animation window is a timeline editor. Along the top runs a ruler marked in frames and seconds; down the left is the list of animated properties; the little diamonds on each row are keyframes. For a sprite clip you'll see a single Sprite property under the Sprite Renderer, with one keyframe per frame of your animation. Here is our four-frame Run clip, drawn exactly as the window lays it out:

💡 Why a diagram and not a screenshot? As you saw in Module 1, Unity's editor windows are drawn with a technology that doesn't screenshot cleanly, so throughout this course they're rebuilt as precise diagrams from the real setups — every track, keyframe, and value matches what you'll see on screen.

Sample Rate & Looping

The Samples field in the toolbar (Figure 1 shows 12) is the clip's sample rate — how many frames it plays per second. It's the single most important dial for the feel of a 2D animation:

• Low sample rate (6–8) gives a chunky, retro, "choppy on purpose" look — think classic arcade sprites.
• Higher sample rate (12–24) gives smoother motion, but only if you actually have enough frames to fill it.

Sample rate does not add frames; it just changes how quickly Unity steps through the ones you have. Four frames at 12 samples means the run cycle repeats three times a second.

If the Samples field isn't visible, open the Animation window's overflow menu (the three dots, top-right) and enable Show Sample Rate.

Into the Animator State Machine

Here's the payoff, and the thread back to Module 1: a 2D sprite clip is just an Animation Clip, so it lives in an Animator Controller exactly like a 3D clip does. Everything you learned about states, transitions, parameters, and conditions applies unchanged.

Open the controller Unity created (double-click it, or Window ▸ Animation ▸ Animator) and you'll find your Run clip sitting as a state. Add an Idle clip the same way, then wire them up with the identical pattern from Lesson 1.2 — an Idle ⇄ Run pair driven by a Speed float, plus an Any State → Jump transition on a trigger:

Figure 2: The exact same state machine from Module 1 — only now each state plays a sprite clip instead of a 3D clip. The Animator does not know or care whether a clip animates a skinned mesh or a Sprite Renderer.

This is the big idea of the lesson: you don't learn a separate "2D animation system." You reuse the one system Unity has, feeding it sprite clips instead of rigged-mesh clips.

Driving It from Code

The controller reacts to parameters, and your script sets them — using the new Input System (Package Manager ▸ Input System) rather than the legacy Input class. Below, a 2D character reads a move action, feeds its horizontal speed to the Animator, and flips the sprite to face its direction:

using UnityEngine;
using UnityEngine.InputSystem;

[RequireComponent(typeof(Animator), typeof(SpriteRenderer))]
public class Sprite2DAnimDriver : MonoBehaviour
{
    Animator animator;
    SpriteRenderer sprite;

    // cached parameter hashes — faster and typo-proof (see Lesson 1.2)
    static readonly int SpeedHash = Animator.StringToHash("Speed");
    static readonly int JumpHash  = Animator.StringToHash("Jump");

    Vector2 moveInput;

    void Awake()
    {
        animator = GetComponent<Animator>();
        sprite   = GetComponent<SpriteRenderer>();
    }

    // Wired to a "Move" action (Value / Vector2) via PlayerInput or an InputAction
    public void OnMove(InputAction.CallbackContext ctx)
    {
        moveInput = ctx.ReadValue<Vector2>();
    }

    public void OnJump(InputAction.CallbackContext ctx)
    {
        if (ctx.performed)
            animator.SetTrigger(JumpHash);   // fires Any State -> Jump once
    }

    void Update()
    {
        // drives the Idle <-> Run transitions
        animator.SetFloat(SpeedHash, Mathf.Abs(moveInput.x));

        // face the way we're moving by flipping the sprite, not rotating it
        if (moveInput.x > 0.01f) sprite.flipX = false;
        else if (moveInput.x < -0.01f) sprite.flipX = true;
    }
}

Two things worth noticing. First, the parameter names (Speed, Jump) are the same contract with the state machine you learned in Module 1 — the Animator has no idea the clips are 2D. Second, we cache them as hashes with Animator.StringToHash, the exact production pattern promised back in Lesson 1.2.

Hands-on Challenge

Summary

🚀 What's Next?

Drawing every frame by hand is expensive. What if you could pose a single drawing like a puppet — bending an arm, turning a head — instead of redrawing it? That's skeletal 2D animation. In Lesson 11.2: Skeletal 2D Animation you'll rig a sprite with bones in the Sprite Editor's Skinning module and animate it like a marionette.