Rigging a Sprite with Anima2D

1. Rigging a Sprite with the Unity Anima2D Asset

Anima2D is a free asset package provided by Unity, and available for download through the Asset Store. It allows for developers to create 2D character animations using 2D bones and Inverse Kinematics, (IK). With a little practice, rigging a Sprite with Anima2D is quick and straightforward. To begin with, make sure you have your Sprite Sheet in the Unity Editor and you’ve imported the Anima2D package into your Project from the Asset Store window. This workflow doesn’t cover trimming your Sprite Sheet — it is solely focused on rigging the Sprite, assuming you have already positioned and trimmed your Sprite, and have its components already in your Scene as SpriteMeshes.

For this tutorial’s example, we will be working with the ‘UnityChan’ Character Sprite Sheet (Figure 01). The Character example provided in the Anima2D Asset comes with a rig already applied, so for the sake of the lesson, the skeleton has been removed and we will re-create the rig.

Figure 01: The Unity Anima2D example Character ‘UnityChan’, with its corresponding Sprite Sheet, and configured in an idle pose.

2. Creating the Bones

To begin rigging your Sprite with Anima 2D:

1. Make sure your Sprite pieces are in a pose that you feel is a good starting point, like an idle pose.

2. When you have your SpriteMeshes assembled in the starting pose, organize your Sprites in an easy-to-manage file structure. A good structure would be similar to having all the SpriteMeshes parented to an empty GameObject renamed ‘SpriteMeshes,’ which is then childed to another empty GameObject renamed after your Sprite’s Character (Figure 02).

Figure 02: Sample File Structure for 2D Character Sprite, containing separate Game Objects named: ‘SpriteMeshes’, and ‘Bones’, parented to the ‘Unity chan’ 2D Character Sprite.

3. To begin creating your bones, right-click your Sprite and add a new empty GameObject under the parent, and rename it “Bones” (Figure 02).

4. Right-click the Bones Game Object in the Hierarchy panel, and select:
2D Object > Bone (Figure 03)

Figure 03: Adding a new bone to the newly created Game Object.

This will create a bone in your Scene. Rename the New bone to ‘Hips,’ and then by selecting the bone’s gizmo, move and rotate to place this bone into position. You will want to start your first bone at the ‘“core” of your Character’s Sprite, or the central pivot point. A good example of this is located at the center of a standard humanoid character (Figure 04).

Figure 04: The Hip bone positioned at the Character Sprite’s center core pivot point.

You may need to adjust the length of the bone, using the Bone 2D (Script) component, in the Inspector Window (Figure 05).

Figure 05: Adjusting the Length of the Bone

You may also want to adjust the color of the bone, using the Bone 2D (Script) component, in the Inspector Window, to color-categorize various types of bone associations (Figure 06).

Figure 06: Adjusting the Color of the Bone

5. Once your core is created, add the subsequent bones needed for your Sprite. To do so, ensure that they will all be parented to the core bone, by selecting them in sequence in the Hierarchy Window, and then Right-clicking to Select: 2D Object > Bone, re-naming the bone, and adjusting the length, position, and rotation of the bone each time as necessary (Figure 07).

Figure 07: Complete Bone setup of the 2D Character Sprite

3. Binding the Bones

Once your bone structure is in place, The Character Sprite doesn’t yet react to the bones you’ve created. We will now have to bind the SpriteMeshes to the bones.

1. Select the SpriteMesh you wish to bind to a bone.

2. From the menu dropdown, select: Window > Anima2D > SpriteMesh Editor.

3. The SpriteMesh Editor window will open with the selected SpriteMesh highlighted (Figure 08).

Figure 08: Selected SpriteMesh highlighted in the SpriteMesh Editor

4. Next, you need to click-and-drag the bone you wish to bind to the SpriteMesh in the SpriteMesh Editor Window (Figure 09).

Figure 09: Dragging the Bone onto the SpriteMesh in the SpriteMesh Editor Window.

Alternatively, you may assign the bone and all of its children to the SpriteMesh in the SpriteMesh Instance (Script) Component in the Inspector Window (Figure 10).

Figure 10: The Sprite Mesh Instance (Script) Component in the Inspector Window, with the Bones Assigned.

In some cases, associating the bones to the meshes automatically can be useful. If not, select the bones you want bound to their separate SpriteMeshes individually, (Figure 11).

Figure 11: Binding bones to the SpriteMesh in the Sprite Mesh Instance (Script) Component, in the Inspector Window.

5. Once this is done, you should see the bone over the highlighted SpriteMesh in the SpriteMesh Editor (Figure 12).

Figure 12: The Face Mesh is bound to the corresponding Bone in the SpriteMesh Editor

6. Next, select the Bind button to open the Bind view of the SpriteMesh so you can see how the bone is affecting the SpriteMesh. If you have multiple bones, this view becomes incredibly useful for modifying how the bones affect the Mesh. For SpriteMeshes with only one bone, that bone will control the entire SpriteMesh (Figure 13).

Figure 13: The Weight tool with the Overlay and Pies checkbox enabled to show the bone’s influence

7. Select Apply to save changes to your SpriteMesh. To make sure the bone was bound properly, select it in the Hierarchy panel and move it around in your Scene. If it is bound properly, then the SpriteMesh should move with the bone.

8. Repeat this process for all your SpriteMeshes until they are all bound.

4. Conclusion

Once all your Bones and SpriteMeshes are bound, you are finished rigging your 2D Character Sprite. With this basic knowledge, you will be able to create, rig, and finally animate your Sprite. The next step is learning how to create Inverse Kinematics (IK) constraints of movement of the bone structure’s rig to help control and bind the movement of the bones. If you don’t require any IK’s, then proceed to animating your 2D Character Sprite.