Rigging a Sprite with the 2D Animation Package

1. Rigging a Sprite with the 2D Animation Package

Verified with: 2019.4 and 2D Animation Package 3.2.6

When working with 2D Sprites, sometimes a developer will want to “rig” a character by embedding a skeletal rig onto the sprite, similar to the rigging process common in 3D character modeling. When rigs are applied to 2D artwork, it further enables the 2D sprite character’s ability to be animated, by moving or transforming the character along its associated range of skeletal pivot points.

The 2D Animation package allows you to rig Sprites as one might rig a 3D model for animation. The 2D Animation package must be downloaded within the Package Manager. To open the Package Manager window, from the top drop-down, select: Window > Package Manager.

All packages, including the 2D Animation package, are visible (Figure 01). Select 2D Animation in the left column and select Install in the lower-right corner to install the 2D Animation package.

Figure 01: Package Manager window for the Unity engine.

2. Rigging A 2D Character Sprite

In order to start rigging a 2D character Sprite Asset, your character will already be prepared and saved into the Assets folder of your project. In this tutorial, we will be working with a 2D Character Sprite named ‘Plunkah’, downloaded from the Package Manager window with the selected 2D Animation Samples (Figure 02), or available as a download from the Unity Asset Store.

Figure 02: The Package Manager window showing the 2D Animation Samples available for Import.

3. Understanding the Skinning Editor

The Skinning Editor is used to create a skeleton in the character rigging process. The skeleton, or ‘bones’, (also known as a rig,) will be bound to the Sprite itself. The Sprite’s graphics act as a sort of ‘skin,’ giving the Skinning Editor its name. The Skinning Editor is a subset of the Sprite Editor.

The Skinning Editor consists of three groups of controls — Bones (Figure 03), Geometry
(Figure 05), and Weights (Figure 06) — explained in further detail below.

Figure 03: Bone controls

Bones

Preview Pose: This allows you to move and rotate bones to see how the rigging affects posing and animation. You can connect, disconnect, and reposition bones, but these changes are not permanent and are only active during the preview.

Edit Joints: Move, reposition, disconnect, and reconnect bones.

To move a bone without disconnecting its joints, click-and-drag either the root or the tip of the bone.

To disconnect a joint, click-and-drag the bone until it separates. To reconnect the joint, click-and-drag its root to the unconnected tip of another bone, or its tip to the unconnected root of another bone.

Create Bone: This allows you to create a bone. If you are switching to this tool from another, the bone will by default be a child of the root of the previously selected bone chain, starting a new branch in the Hierarchy. Alternatively, you can select the tip of an existing bone to make it the parent of the new bone. If you’d like to make the new bone without a parent, right-click or press ESC to break any connection. Left-click to place the bone’s root, and select once more to place the tip. When you create a bone, you can name it and set its Sprite depth (Figure 04).

Figure 04: Depth sorting allows you to layer parts of the rig as you do Sprites.

Split Bone: This splits a single bone into two connected bones.

Figure 05: Geometry controls.

Geometry

Auto Geometry: This automatically creates a vertex Mesh for the Sprite, assigns the existing bones to vertices, and generates bone weighting information. Bone weights are set per vertex, and determine how much influence a bone has over a vertex. The vertices are colored to match the bone they’re influenced by, and vertices that are influenced by more than one bone are a blend of the bones’ colors. The tessellation of the vertex Mesh is automatic and is based on the sprite geometry outline rather than the count and position of bones.

Edit Geometry: This allows you to move and delete edges and vertices. If you delete a border edge, causing an open Mesh, Unity only retains the vertices and other border edges. Interior edge information is lost until the surface is closed again or until Auto Geometry is used.

Create Vertex: This allows you to create a vertex, automatically creating edges to connect it to neighboring vertices.

Create Edge: This allows you to create an edge between two existing vertices, or one existing vertex and a new one placed where you click.

Split Edge: This splits the edge nearest your mouse by creating a new vertex where you click, connecting it with both endpoints of the original edge.

Weights

Auto Weights: This will open a panel that can automatically generate, normalize, or clear bone weights.

Weight Slider (Figure 07), Selected vertices can be adjusted via a set of sliders. Select vertices one at a time by clicking on them. Multiple vertices can be selected while holding Ctrl and clicking the left mouse button. You can also select a group by dragging a rectangle lasso around the desired vertices. Holding Shift, you can drag additional lassos to add to your selection. Drag a lasso without holding Shift to quickly clear your selection.

Figure 07: Weight Slider controls.

In this example, we’re editing a vertex that’s currently influenced only by the bone bone_3, though Root is the selected bone. If we add influence from Root via the Amount slider, Root is added to the Vertex Weight list, and the amount of influence of bone_3 is decreased from 1 so that the influence of all bones adds up to 1. With Normalize checked, the weights of each contributing bone are uniformly scaled so they add up to 1. Unchecked, the weights can add up to less than 1, which results in the vertex not moving as much. This may be desirable in some cases, and the ideal setting will depend on your usage. The weights will never add up to more than 1, regardless of the Normalize setting.

Weight Brush (Figure 08), This allows you to select a bone and paint its area of influence using a traditional digital paintbrush. Size, Hardness, and Step work as they do in paint programs such as Photoshop.

Figure 08: The Weight Brush works similarly to the paintbrush in paint programs.

4. Using the Skinning Editor

1. To start rigging a 2D Sprite, select the Sprite added to your project in the Project Window, and from the dropdown menu select: Window > 2D > Sprite Editor. Select the dropdown triangle to enter the Skinning Editor (Figure 09).

Figure 09: The Sprite Editor window showing the Skinning Editor dropdown.

2. Select the Edit Bone Button, and double-click on the Character Sprite to make the bones visible (Figure 10).

Figure 10: The Skinning Editor Window, with the Edit Bone button selected.

3. Lasso select the existing bones by dragging a box around them, and then press Delete to clear the skeleton. (On Mac OS X, hold down Command (⌘) + delete.)

4. Select the Create Bone button. Click and drag to create new bones, clicking along the character’s skin, pressing the ESC key when finished. If clicking doesn’t place the root of a bone, double-click your Sprite to enable editing mode. Place the root of the first bone in the bottom center of your character’s body. This bone will serve as the Sprite’s handle. Continue up the central column, with the last bone roughly in the center leaf on the character’s head (Figure 11). Try to follow the line of posture.

Figure 11: This first joint chain will control the motion of the character’s stalk.

5. Right-click or press the ESC key to break the chain, and click in another section of your character’s pose, such as an arm, leg, leaf or tendril, and beginning near the central column, add a couple of more bones to add to the skeleton.

6. Repeat Step 5 for the other 3 limbs (Figure 12).

Figure 12: The Character Sprite’s final rig

The Character Sprite’s skeleton is in place, but if you select Preview Pose and move the bones, the character doesn’t move. This is because the Mesh hasn’t been generated, or bound to the skeleton yet. We’ll do that now.

7. Select the Auto Geometry button. In the popup Geometry panel, select Generate for Selected (Figure 13).

Figure 13: With one click, Auto Geometry creates your Mesh, binds it to the skeleton, and automatically sets vertex weights according to proximity to the bone.

8. Select Apply at the top of the Sprite / Skinning Editor window to apply these changes (Figure 14).

Figure 14: The Skinning Editor window, with the Apply button highlighted.

9. Select the Preview Pose Button to move and rotate bones. Remember that any changes you make to the skeleton while in Preview Pose are just temporary, and will be lost when you switch modes.

Try using the Weight Slider controls to adjust vertex weights. Remember that the more a vertex is influenced by a bone, the more it will take on that bone’s color in the weight map. Any changes made since the last enabling of Apply can be undone by selecting Revert.

If you need to, you can use Auto Geometry to reset to a reasonably well-fitted rig.

Once your Sprite is rigged and you are happy with the settings, select Apply a final time and close the Sprite Editor.

You are almost ready to start animating your rigged Sprite.

10. Drag your rigged Sprite into the Hierarchy view to create a GameObject.

11. Add a Sprite Skin component to your sprite, by first selecting your Sprite in the Hierarchy Window, and then selecting the Add Component Button, and then searching for Sprite Skin (Figure 15).

Figure 15: The Sprite Skin component deforms the Sprite using the rig created in the Skinning Editor.

The Sprite Skin component will detect the joints as configured in the Skinning Editor, but there are no corresponding bones (Figure 16).

Figure 16: The Sprite Skin Component, showing that the bones still must be created.

Select the Create Bones button to populate the Root and Bones of the Sprite Skin (Figure 17).

Figure 17: The bones have been created as a Hierarchy of Transforms matching the layout of the joint Hierarchy in the Skinning Editor.

The bones are now visible in the Hierarchy (Figure 18). They can be selected, rotated, and transformed, as any other GameObject, and the Sprite Mesh will deform accordingly.

Figure 18: Each joint is now represented by a transform in a Hierarchy that reflects the one configured in the Skinning Editor.

5. Conclusion

You are now ready to start animating! To animate the rig, keyframe the position and rotation of the bones, just as you would with a skinned Mesh. For more information, refer to a separate tutorial titled: Animating a Sprite with the 2D Animation Package.