The traditional method of animation involved hand-drawing many images, each slightly different, which displayed quickly frame-by-frame to give the appearance of movement. For computer game animation, the term Sprite Sheet is given to the image file that contains one or more sequences of sprite frames. Unity provides tools to breakup individual sprite images in large sprite sheet files, so that individual frames, or sub-sequences of frames can be used to create Animation Clips that can become States in Animator Controller State Machines. In this recipe, we'll import and break up an open source monster sprite sheet into three animation clips for Idle, Attack, and Death that looks as shown:
For all the recipes in this chapter, we have prepared the sprite images you need in folder 1362_03_05. Many thanks to Rosswet Mobile for making these sprites available as Open Source at: http://www.rosswet.com/wp/?p=156.
To create an animation from a sprite sheet of frame-by-frame animation images, follow these steps:
- Create a new Unity 2D project.
- Import the provided image
monster1. - With image
monster1selected in the Project panel, change its Sprite mode to Multiple in the Inspector, then open the Sprite Editor panel by clicking button Sprite Editor. - In the Sprite Editor open the Slice dropdown dialog, set the Type to Grid, set the grid Pixel Size to 64x64, and then click the Slice button. Finally, click the Apply button in the bar at the top right of the Sprite Editor panel):
- In the Project panel you can now click the expand triangle button center-right on the sprite, and you'll see all the different child frames for this sprite.
- Create a folder named
Animations. - In your new folder, create an Animator Controller named monster-animator.
- In the scene create a new Empty GameObject named monster1 (at position
0,0,0), and drag your monster-animator into this GameObject. - With GameObject monster1 selected in the Hierarchy, open up the Animation panel, and create a new Animation Clip named Idle.
- Select image
monster1in the Project panel (in its expanded view), and select and drag the first 5 frames (frames 0-4) into the Animation panel. Change the sample rate to 12 (since this animation was created to run at 12-frames per second).
- If you look at the State Chart for monster-animator, you'll see it has a default state (clip) named monster-idle.
- When you run your scene you should now see the monster1 GameObject animating in its monster-idle state. You may wish to make the Main Camera size a bit smaller, since these are quite small sprites.
Unity's Sprite Editor knows about sprite sheets, and once the correct grid size has been entered it treats the items in each grid square inside the sprite sheet image as an individual image, or frame, of the animation. You selected sub-sequences of sprite animation frames and added them into several Animation Clips. You had added an Animation Controller to your GameObject, and so each Animation Clip appears as a state in the Animation Controller State Machine.
You can now repeat the process, creating an Animation Clip monster-attack with frames 8-12, and a third clip monster-death with frames 15-21. You would then create Triggers and Transitions to make the monster GameObject transition into the appropriate states as the game is played.
Learn more about the Unity Sprite Editor from the Unity video tutorials at https://unity3d.com/learn/tutorials/modules/beginner/2d/sprite-editor.