T1-L11 — Sprite Art & Animation Tutorial

1

Understanding Sprite Sheets

~10 min

+10 XP

▶

Key Vocabulary

Sprite Sheet: A single image containing multiple frames of animation arranged in a grid.
Frame: One single image in an animation sequence (like one photo in a flipbook).
Sprite Editor: Unity's tool for slicing a sprite sheet into individual frames.
Animation Clip: A file that stores the sequence and timing of frames for one animation.
Animator: A component that controls which animation clip plays and when to switch.

1.1

What is a Sprite Sheet? A sprite sheet is ONE big image that contains many small images (frames) arranged in a grid. Think of it like a comic strip — each panel is one moment in time. When played quickly, they create animation!

Why use sprite sheets? Loading one big image is MUCH faster than loading 20 small images. Professional games always use sprite sheets for performance.

1.2

Download a sprite sheet: Your teacher has provided sprite sheets on Google Classroom. Download the character sprite sheet (a PNG file with a grid of character poses).

Free sprite resources: kenney.nl/assets, opengameart.org, itch.io/game-assets/free — all have free 2D sprite sheets you can use.

1.3

Import into Unity:

Create a folder in your Project: Right-click → Create → Folder → name "Sprites"
Drag the PNG file from your Downloads into the Sprites folder
Click on the imported image in the Project window
In the Inspector, change Sprite Mode from "Single" to "Multiple"
Set Pixels Per Unit to match your game (16 for pixel art, 100 for HD)
Click Apply at the bottom of the Inspector

1.4

Slice the Sprite Sheet:

With the sprite selected, click Sprite Editor (button in Inspector)
Click Slice (top-left dropdown)
Type: Grid By Cell Size
Set the pixel size of each frame (e.g. 32x32 for pixel art, 64x64 for larger sprites)
Click Slice — you'll see blue rectangles around each frame
Click Apply (top-right)
Close the Sprite Editor

How to know the cell size? Open the sprite sheet in an image viewer. If the whole image is 256x64 and has 4 frames across, each frame is 64x64.

1.5

Verify the slice: Click the arrow (▸) next to your sprite in the Project window. You should see individual frames listed: spritesheet_0, spritesheet_1, spritesheet_2, etc. These are your animation frames!

✓ Checkpoint: My sprite sheet is imported with Sprite Mode = Multiple, and I can see individual frames when I expand it.

2

Create Your First Animation

~15 min

+10 XP

▶

2.1

Create an Animations folder: In your Project, Right-click → Create → Folder → name "Animations". This keeps things organised.

2.2

Select animation frames: Expand your sprite sheet (click the ▸ arrow). Select the frames you want for your IDLE animation (e.g. the first 4 frames). Hold Shift and click to select multiple frames.

2.3

Drag to Scene: Drag the selected frames into the Scene view (or onto your player object in the Hierarchy). Unity will ask you to save an animation clip. Save it as "Player_Idle" in your Animations folder.

What Unity created: (1) An Animation Clip (.anim) — the frame sequence. (2) An Animator Controller (.controller) — manages which animation plays. (3) An Animator component on your GameObject.

2.4

Press Play! Your sprite should now animate! It loops through the frames automatically. If it's too fast, we'll adjust the speed next.

2.5

Adjust animation speed:

Open the Animation window: Window → Animation → Animation
Select your player in the Hierarchy
You'll see the timeline with keyframes (diamond shapes)
Change Samples (top of Animation window) — lower = slower, higher = faster
Try 12 for a natural feel (12 frames per second)

💡 Pro Tip: 12 FPS is the classic animation standard (Disney used 12-24 FPS). For pixel art games, 8-12 FPS looks great. For smooth modern art, use 15-24 FPS.

✓ Checkpoint: My player has an idle animation playing at a comfortable speed.

3

Multiple Animations & Animator

~15 min

+10 XP

▶

3.1

Create a Run animation: Select the "run" frames from your sprite sheet (different row or section). Drag them onto your player in the Hierarchy (NOT the Scene). Save as "Player_Run".

3.2

Create a Jump animation: If your sprite sheet has jump frames, select them and drag onto the player. Save as "Player_Jump". If no jump frames exist, that's OK — we'll use the idle for now.

3.3

Open the Animator: Go to Window → Animation → Animator. Select your player. You'll see coloured boxes (states) connected by arrows (transitions).

Animator Controller: This is a state machine. Each box is a state (idle, run, jump). Arrows are transitions (switch from idle to run when moving). The orange box is the DEFAULT state.

3.4

Create a parameter: In the Animator window, click the Parameters tab (left side). Click + → Float, name it "Speed". This will control which animation plays.

Why a float? Speed can be 0 (idle), 0.5 (walking), or 3.0 (running). A float gives smooth values, not just on/off.

3.5

Create transitions:

Right-click Player_Idle box → Make Transition → click on Player_Run
Click the arrow between them. In Inspector, find Conditions
Click + → set condition: Speed → Greater → 0.1
Uncheck "Has Exit Time" (we want instant transitions)
Set Transition Duration to 0
Now right-click Player_Run → Make Transition → Player_Idle
Condition: Speed → Less → 0.1, no exit time, duration 0

3.6

Connect to your script: Open your PlayerController script. Add these:

// At the top with other variables
private Animator anim;

// In Start()
anim = GetComponent<Animator>();

// In Update(), after calculating movement
float moveInput = Input.GetAxis("Horizontal");
anim.SetFloat("Speed", Mathf.Abs(moveInput));

Mathf.Abs gives the absolute value — so moving left (-1) or right (+1) both give Speed = 1. The animator uses this to switch between idle (0) and run (>0.1).

⚠ Animation glitching? Check: (1) "Has Exit Time" is UNCHECKED on both transitions. (2) Transition Duration = 0. (3) Parameter name matches EXACTLY ("Speed" not "speed").

✓ Checkpoint: My player plays idle when still and run animation when moving.

4

Sprite Flipping & Jump State

~20 min

+10 XP

▶

4.1

Flip the sprite when moving left: Most sprite sheets only show the character facing RIGHT. We need to flip when moving left. Add this to your Update:

// Flip sprite based on direction
if (moveInput > 0)
{
    transform.localScale = new Vector3(1, 1, 1);
}
else if (moveInput < 0)
{
    transform.localScale = new Vector3(-1, 1, 1);
}

How it works: Setting X scale to -1 mirrors the sprite horizontally. The Y and Z stay at 1. When moving right, X = 1 (normal). When moving left, X = -1 (flipped).

4.2

Add jump animation state: Back in the Animator:

Click Parameters → + → Bool, name it "IsJumping"
Create transition: Any State → Player_Jump
Condition: IsJumping = true
Create transition: Player_Jump → Player_Idle
Condition: IsJumping = false
Both transitions: uncheck Has Exit Time, Transition Duration = 0

4.3

Set IsJumping in your script:

// When jumping (inside your jump code)
anim.SetBool("IsJumping", true);

// When landing (in OnCollisionEnter2D, after isGrounded = true)
anim.SetBool("IsJumping", false);

4.4

Replace your placeholder sprite: Now that you have animated sprites, replace the default square/circle placeholder:

Select your player in the Hierarchy
The Sprite Renderer should now show the first frame of your animation
If not, drag the first idle frame into the Sprite field
Adjust the scale if the new sprite is too big or small
Adjust the collider size to fit the new sprite (Edit Collider button)

4.5

Test everything:

Press Play
Stand still → idle animation plays
Move left/right → run animation plays, sprite flips correctly
Jump → jump animation plays, returns to idle on landing

✓ Checkpoint: My player has idle, run, and jump animations. The sprite flips when changing direction.

5

Extension Challenges

~15 min

+10 XP

▶

🏆 Challenge 1: Death Animation — Create a "Player_Death" animation clip. Add an "IsDead" bool parameter. When lives reach 0, set IsDead = true, play the death animation, then reload the scene using SceneManager.LoadScene(SceneManager.GetActiveScene().name); (add using UnityEngine.SceneManagement; at the top).

🏆 Challenge 2: Animated Coins — Create a spinning coin animation using your coin sprite. Select multiple coin frames → drag onto the Coin prefab. The coins will now spin in place! Much more professional looking.

🏆 Challenge 3: Enemy Animations — Import an enemy sprite sheet. Slice it, create walk/attack animations. Add an Animator with idle/walk states. Attach to your enemy prefab. Make enemies look alive!

🏆 Challenge 4: Animation Events — In the Animation window, right-click the timeline → Add Animation Event. This calls a method at a specific frame — perfect for playing a footstep sound at the exact right moment!

🚀 Boss Challenge: Create a complete animation set: Idle, Run, Jump, Fall, Land, Attack, and Death. Set up proper transitions between all states. Use blend trees for smooth run speed transitions!

SPRITE ART & ANIMATION

Key Vocabulary

Submission Guide

Quick Reference

Progress Tracker