Using Spritesheets with Unity3D

New week, new article here!

In my last post, I’ve started a new series of posts related to 2D animations for Unity3D with a short introduction to Unity3D Mecanim. Today is time to import some sprite sheets into Unity and try to get an animation from them.

I personally love crafting my own sprite sheets by hand, I feel my 2D animations much more under control, but for this article I’m using a finished sprite sheet. If some wants to know more about how sprite sheets are made, give a look to this post from the good old times. Before adding it to Unity, check if the size of your sprite sheet is power 2 sized (512*512, 1024*512, 1080*1024…) to avoid further issues.

First steps

What is the first step with Unity? Yes! Create a new project, like in every other Unity tutorial. As long as we are using only 2D, it’s useful to select 2D in the new project menu.

On our new brand project, create a new Sprite by right-clicking in the hierarchy tab or selecting it from the GameObject -> 2DObject  menu. Then create a new folder under the Asset folder called Sprites and drag a sprite sheet into it.

 

 

Select the Sprite in the hierarchy tab and configure their values trough the inspector tab. For sprite sheets, we need to set the Sprite Mode to multiple, and then select Filter Mode and Format. I’ve chosen point and truecolor only to avoid some issues while slicing it.

Slicing is always fun!

Click on “Sprite Editor” to open a new window with the sprite sheet and some slicing tools. In the upper right corner you can find some tools to lower the resolution, view in black and white channels and apply or revert any changes.

Click on slice to display the slice options. In my case I’m using the Grid option because in Automatic the resulting grid wasn’t good enough. Set the cell size and take care of the pivot position. The pivot will be the point of rotation and transformation of your character. You can change it later manually in each sliced frame, but it’s better to take care of it now to save some time.

Once the sheet is sliced, you can edit each cell manually and fix any problems.

Introducing frame animatons

With the sprite sheet sliced, the clickable icon in its side shows each cell as an individual frame. Next step is opening the Animation tab with Ctrl+6 or looking for it in the Window menu. Now the only thing needed to create an animation is drag and drop some frames into the animation panel! Is that easy!

Ok, ok… there are some simple steps more, like creating a new folder in assets called Animations and saving the new animation there, but those steps are more or less the same as ever.

Change the Sample value to find a good frame rate for your animation and click play. Good job, your animation is working.

Adding more clips

For most games, a lonely clip is not enough to represent all the moves of a character. With Unity we can create independent clips using the same sprite sheet and create a state diagram to build all the character behavior. To create a new clip only right-click over the existent clip in the animation panel and select “create new clip”. Choose a name, save it in the animation folder, done!

Creating the new clip is pretty straightforward when you have created the first one. Follow the same steps, drag some frames and it is dome. An animation can be modified at any time, just move a frame in the timeline and add more frames until the animation is completed. You can set different sample values for each clip, but be sure if at the end the transition between a clip to the next one looks good.

Getting all together

It’s time to create an animation using some clips. I’m added one clip more with the character running to have at least 3 states in our animation.

To open the Animator panel, select it under the Window menu (take care; this time is Animator, not Animation this time). Select your sprite and the Animator panel should show a state for each clip already created. If that’s not the case, check if the sprite called “New Sprite” created in our first’s steps has a component called Animation, and if it’s not there, create it and add the Sprite created in the Animation folder as Animation.

In this panel, we can create transitions between clips right-clicking into a state, using “Make Transition”, and then clicking in the next state. Selecting a transition will display its configuration values in the inspector panel. For now we are only able to set the “Exit Time” condition, and a value which represents the number of times the clip is played before moving to the next state.

 

That’s how the final diagrams looks

And at the end we have something like that. You can follow the animation workflow in the Animator panel while playing (and looks awesome!). For now the animation is fixed and has not any external trigger, but I’m going to fix it in following articles. Stay tunned!

Sorry but the two clips are not correctly synchronized!