Have you been looking for an easy way to create skeletal animation for your 2D sprites? We’re introducing our own 2D Animation package, which allows you to rig 2D sprites, paint bone weights, and create skeletal animation, all in-editor! On top of that, there is support for Inverse Kinematics as well. You can check the feature out right now – it’s been available as a package in preview since 2018.1. Read on to learn how to use it effectively in your projects right now.
Getting the Package
2D Animation is currently shipped as a preview package, which means you can use Unity’s Package Manager to install it for your project. The Package Manager is accessible from Unity 2018.1 or higher. Make sure to also grab the 2D IK package if you are planning on using Inverse Kinematics too – they will be covered in a separate blog post, coming out later this month.
Notes on Importing Assets
In order to start animating, we’re going to need a couple of things: the first is, of course, the sprite that we wish to animate. It can be anything you want – a character, a monster, an object… you name it!
There are a few things to keep in mind when importing your sprites for 2D Animation. First of all, there is currently no layer support. This means that if you wish your rig to use multiple disjointed sprite meshes, e.g. for arms and legs, you will need to space them out directly on one layer. Full layer support is planned to be included in a later release of the package – where it will support layer import from PSD and other file formats. In addition, there is currently no integration with Unity’s new Vector Graphics package, which includes SVG file import. Support for this is also in the works.
With all of that in mind, let’s import your sprite. The example we use in this article is Ríkr the Viking. We’ll make this character available for you to experiment soon. It has been divided into multiple sprites and re-arranged on one layer:
Building a 2D Skeleton
All of the 2D rigging happens in the Sprite Editor. To access it, select your character sprite asset, and then in the Inspector window you will find the Sprite Editor button.
In the top left-hand corner of the Sprite Editor, you will see a dropdown with the Sprite Editor selected. Change that to the Bone Editor, and from here, we can start creating the first bones of our rig! In the bottom right-hand corner, you will see an array of bone-editing tools.
To add your first bone, choose the Create Bone tool (shortcut ‘B’). If you now left-click anywhere in the Bone Editor, you will set the starting point of your Root bone. Left-clicking again will define the endpoint of the bone and the start of the next one. Right clicking will cancel the creation of the bone:
Root Bone Placement
When you are creating the root bone of your skeleton, you may want to consider what type of root bone placement will be the most optimal for your use case. Generally, there are two approaches to this – the first is to put the root bone at an arbitrary point outside of the mesh, usually between the character’s feet – using it as a so-called origin point; the second is to place it at the hips of the character and make it also act as the hip bone. The main point to consider here is whether you plan to implement Root Motion. It is typically easier to do if you isolate the root bone from the rest of the skeleton so that when you do want to use Root Motion, you can simply move the origin to move the whole character. This workflow is also useful when you want to create animations that change the hip placement, but don’t want them to change the root position.
Bone Editing Tools
There is a selection of other bone editing tools accessible from the Bone Editor. One of them is the Free Bone tool (‘N’). It allows you to create a bone which still has a parent bone but is not directly connected to it. The Free Bone tool is useful for when you have a root bone at the origin which does not connect with the actual mesh of the sprite, as well as for when the elements of your sprite are divided into multiple parts – in this example, we can use free bones to connect our character’s limbs to the rest of the skeleton. Later, when we create our animations, we will be able to move each free bone to a desired position relative to the body of the character, so that they appear to form one complete sprite:
The other tools allow you to Split (‘S’) an existing bone into two equal, smaller ones; Parent (‘P’) one bone to another; as well as Move (‘M’) any existing bones that are currently attached, turning them into free bones. Creating a bone by mistake is no big deal – you can get rid of a bone by selecting it and pressing Delete or using the equivalent tool from the tools panel.
Once you’re done editing your skeleton, make sure you click the Apply button at the top right of the Sprite Editor UI! Otherwise, you will lose the changes you have made.
Note: It’s a good practice to give descriptive names to your bones. If you have complex skeletons, navigating their hierarchies later will be much easier if you know what you are looking for!
Creating a Sprite Mesh
Once we have a complete rig, we can go ahead and generate the mesh for our sprite. Our mesh, together with bone weights which we will add later, will determine how our sprite gets deformed when we move and rotate the bones in the rig. In the top-left dropdown mentioned earlier, select the Skin Weights and Geometry Editor.
From here, you can create your sprite mesh manually by adding vertices and edges. The tools for doing so are found in the top toolbar: Create Vertex, Create Edge, and Split Edge. However, this can be quite time consuming, especially if your sprites have detailed and complex outlines. For this purpose, Unity gives you the option to automatically generate your mesh, using a set of pre-defined parameters.
In the top tool panel, click on the Generate dropdown.
Here, you can set the Outline Detail of your mesh – which will determine how precisely it fits the graphic.
Alpha Tolerance will determine how much transparency is taken into account when creating the mesh. Higher values will usually mean a mesh that more precisely fits the pixels (usually with quite a bit more vertices), however, if you set it too high, you might end up excluding semi-transparent segments of your sprite from the mesh. Also, keep in mind that extremely high-detail meshes might create a potential performance concern.
The Subdivide level determines how many vertices (and therefore polygons) are created on the inside of the mesh, and might be useful for when you want to create facial animation or otherwise deform elements on the inside of your graphic. It is also useful for better mesh tessellation in case you wish to use custom lighting shaders.
Generally, a good workflow here is to use the auto-generated mesh as a base, and add or remove details by hand where necessary using the editing tools.
Painting Bone Weights
Once we’ve created our mesh, we need to add some bone weights to it. These will determine which vertices of the mesh are affected by each bone, and by how much. To start editing bone weights, in the top panel switch the editing mode from Geometry to Weights.
Right away, you will notice that there is a new tool panel at the bottom right of the Sprite Editor. Using it, you can paint bone weights by hand; but just like with the mesh, you can generate the weights automatically with the Auto tool.
While editing weights, you can also preview how the various parts of the mesh will be deformed when they are moved. To do so, you can select any bone in the skeleton by clicking on it, and try and move or rotate it to preview how the mesh is affected. You can also reduce the visibility of the painted weights and bones by adjusting the sliders in the top toolbar. This way you’ll get a better idea how the sprite will look in the scene.
Bone weights will generally need more fine tuning than the mesh – you likely want precise control over which vertices get moved by each bone. The Brush and Slider tools in the bottom toolbar exist for this exact purpose!
The Brush tool allows you to paint the weights directly onto the individual vertices of the mesh. You can change the Size of the brush, which determines how many vertices it affects; and the Hardness and Step settings allow you to determine how much the weight of one bone will overlay the weight of another if there is more than one bone influencing a vertex.
You can start painting weights using the Add and Subtract mode. Simply choose a bone that you want to add weights for by either clicking on it in the Sprite Editor window or selecting it from the brush tool drop-down:
The Slider tool allows you to more universally distribute bone weights, and much like the brush tool, it works differently based on the selected Mode.
The Add and Subtract mode, in this case, allows you to add a selected bone’s influence to the whole mesh; while the Grow and Shrink mode increases or reduces the bone’s already existing area of influence, and therefore is more confined to the vertices directly around the bone.
The Smooth mode is used to even out transitions between all bone weights in the skeleton. Using this mode with the brush tool allows you to do the same, but only for localized areas.
Changing Bone Depth
When rigging your sprite, you will most likely want to have control over how its parts will overlay each other. For example, you might want the right arm of your character to appear in front of the body, and the left arm to be behind the body, and so on. As such, 2D Animation allows you to set the render order of your bones, called Bone Depth.
Bone Depth is configured in the Weights editor and is set per-bone. To change the render order of a bone, select it in the editor window. At the bottom left of the window, you will see an Inspector pop-up. Here, you can set your rendering priority. Higher values mean that parts of the mesh associated with that particular bone will overlay those with lower values. By default, all bones have a depth of 0.
Using the Rig in the Scene
Once you have set up a rigged mesh and painted bone weights, you will be able to use it in the scene. To do so, first drag the rigged Sprite asset into the scene, and add a Sprite Skin component to it. If a sprite contains a skeleton, you will have the option to Create Bones, which will instantiate that skeleton in the scene.
From here, you are free to move and rotate the bones however you wish to achieve the desired pose for your character. To rotate a bone, either select it and use the Rotate tool (‘E‘), or grab the end of the bone and drag it in the desired direction. To move a bone or detach it from its parent, use the Move tool (’W’) or grab it at the origin and drag. To reset the bones to their default position in the rig, you can use Reset Bind Pose in the Inspector. You can also select multiple bones to rotate them uniformly as a group – this might be useful when trying to create rounded shapes, such as those for hair or roots.
Creating Animation Clips
Let’s do a quick walkthrough of how you can use your newly built skeleton to create a complete 2D animation!
With the 2D Animation package, you can create skeletal animations just like you would in 3D projects before. The simplest way to do so is to select the rigged sprite and open the Animation window (Window > Animation > Animation). From here, you will be prompted to create an Animator component, and the first Animation Clip for this game object. Once you click Create, you can choose the folder where you wish to save these components, and name your first Animation Clip. An Animator asset will be created automatically, but you can rename or move it wherever you wish. Alternatively, you could create the Animator first (Assets > Create > Animator Controller) and attach it as a component onto the game object. After that, you only need to create the Animation Clip.
All the animating work happens in the Animation window – you can have multiple Animation Clips per Animator. To create new clips, at the top left of the Animation window you will find a dropdown with the name of the currently selected animation clip. If you click on it, you will see the option to Create New Clip.
At the start of your animation, it is a good practice to keyframe all of your bone positions and rotations – even if you aren’t going to change all of them. Otherwise, if you later move or rotate the bones in the scene that haven’t been affected by the animation, they will keep their transforms from the scene, which often changes the animation in an undesirable way.
In order to keyframe all of your bones and start recording the changes in the animation, you must first enable recording mode in the Animation window by pressing the red button at the top toolbar. To create your initial keyframe, select all the bones of the rig in the Hierarchy window, and in the Inspector you will be able to right-click the Position and Rotation transforms and choose to ‘Add Key’. This will create keys for all selected bone positions and rotations, respectively. To make sure you’ve selected all the bones and their children, you need to expand your bone hierarchy before you select everything. A quick shortcut to doing this and making sure you don’t miss any bones is to hold Alt (or Option for Mac) and Left Click on the root bone. This will either collapse or expand all of the root’s nested children.
From here, while in recording mode, you can move the animation playhead to a new position, and start rotating or moving the bones in the scene to automatically create new keyframes.
You can move keyframes along the animation timeline by selecting and dragging them to a desired point; or copy and paste selected keys with familiar shortcuts – Ctrl (Cmd) + C and Ctrl + V respectively. Once you’re done editing the animation, you can exit recording mode and use the Play button to preview the animation.
And now you’ve got everything to get you started with creating your own skeletal animation! Here’s an example clip of a walk cycle for our viking that can be put together really quickly:
There is additional information on working with 2D Animation in the preview docs, currently available on the feature’s GitHub repository.
On the same repository, you will find several sample projects that you can play around with which demonstrate the basics of the workflow described in this blog post.
Stay tuned to this blog and learn how to get Started with 2D Inverse Kinematics in the second part of this series.
We would love to see what you are creating with our new 2D packages, and to hear about your experience using them!
That’s one of the reasons we launched the Unity 2D Challenge. Create a small piece of content using some of our new 2D tools and you can win cash prizes and tickets to Unite! It can be anything from some pixel-perfect art to a thin vertical slice of a 2D game. The challenge is open for submissions until December 17, so now is a great time to get started.
You can also share your thoughts and projects with us on the 2D Animation Forum!