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.

Spite sheets in Unity 3D

Spite sheets in Unity 3D

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.

 

Create Spritesheet

Create a new sprite, create a new folder called Sprites and drag athe spritesheet 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.

Sprite config

Configure all the parameters of the Sprite.

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.

Slicing the spritesheet

Select the slicing mode and then adjust any of the frames if needed

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.

Create a new animation

To create a new animation, drag some frames to the animator tab and save the animation in a new folder. Adjust the sample value if needed

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!

Create new animation

Select new clip to create a new animation

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.

Modify an animation

Any frame can be moved and any other frames can be added to an existing animation

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.

Open animator diagram

Open animator diagram

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.

 

Create a new transition

Create a new transition. Exit time value represent the number of times the animation it’s going to be played before moving to the next state

That’s how the final diagrams looks

Final example diagram

Final example diagram

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!

Final example

Final example. Sorry, both screens are not perfectly synchronized 🙁

 

 

4 thoughts on “Using Spritesheets with Unity3D

  1. Nice tutorial 😉

    But I think that your method can be improved. The main issue I see is that you have to use equally spaced sprite sheets – the import will otherwise fail.

    We’ve created a plugin that will make things easier: It can import non equally spaced sprite sheets packed with TexturePacker. So you can remove the transparency around your sprites while retaining the original pivot point. Slicing is done automatically.

    The plugin is averrable from here:
    TexturePacker Importer

  2. I am selecting the sprite slices I want for the animation and dragging them to the animation window and nothing is happening…..

    • Hello FoxCastz. Sorry for answering that late, we have been busy for so long 🙁
      make sure you have created a new animation clip and the object you want to animate is selected.

      Regards

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.