Unity 2D – Sprite Sheet Animation
‘SpriteSheet’ is a larger image for combining multiple individual images into a single, efficiently laid out image.
Creating SpriteSheet
1. Create the single animation frames, PNG format with alpha channel.
It is known that a good frame dimension is:
– 512x512px
– 256x256px
– 128x128px
– 64x64px
– 32x32px
– 16x16px
It is better use 16x pixel base dimension to optimize RAM use.
In this tutorial I am using a frame of 512x512px
2. Create a ‘Sprite Sheet’ using your favorite software. It is known that ‘GlueIt’ (http://sysimage.250free.com/) is a good software.
a) Open GlueIt
b) Add> Add Files
c) GlueIT
d) Preview> Play
f) Save your new Sprite Sheet in PNG format to maintain alpha channel!
This is mine ‘piggy-spritesheet.png’
Download the original png file at:
http://www.lucedigitale.com/blog/wp-content/uploads/2014/02/piggy-spritesheet.png
Creating Sprites from a SpriteSheet
3. Open Unity> MAIN TOP MENU> Assets> Import New Asset…> Import the Sprite Sheet
Inspector> Default> Max Size> greatest value -> best video rendering quality!
4. Inspector> Sprite Mode>
– Texture Type> Sprite
– Sprite Mode> Multiple> an alert window opens, select ‘Apply’
– On the right click on the button ‘Sprite Editor’> the sprite window opens> Slice>
Type: Grid / Pixel Size 512×512 px / Pivot: Center> ‘Slice’
– Click Over a single frame> Sprite window appears> Edit params if you need
– On top Right> ‘Apply’
5. Assets> Sprite Sheet> click on small white arrow> SINGLE FRAMES appears!
SpriteSheet Animation
5. Assets> Sprite Sheet> click on small white arrow> SINGLE FRAMES appears!> Select with LMB+SHIFT all frames for the right walk (frame 0 – 5) and DRAG them inside the scene> Unity will prompt you to save the animation, so lets give it the name ‘piggy_right.anim’.
TOP button ‘Play’ the game to see animation of right walk.
6. Hierarchy> Select ‘piggy-spritesheet_0’ (the Game object)>’Inspector> inside the stack there are:
– Transform
– Sprite Render
– Animator Controller> uncheck ‘Apply Root Motion’ (never check this in 3D!!!) | check ‘Animate Physics’
Assets> ‘piggy_right’ (saved animation) + ‘piggy-spritesheet_0’ (the same in the Hierarchy)
Double click on ‘piggy-spritesheet_0’> Animator window opens
REPEAT operations 5. 6. for the left walk (frame 6 – 11)
Now there are: piggy-spritesheet_6 + piggy_left.anim
TOP button ‘Play’ and What you should see are all two of your game objects in motion.
Animation Component
7. Hierarchy> select ‘piggy-spritesheet_0’ Game Object.
The Animator Component provides a connection from your GameObject to the Animation Controller so that as things change in your game, the Animation Controller can adapt and provide those changes to the GameObject.
The way the Animation Controller works, is that it is simply a state machine.
When you first create an animation it creates a Controller with one state in it. This state is hooked up to your animation.
The GameObject -> is connected to the Animator -> is connected to the Controller -> is connected to the Motion -> is connected to the Sprite.
Combine all into a Single Game Object and a Single Controller
At the moment, there are two GameObjects, wouldn’t it be easier if this was all combined into a single GameObject and Controller?
8. Delete piggy-spritesheet_6 (the left walk)
Deleting the GameObjects doesn’t delete the associated Animator Controller or Animation objects.
Let’s remove the extra Animator Controllers as well.
9. Assets> there are:
– 1 Spritesheet
– 1 Animation Controller -> CONNECTED WITH GAME OBJECT
– 2 Animations
10. Assets> double click over the Controller> ‘Animator’ window opens
11. ‘Animator’ window> RMB> Create State> Empty> Inspector>
– give it the name ‘piggy_left’
– Motion> small circle icon> Assets> piggy_left (animation of left walk)
12. ‘Animator> ‘RMB over ‘piggy_left’ > Make Transition> release over ‘piggy_right’
Repeat 11. 12. from piggy_right to piggy_left
The ORANGE BOX is the default state.
Usually the default state is the static behaviour of a character, when there is no user input.
TOP button ‘Play’ and what you should see are one game object with 2 animations.
Transitions
To make each transition ‘fire’ when appropriate we need to create a parameter that will change it’s value. Each transition will have a condition that will test the value of the parameter and if it’s true, the transition will occur and the state will change, causing the animation to change as well.
13. ‘Animator’> lower left hand corner, ‘Parameters +’, click ‘+’> Int> name it ‘Direction’
Now there is a way to control when the transitions will cause a change of state. The following table specifies the rules we will use to dictate what the values of the parameter mean.
0: right
1: left
14. ‘Animator’> select piggy_right> Inspector>
click over: ‘Transitions’ Box Base Layer.piggy_right -> Base layer.piggy_left
It turns in blue and show the panel in the image below.
15. Inside ‘Conditions’ Box click over ‘Exit Time’ and select ‘Direction’ from the list.
16. Setup the ‘Conditions’:
Transitions’ Box Base Layer.piggy_right -> Base layer.piggy_left
Direction | Equal | 1
17. Repeat 14. to 16. for piggy_left
Transitions’ Box Base Layer.piggy_left -> Base layer.piggy_right
Direction | Equal | 0
TOP button ‘Play’ and your pig should be walking on the right only.
Notice the Animator that shows the running animation state, piggy_right
Notice ‘Parameters’>Direction is 0
‘Animator’> Parameters> Direction, change it to 1
TOP button ‘Play’ and your pig should be walking on the left only.
Notice the Animator that shows the running animation state, piggy_left
NOTICE: you can select a transiction from ‘Animator’> click direct over the transition row
It is all OK, isn’it?:
0: right
1: left
Script
Create a ‘playerController.js’ and DRAG it, in the Hierarchy, over the GameObject ‘piggy-stpritesheet_0’
The code for playerController.js:
#pragma strict
function Start () {
}
var speed : float = 10.0; // to change speed
function Update () {
var horiz : float = Input.GetAxis("Horizontal");
var vert : float = Input.GetAxis("Vertical");
// Make it move 10 meters per second instead of 10 meters per frame...
horiz *= Time.deltaTime;
vert *= Time.deltaTime;
transform.Translate(Vector3(horiz*speed,vert*speed,0));
}
Play the game and use the <- -> arrow key to move the GameObject.
The problem is the ‘Animator’> Direction value does not change!
Add the code:
#pragma strict
var animator : Animator;
function Start () {
animator = GetComponent("Animator");
}
var speed : float = 10.0; // to change speed
function Update () {
var horiz : float = Input.GetAxis("Horizontal");
var vert : float = Input.GetAxis("Vertical");
// Change frameset animation START
if (horiz > 0)
{
// Right Walk
animator.SetInteger("Direction", 0);
}
else
{
// Left Walk
animator.SetInteger("Direction", 1);
}
// Change frameset animation END
// Make it move 10 meters per second instead of 10 meters per frame...
horiz *= Time.deltaTime;
vert *= Time.deltaTime;
transform.Translate(Vector3(horiz*speed,vert*speed,0));
}
Notice how you can get Animator parameters:
1. Create the variable
var animator : Animator;
2. Get Component and put it into ‘animator’ variable
function Start () {
animator = GetComponent("Animator");
}
Change animator value “Direction” to right walk transition “0” OR left walk transition “1”
// Change frameset animation START
if (horiz > 0)
{
// Right Walk
animator.SetInteger("Direction", 0);
}
else
{
// Left Walk
animator.SetInteger("Direction", 1);
}
// Change frameset animation END
Play the game and when you use the -> arrow key (horiz > 0) the GameObject will start the right walk animation.
In the same way you can drive animation for other directions, jumps, fire attach etc…, you can use a – if – else – else if – statement to drive multiple conditions.
Edit Animation – Time
1. Hierarchy> select the GameObject ‘piggy-spritesheet_0’
2. MAIN TOP MENU> Window> ‘Animation’
3. Click over the grey arrow on the left of ‘piggy-spritesheet_0’:Sprite> You will see the animation preview over the time!
4. DRAG the keys
NOTICE: when you select a key the TOP Play button will turn to RED, also the ‘Animation’ window turn in RECORD mode.
Edit Animation – Add Curve
1. ‘Animation’> ‘Add Curve’> Transform> Rotation> +> on the top of the stack you will see ”piggy-spritesheet_0′:Rot’
2. ‘Animation’> select a Rotation Key> Inspector> change Rotation Z to 90
TOP Play button to see the final animation
Edit Animation – Speed
To change animation speed you can:
1. ‘Animator’> select animation ‘piggy_right’> Inspector> Speed> Change Speed
—
References:
– Official Unity Manuals: http://docs.unity3d.com/Documentation/ScriptReference/30_search.html?q=Animator.Set
