2D character hierarchy and animation in Unity with Shadow Bug

Added by: Juha Ylimäki /

Howdy ho!

This blog post is more like a tutorial. I will explain how I create the 2D characters ready for animation in Unity 4.7.

So let’s begin with making the actual creature we want to animate in Unity.

Here is our candidate.. Shadow Bug holding a sign.

Shadow Bug with a sign


We want Shadow Bug to have a simple idle animation. You know… hanging around, holding a sign.

The first thing we need to do is to cut Shadow Bug into pieces in Photoshop or whatever software you prefer!

Notice that when cutting the arms and legs from the torso you want the arms and legs to overlap a bit on the torso so there’s possibility to rotate the arms and legs around.

See the picture below for example:

Character Hierarchy Blog Post 6

In the picture below we have different pieces that we can animate in Unity. Notice the eyes and mouth are separate from the torso so we can animate them around on top of the torso as we like.

Remember to save the image with transparent background!

Character Hierarchy Blog Post

You can download this image with transparent background as a Photoshop file right here.

Ok now let’s open a new scene in Unity.

Character Hierarchy Blog Post 5

In Project window go and find the image where you saved it. In this case Assets\Sprites\Shadow Bug\Shadow Bug.psd

Make these import settings in the Inspector window as seen in the screenshot below:

Character Hierarchy Blog Post 4


Notice when you select the “Sprite Mode” to “Multiple” and open the “Sprite Editor” you have the possibility to cut the image into multiple pieces that we can use in Unity.

Character Hierarchy Blog Post 8

In picture above we have the Sprite Editor open. You can start slicing the image by holding and dragging your mouse.

Character Hierarchy Blog Post 7


In the picture above all the pieces have been sliced into their own sprites for Unity. Notice the blue selected area at the upper left corner. See how the pivot point (blue circle) has been moved to a proper place. The object rotates around this point. This selected piece has been named “Arm Left” as seen in the info box at the lower right corner.

Now that we have imported and sliced our image properly for Unity we can start buliding the character in the scene.

You do this by dragging the sprites we just made from the Project window to the Hierarchy window one by one. Notice if you select all the sprites and drag them to the Hierarchy window Unity will automatically make all those sprites into a single object with a frame-by-frame animation created from all the dragged sprites. In this tutorial we don’t want this. So drag all the sprites one by one so all of them will be created as a separate object in the scene.

In the picture below we have Shadow Bug with all the pieces in a nice hierarchy. The object called “Shadow Bug” holds an object called “Animation” that holds all the visual pieces we just sliced in the sprite editor. Notice that the “Leg Right” and “Leg Left” are NOT under “Torso”. This way we can animate the torso without affecting the legs position. Smooth.

Character Hierarchy Blog Post 2


In the two pictures below you can see how the pieces have different Sorting order. The Order in Layer of “Torso” is 5 and Order in Layer of “Smile” is 6. This way the “Smile” object is always on top of the “Torso”.

Character Hierarchy Blog Post 9


Character Hierarchy Blog Post 10


Now that the character’s pieces are nicely sliced and put into a hierarchy we can start animating it!

As in the picture below: Select the “Animation” object in the scene and click on the red area in the Animation window. A small window with “[Create New Clip]” will appear. Click it.

Character Hierarchy Blog Post 11


Saving window will appear! Save the animation to a proper folder with a proper name. In this case “Assets\Animations\Shadow Bug\Idle.anim”.


Character Hierarchy Blog Post 12


After saving the new animation file called “Idle” Unity automatically also creates a controller file (*.controller) to the same folder. This controller file will have the name of the object that we had selected when we created our new animation. In this case the controller will be called “Animation” because we created our animation while having the object “Animation” selected in the scene as seen in the picture below. You can access the controller by selecting the “Animation” object in the scene and opening Animator window in Unity. Notice that Animation and Animator windows are two different things in Unity…

As seen in the picture below Unity has also put our newly created animation called “Idle” into the newly created controller. You can see the orange box with the name “Idle” on it. The orange color means that this animation will be played as the default animation when the object appears in the scene during gameplay.


Character Hierarchy Blog Post 13


Now we are finally ready to start animating! Select the “Animation” object in the scene and click anywhere on the timeline in the Animation window. You will see how the red record button and all the three buttons on top of the screen goes insanely red. This means that Unity is in record mode. This means that all the values you change in the Inspector window and the selected object you move/rotate/scale on the Scene window will be animated on the timeline of the Animation window. See the picture below:

Character Hierarchy Blog Post 14


Let’s select the Rotation tool in Unity. Now select the “Torso” object in the scene and start rotating it. Notice how Unity created a new keyframe (diamond shaped thingy) on the timeline. See picture below:

Character Hierarchy Blog Post 15


Now move the red indicator (the tall thin red line) in the Animation window by clicking to another position on the timeline (the numbers on the timeline to be exact). Rotate the “Torso” object to another direction as seen in the picture below:

Character Hierarchy Blog Post 16

One more! Now select the first keyframe (the diamond shaped thingy) on the timeline. Press Ctrl + C. Move the red indicator (the tall thin red line) on the timeline to the end of the timeline. Press Ctrl + V. Now the animation ends in the same keyframe where it starts. This way the animation loops nicely. See the picture below:

Character Hierarchy Blog Post 17

Notice when you roll the roll of your mouse while having the cursor on top of the timeline it will zoom in and zoom out according to the point of the cursor!

That’s it! Press the Play button in the Animation window and be amazed of your animated Shadow Bug inside Unity!

Now you can start creating your own 2D animated characters inside Unity. Go wild!

During your Unity animation trip you will eventually see weird things happening when you create a new keyframe into your animation. If things start to feel like crazy pills then take a look at the “Curves” button in the bottom of the Animation window. Here you can edit how Unity handles the interpolations between your keyframes. Most of the time Unity makes them automatically go in very strange ways. Easiest way to get things moving smoothly is to select all the keyframes, click right mouse button on top of a selected keyframe and select “Flat”.

Character Hierarchy Blog Post 18




Have a great time animating your characters in Unity!

– Juha