Lesson 11: Sprite Animation — Spritesheets

1

Option A: Base Pack Walk Frames (EASIER)

Individual walk frame images — simplest approach

▶

This is the easiest approach to sprite animation in Unity. The Kenney base pack provides each animation frame as a separate image file. You simply select all the frames, drag them onto your character, and Unity creates the animation for you automatically. No slicing or configuration needed.

Player 1 Animation Files

Location: Base pack/Player/

File	Description
p1_stand.png	Idle pose (single frame)
p1_walk/ folder	11 walk frames (p1_walk01.png to p1_walk11.png)
p1_jump.png	Jump pose (single frame)
p1_duck.png	Crouch pose (single frame)
p1_hurt.png	Damage pose (single frame)

💡 The same files exist for p2_ and p3_ prefixes. You can use any of the three player characters — they all have the same animation set with different appearances.

Create Walk Animation

Import the ENTIRE p1_walk/ folder into Assets/Sprites/Player/ in your Unity project
In Unity, select ALL walk frames — click p1_walk01, then hold Shift and click p1_walk11 to select all 11 frames
Drag them ALL onto the Player GameObject in the Hierarchy panel
A Save dialog appears — save the animation as "Player_Walk" in an Assets/Animations/ folder (create it if needed)
Unity auto-creates an Animation Clip + Animator Controller for you
Open the Animation window: Window → Animation → Animation
Change Samples to 12 for smooth pixel art animation speed

Create Idle Animation

Select ONLY p1_stand.png in the Project panel
Drag it onto the Player GameObject in the Hierarchy
Save the animation as "Player_Idle"

Create Jump Animation

Select p1_jump.png, drag it onto the Player, and save as "Player_Jump"

💡 You can repeat the same process for p1_duck.png (crouch) and p1_hurt.png (damage) to build a complete animation set. Each single-frame image becomes a one-frame animation clip.

2

Option B: Base Pack Spritesheet (MORE ADVANCED)

All frames packed into a single image — requires slicing

▶

For students who want to try the spritesheet approach, the Kenney base pack also includes all animation frames packed into a single image. This is more advanced but is how professional games typically handle sprites.

Spritesheet Files

File	Location	Description
p1_spritesheet.png	Base pack/Player/	All frames in one image
p1_spritesheet.txt	Base pack/Player/	Frame size/position data

Slice the Spritesheet

Import p1_spritesheet.png into your Unity project
Select it, then in the Inspector change Sprite Mode to Multiple
Click the Sprite Editor button
In the Sprite Editor, click Slice → set Type to Grid By Cell Size → enter 72 x 97 pixels
Click the Slice button, then Apply at the top, then close the editor
Expand the spritesheet in the Project panel — you will see all the individual frames appear as child sprites
Select the walk frames from the expanded list, then drag them onto the Player in the Hierarchy to create the animation

⚠️ The spritesheet approach is trickier because you need to figure out the correct cell size. If frames look wrong (cut off or overlapping), try different pixel sizes. The .txt file included alongside the spritesheet has the exact pixel coordinates for each frame — open it in a text editor to check.

3

Option C: Alien Characters (RECOMMENDED — Most Animations!)

Full animation set with climb & swim states

▶

The Kenney alien character sprites are the recommended choice for animation because they come with the most animation states. Each alien colour has individual frame images that are easy to work with (like Option A) plus bonus climb and swim animations.

Location: Extra animations and enemies/Alien sprites/

5 Colours Available

Beige • Blue • Green • Pink • Yellow

Full Animation Set (alienBeige example)

File	Description
alienBeige_stand.png	Idle pose
alienBeige_walk1.png	Walk frame 1
alienBeige_walk2.png	Walk frame 2
alienBeige_jump.png	Jump pose
alienBeige_duck.png	Crouch pose
alienBeige_hurt.png	Damage pose
alienBeige_climb1.png	Climbing frame 1
alienBeige_climb2.png	Climbing frame 2
alienBeige_swim1.png	Swimming frame 1
alienBeige_swim2.png	Swimming frame 2

✅ The alien characters have MORE animation states (climb, swim) than the base players. Great for games with ladders or water! Replace "Beige" with Blue, Green, Pink, or Yellow for other colours — the file naming pattern is identical.

Pre-Made Spritesheets Also Available

If you prefer the spritesheet workflow (Option B style), pre-made spritesheets for each alien are located at:

Extra animations and enemies/Spritesheets/alienBeige.png

Each spritesheet comes with a matching .xml file containing the exact slice data for each frame.

4

Animator Controller Setup

State machine, parameters & transitions

▶

After creating your animation clips, you need to set up the Animator Controller to switch between them. The Animator uses a state machine — each animation is a "state", and you define rules (transitions) for when to change states.

State Machine Diagram

┌─────────────┐ Speed>0.1 │ Player_Walk │ Speed<0.1 ┌──────────────►│ │◄──────────────┐ │ └─────────────┘ │ ┌───┴─────────┐ ┌────────┴────┐ │ Player_Idle │◄─── Any State ─────────│ Player_Jump │ │ (Default) │ IsJumping=true │ │ └─────────────┘ └─────────────┘ IsJumping=false

Animator Parameters to Create

Parameter	Type	Purpose
Speed	Float	0 = idle, >0.1 = walking/running
IsJumping	Bool	true when the player is airborne

Setting Up Transitions

Open the Animator window: Window → Animation → Animator
Right-click Player_Idle → Make Transition → click on Player_Walk
Select the transition arrow. In the Inspector, uncheck "Has Exit Time"
Set Transition Duration to 0 (instant switch, no blending)
Under Conditions, click + → set Speed / Greater / 0.1
Create the reverse transition: Player_Walk → Player_Idle with condition Speed / Less / 0.1
For jumping: right-click Any State → Make Transition → Player_Jump with condition IsJumping = true
Transition from Player_Jump → Player_Idle with condition IsJumping = false

⚠️ Always uncheck "Has Exit Time" and set Transition Duration to 0 for every transition. If you forget, your animations will feel sluggish and delayed — the character will finish the old animation before switching.

💡 The Parameters tab is on the left side of the Animator window. Click the + button to add new Float or Bool parameters. These are the values your movement script will control at runtime.

5

Enemy Animation Frames

Extension challenge — animate enemies too

▶

For an extension challenge, you can animate enemies using the same drag-and-drop method you learned for the player character. Each enemy has individual frame images for different states.

Location: Extra animations and enemies/Enemy sprites/

Enemy Sprite Files

Enemy	Idle	Move	Dead	Hit
Slime	slime.png	slime_walk.png	slime_dead.png	slime_hit.png
Bat	bat.png	bat_fly.png	bat_dead.png	bat_hit.png
Bee	bee.png	bee_fly.png	bee_dead.png	bee_hit.png
Spider	spider.png	spider_walk1/2.png	spider_dead.png	spider_hit.png
Snake	snake.png	snake_walk.png	snake_dead.png	snake_hit.png
Ghost	ghost.png	ghost_normal.png	ghost_dead.png	ghost_hit.png

💡 Use the same workflow as the player: select the frames for one animation state, drag them onto the enemy GameObject, and save the clip. Create an Animator Controller for each enemy type with Idle, Move, Dead, and Hit states.

✅ The Spider has two walk frames (spider_walk1.png and spider_walk2.png) for a more detailed crawling animation. All other enemies use single-frame movement states, which still work well for simple 2D games.

SPRITE ANIMATION: SPRITESHEETS

Player 1 Animation Files

Create Walk Animation

Create Idle Animation

Create Jump Animation

Spritesheet Files

Slice the Spritesheet

5 Colours Available

Full Animation Set (alienBeige example)

Pre-Made Spritesheets Also Available

State Machine Diagram

Animator Parameters to Create

Setting Up Transitions

Enemy Sprite Files