Guide to Unity 2D Skeletal Animation

Unity has a large toolset for 2D games and 2D sprite Skeletal Animation is one of them. With this tool you can animate tour 2D sprite inside Unity without the use of any 3rd party tools. Unity supports “PSB” and “PNG” files. We will be using a .PNG image for the purpose of this tutorial. There are some settings that are different for PNG and PSB, we go through them in the tutorial.

Getting your Image Ready

If you are using a PNG file then you need to make sure that the sprite’s body parts are separated and not clipping on to each other. If not, the animation will not turn up Good. Here is the example sprite that you can download from opengameart

Sample sprite

The background of your PNG image should be transparent. If you do not know how to do it, check out our tutorial on how to make your sprite background transparent.

Importing Image into Unity

Drag and drop your image on to Unity’s project window.

Unity Black Friday Deals

Select your sprite and make sure the Texture type is set to 2D and UI, sprite mode is set to Single. In the case of a PSB file this setting needs to be set to multiple.

Drag and drop your sprite on to the scene and if you find the sprite is too big then select the image in the project window and increase the pixel per unit and hit apply.

Your Image is Ready for Animation.

Character inspector setting

Required Unity packages for 2D skeletal Animation

If you have used a 2D template to start your game these packages will already be installed. If not, you need to install the following packages.

Go to Windows>Package Manager

Select Unity Registry and search for 2D Animation and 2D Sprite. Install both the packages.

If you are using a PSB file then add PSD importer too.

Adding 2D Sprite using Unity package manager

Adding Bones to your sprite

Select your Image file in the project window and click on Sprite Editor.

On the top left of the Sprite Editor select Skinning Editor

Menu to Open Skinning Editor

Your Skinning editor window will open. Double click on your sprite to select it. This step is very important or you will not be able to add bones to your sprite.

Selecting the Character
Once your character is selected click on Create Bone. Now Left click on the place you want to create the bone.

Things to remember

  1. Left click to create a new Bone.
  2. Right click or press ESC to end bone.
  3. Select the bone with left click and click inside the next body part to create a connected bone.

For example, the leg is connected to the lower body bone. So first click inside the lower body bone and then click inside the leg sprite to create a leg bone.

Create bones for the whole body as shown below

Adding Geometry, Weights and Visibility to the bones

Click on Auto Geometry and Check the Weights check box on the popup in the right bottom.

Geometry popup in Skinning editor

Click on generate for Selected.

Your sprite should be filled with colors. You can move around one bone to see how it affects the other bones.

If you want to bring the bones to initial position after testing then click on restore pose.

Weights in your character

Click on the Visibility Button on the Right top corner.

You will see all the bones attached to your Character. You can double click on it to change the name. (Sometimes more clicks are required).

You should also see a depth option. This value is very important.

Your Character’s hand on the right will be above the body when it moves and the hand on the left will be behind the body. The bone which should be on the top should have a greater number. You need to add the depth values for the child bones too.

Adding in the depth values for all bones. You can leave out the bones that you think will never be covered by another bone.

Visibility popup
After this click on the Apply button on the top right and close the Sprite Editor.

Getting Your Gameobject ready for Animation

Select your character in the Hierarchy window and add a Sprite Skin component. This is not required if you are using a PSB image.

Click on create Bone and all the bones you created will get populated on your character. Now your character should look like this.

Character after adding bones

Put the body parts together so that it looks like the character you want.

Final character in Scene

The next component required is IKManager2D.

This is required to move all the bones in the limbs together. You should add this to the lowest bone i.e. the feet of the leg. It affects till the 3rd bone. So, you need to have at least three bones in a limb.

Click on the +sign in the IKManager2D and select Limb. This adds a new component to your Hierarchy called new_2DLimbSolver2D. Select this object and rename it as Left_L_2DLimbSolver2D.

Drag and drop your foot bone to the effector Variable in the Limb Solver. Move the Limb Solver transform to somewhere near your feet.

Click on Create Target. Then move your limb solver to see if your leg bends in the right direction. If not check the Flip option.

Limb solver properties
Limb solver transform

Do this for your both legs and Hands.

Creating a Jump Animation

If you are totally new to Animation in Unity then check out our post on how to create a simple animation in Unity.

For this tutorial, let’s create a jump animation for the character.

Select the character in the hierarchy window. Go to Window>Animation>Animation.

In the Animation window click on the create button

Let’s name the Animation Jump and save it.

Click on the record button

Create new frames for every pose in Jump Animation. Move the legs and hands using the Limb Solver.

After creating your keyframes click on the record button again.

You have created your first skeletal animation in Unity and I hope yours is better than mine.

Character Jump Animation

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.