Skip to main content

🦴 Lesson 11.2: Skeletal 2D Animation

Drawing every frame by hand is beautiful but slow. Skeletal 2D animation takes a single drawing, gives it a skeleton, and lets you pose it like a puppet — bend an elbow, turn a head, wag a tail — without redrawing a thing. In this lesson you'll install the 2D Animation package, rig a sprite in the Skinning module, and learn the honest trade-offs against the frame-by-frame approach from Lesson 11.1.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Install the 2D Animation package and understand what it adds to the Sprite Editor
  • Create a bone chain for a character in the Skinning module
  • Generate a mesh and paint weights so each bone deforms the right part of the sprite
  • Understand the PSD Importer and why layered art makes rigging dramatically easier
  • Decide when to use bones vs. frame-by-frame for a given character or effect

Estimated Time: 45 minutes  ·  Prerequisite: Lesson 11.1 (Frame-Based Sprite Animation)

In This Lesson

From Flipbook to Puppet

In Lesson 11.1 you animated by swapping whole drawings. Skeletal animation animates by deforming one drawing. You place a skeleton of bones inside the sprite, tell Unity which pixels each bone controls (that's weight painting), and then rotating a bone bends that region of the artwork — exactly like moving a marionette's limb pulls the puppet's arm.

The huge win: one sprite, unlimited poses. You author keyframes on the bones in the same Animation window from last lesson, and the artwork follows. No redrawing, tiny memory footprint, and you can retarget or tweak a walk cycle in minutes.

📖 Definition

Skeletal (bone-based) animation: deforming a single mesh by transforming a hierarchy of bones bound to it. Each vertex is influenced by one or more bones according to its weight. It's the same principle as 3D character rigging, applied to a flat sprite mesh.

Installing the 2D Animation Package

Bone rigging isn't in Unity out of the box — it ships as a package. Open Window ▸ Package Manager, switch the dropdown to Unity Registry, find 2D Animation, and click Install. It pulls in the 2D SpriteShape and PSD Importer dependencies alongside it.

Once installed, the Sprite Editor gains a new mode. Select your sprite, open Sprite Editor from the Inspector, and use the top-left dropdown to switch from Sprite Editor to Skinning Editor. That's where all the rigging happens.

✅ Pro Tip

If your project was made with the 2D template, the 2D Animation package may already be present. Check the Package Manager's In Project list before installing — duplicate installs aren't possible, but it saves you hunting the registry.

The Skinning Module: Bones & Weights

The Skinning Editor is the heart of this lesson. It's a dark tool window showing your sprite in the center, a toolbar of rigging tools down the left, and a bone/sprite hierarchy on the right. You work in three passes: create bones, generate the mesh, then paint weights. Here is a character rigged in that window, drawn faithfully:

The Unity Skinning Editor with a rigged character sprite A recreation of Unity's Skinning Editor. A dark window with a vertical tool rail on the left holding icons for Create Bone, Edit Bone, Create Vertex, Generate Geometry, and Weight brushes. In the center a humanoid character sprite is overlaid with an orange bone chain running from a root at the hips up the spine to the head, and out to each arm and leg. The character's body is tinted in coloured weight regions — the torso blue, the upper arm green, the lower arm yellow — showing which bone controls which pixels. On the right is a bone hierarchy panel listing Root, Spine, Head, Arm_L, Arm_R, Leg_L, Leg_R. Skinning Editor Skinning Editor ▾ AUTO Spine Upper arm Lower arm Bones Root Spine Head Arm_L_Upper Arm_L_Lower Arm_R_Upper Arm_R_Lower Leg_L Leg_R
Figure 1: The Skinning Editor (faithfully recreated). The orange chain is the bone hierarchy; the coloured tints show weight regions — which bone deforms which pixels. The tool rail (left) creates bones, generates the mesh, and paints weights; the panel (right) lists the bone hierarchy.

The three passes

  1. Create Bones. Pick the Create Bone tool and click to place a root at the hips, then click outward to chain bones up the spine, into the head, and out to each limb. This builds the hierarchy you see on the right.
  2. Generate Geometry. A flat sprite is a single quad — too coarse to bend smoothly. The Generate Geometry tool triangulates the sprite into a fine mesh so it can deform. Auto-generate first, then add or move vertices around joints if needed.
  3. Paint Weights. Each vertex needs to know how much each bone moves it. Auto Weights gives a solid first pass; then use the Weight Brush to fix problem spots — usually where an elbow or shoulder pinches.

⚠️ Bad weights = melting characters

If bending a bone drags pixels from a neighbouring limb along with it, the weights are bleeding across regions. Select the offending vertices with the Weight Brush and reduce the wrong bone's influence. The Skinning Editor's Visualize heat-map (the coloured tints in Figure 1) makes these leaks obvious.

The PSD Importer

Rigging is far easier when the character's parts are already separated — head, torso, each arm, each leg on their own layer. That's exactly what the PSD Importer package gives you. Import a layered .psb file (Photoshop's big-document format) and Unity brings in each layer as its own sprite, keeps them positioned correctly, and can auto-build a bone-ready character.

  • Set the importer's Mode to Sprite (2D and UI) and enable Use as Rig / Mosaic so each layer becomes a skinnable sprite.
  • Layers arranged head-over-torso-over-legs give you a clean draw order automatically.
  • You can re-open the source art, tweak a layer, and Unity re-imports without you re-rigging from scratch.

You don't need the PSD Importer — you can rig a single flat sprite too — but for anything more complex than a simple mascot, layered art is the professional path.

💡 One character, many parts. Because each limb is a separate sprite, you can also do sprite swaps — replace just the "arm holding sword" sprite with "arm holding shield" while the same skeleton keeps animating. That's how 2D games change gear or expressions without new rigs.

Animating the Rig

Here's the thread back to Lesson 11.1 and Module 1: once rigged, you animate the bones in the same Animation window, and the resulting clips drop into the same Animator state machine. Nothing new to learn on the playback side.

flowchart LR A["Layered art
(.psb via PSD Importer)"] --> B["Skinning Editor:
bones + geometry + weights"] B --> C["Animation window:
keyframe the bone rotations"] C --> D["Animation Clips
(Idle, Run, Attack)"] D --> E["Animator state machine
(same as Module 1)"]

Figure 2: The skeletal pipeline. Only the middle steps are new; the clips and state machine at the end are exactly what you already know.

To keyframe, open the Animation window, press record, rotate a bone in the Scene view, and Unity keys the bone's rotation. Build an idle sway, a run cycle, an attack swing — each becomes a clip, wired with Speed/Grounded/Jump parameters just like Lesson 11.1.

Bones vs. Frame-by-Frame

Neither approach is "better" — they solve different problems. Choose deliberately:

  • Use bones when the character has many animations (walk, run, jump, attack, hurt), when you want smooth, tweakable motion, when memory matters (one texture, many poses), or when you'll swap gear/expressions on the same rig.
  • Use frame-by-frame when the art style is hand-drawn and expressive (squash, stretch, smear frames a rig can't fake), when the animation is short and one-off (a coin spin, an explosion), or when an artist wants full control of every frame.

Many shipped games mix both: a bone-rigged hero for responsive locomotion, and frame-based clips for flashy effects and pickups.

✅ Pro Tip

Prototype with frame-by-frame (it's faster to get something moving), then invest in a bone rig only for characters that earn it — the ones with a large animation set. Don't rig a spinning coin.

Hands-on Challenge

🏋️ Exercise 1: Rig a simple character

Objective: Get one bend working end-to-end.

  1. Install the 2D Animation package from the Package Manager (Unity Registry).
  2. Select a character sprite, open the Sprite Editor, and switch to Skinning Editor.
  3. Use Create Bone to place a root at the hips and chain bones up the spine and out one arm.
  4. Run Auto Geometry, then Auto Weights.
  5. Grab the arm bone with Preview Pose and rotate it — the arm should bend and the artwork follow.
💡 Hint: rotating a bone tears the sprite apart

Either the mesh is too coarse (re-run Generate Geometry with more detail near joints) or the weights are wrong (the wrong bone owns those vertices). Paint the correct bone's weight up on the limb with the Weight Brush.

✅ Success check

Rotating the upper-arm bone bends the arm smoothly at the shoulder without dragging the torso or the other arm along with it.

🏋️ Exercise 2: Choose your tool

For each of these, decide bones or frame-by-frame and justify it in one sentence: (a) the player's hero with 8 animations, (b) a spinning collectible gem, (c) a boss with a big hand-drawn squash-and-stretch attack, (d) a background flag waving in the wind. Then build the one you're most excited about.

🎯 Quick Quiz

Question 1: What does weight painting decide in the Skinning Editor?

Question 2: Which package do you install to rig a sprite with bones?

Question 3: When is frame-by-frame the better choice over bones?

Summary

🎉 Key Takeaways

  • Skeletal 2D animation deforms one drawing with a bone skeleton instead of swapping many drawings.
  • Install the 2D Animation package, then rig in the Skinning Editor: create bones, generate geometry, paint weights.
  • Weights bind vertices to bones; bad weights make characters melt or pinch — fix them with the Weight Brush.
  • The PSD Importer brings layered art in as separate, rig-ready sprites and enables sprite swaps.
  • Animated bone clips feed the same Animator state machine from Module 1 — bones are new, playback is not.
  • Bones for large, tweakable animation sets; frame-by-frame for short, expressive, hand-drawn motion.

🚀 What's Next?

Your character can now move beautifully — but it's floating in flat, evenly-lit space. Real 2D atmosphere comes from light: warm lanterns, cold moonlight, dramatic shadows. In Lesson 11.3: 2D Lights & Shadows you'll switch on the URP 2D Renderer's lighting system and give your scene mood.

🦴 You can rig a puppet

Bones, geometry, weights — a single sprite now bends to your will, and its clips slot into the very same state machine you've used all along.