Guides

Animate with Bones

This guide will give you an introduction to animating with bones in ToonSquid. For a full in-depth explanation of all the details surrounding bones and rigging in ToonSquid, please refer to the handbook page of the bones effect.

What are Bones in Animation?#

In digital animation, bones are a widely used tool to simplify certain animation tasks.

When we want to animate a character that is made up of shapes or meshes with many control points, it would not only be time-consuming to animate each point individually with keyframes, but it would also be very difficult to maintain the correct proportions and shapes of the character at all times. Instead, we can separate the problem into two parts using the concept of skeletal animation.

We create a skeleton of bones – also called a "rig" – that forms the basic structure of the character and we define how this skeleton is connected to the character's visual parts – the layers, shapes and meshes. This connection to the bones (also called the "binding") allows us to simply animate the bones of the skeleton and the character will follow along.

A Bendable Arm With Vectors#

As a simple first example, let's try to use bones to create a rig for a bendable arm with a vector shape.

We start with a path layer that contains a stroked line with two control points.

To add bones to this line, we open the inspector, tap the + next to Effects and select Bones from the list. Now we have a bones effect on our path layer. You can also see that the editor automatically switched to the Add Bones tool.

We want the arm structure to consist of two bones - one for the upper arm and one for the lower arm - so that the arm bends in the middle. To create such a rig, we touch and drag from the base of where the upper arm bone should start to the center of the arm. This adds our first bone. Next, we drag from the center of the arm to its other end to add the second bone.

Because the first bone was selected when we added the second bone, a hierarchy between them is automatically created and the lower arm is added as a child of the upper arm bone. This means that rotating and moving the upper arm will also affect the lower arm.

If you want to add a bone without connecting it to another one in the hierarchy, deselect the selected bone first by tapping somewhere else on the canvas.

In order to move and rotate the bones to try out the rig, we switch to the Transform Bones tool. Now we can grab a bone to rotate it or drag the circular handle at its base to move it around.

When rotating the lower arm bone, we immediately see that the arm isn't behaving quite as we wanted. Instead of bending at the center, we still end up with a straight line between the base of the first bone and the tip of the second bone, even though there is now an angle between the two bones.

This is because the vector shape only has two control points. The bones bind to the existing control points of the vector shape. The amount by which a control point is affected by the movements of the bones depends on the distance between the control point and each bone and the strength of the bones.

In order to make our line bend when we rotate the bone, we have to add another control point in the middle of the line.

Tap the back arrow on the left above the tools and select the path tool.

At this point, you should immediately notice something: The line jumped back to its initial horizontal state, even though the layer still has a bones effect. That's because effects are automatically disabled in the editor when you switch to certain tools, such as the path tool. You can also see that effects are disabled because the FX button at the bottom is not highlighted.

We add a third control point in the middle of the line and then select the bones effect in the inspector. This automatically enables effects again and switches to the Transform Bones tool. Now, the line shape can bend around that new control point.

If we want the bend around the elbow to be smooth instead of a sharp corner, for example, to animate in a "rubber hose" style, we can go back to the path tool, select the middle control point and change its mode to Symmetric. The extended handles of the bezier curves will now keep the line smooth when you bend the bones.

Binding Bones To Multiple Layers#

In the previous example, we only had a single layer we wanted to animate with bones. However, most of the time when you create a rig, you want the bones to affect multiple layers at once. For that purpose, the bone and layer setup has to be slightly different.

In order to animate multiple layers at once with a rig, you have to create a group layer, place all layers that should be affected by the bones inside that group and then add the bones effect to the group layer. If necessary, you can then manually define which of the bones should bind to which layers in the group.

Important#

It is important that you don't add separate bones effects to the individual layers of your character but instead create the entire rig in a single bones effect on the group layer. Bones in separate bones effects cannot interact with each other or form a hierarchy and will therefore most likely not provide the results that you are looking for.
Also avoid creating a layer setup where some layers are controlled by multiple bones effects. This will lead to unpredictable results.

For example, let's take a look at this stick figure character. Its body consists of separate path layers inside of a group. We want to create a character rig that allows us to animate this entire stick figure using bones.

We select the group and add a bones effect to it. Then we add all of the bones that we need for our rig. Remember to select the bone which should become the parent of the bone you add next, but don't worry if you forget and end up with the wrong connections. You can always edit the bone hierarchy in the inspector without having to delete any bones.

There is still something we need to adjust. With this setup, all of the bones are bound to all of the layers, which is not entirely what we want. For example, when moving the bones of the right leg, we don't want the left leg, the arms or the head to be affected at all.

To customize the binding of a bone, we tap the bone and choose Edit Bone Binding. Next, we select a layer that should be bound to this bone. We repeat this step for all layers that should be bound to the bone and then move on to the next bone that requires a custom layer binding.

Bones and layers that are part of such a manually defined binding are only bound to the layers / bones that are part of this binding. They are not automatically bound to any other layer / bone any more.

With this step completed, we now have a rigged stick figure that we can animate by moving and rotating the bones.

Editing the Bind Pose and Fixing Mistakes#

Sometimes you need to make adjustments to a bone in the bind pose of a rig, for example because you realize that you didn't place the bone correctly or because some layer contents have changed. To do this, you don't have to delete the bone and start over. If you disable effects in the editor, you can use the Transform Bones Tool to edit the bind pose transform of each bone instead of animating the bones with keyframes.

Inverse Kinematics#

With inverse kinematics (IK), you can use a single bone - the IK target - to define where you want the tip of the last bone in a chain of bones to be. The positions and rotations of all of the bones in the chain are then automatically calculated to try to get the tip of the last bone as close as possible to the IK target position. This calculation is also referred to as "solving" the IK chain.

One way that we can make use of this for our stick figure rig is by adding IK targets to the feet of the character. That would have two benefits:

1. It would allow us to simply animate the feet and have the legs follow instead of having to keyframe all of the leg bones individually.
2. Placing the feet targets on the ground and moving the hip bone up and down would automatically update the legs to keep the feet on the ground. Doing this by hand would be very difficult to get right without ending up with feet that slide or feel floaty.

To add an IK target bone to one leg, we first have to make sure that no other bone is selected. If a bone is already selected, tap somewhere else on the canvas to deselect it.

Important#

The IK target must not be part of the bone hierarchy that it should control.

With the Add Bones Tool selected, we then add a new bone at the foot. Since we only want this bone to act as an IK target for the lower leg bone without influencing any of the character's layers directly, we reduce its strength to 0. We can also rename the bone to Right Leg IK Target to make it easier to select later.

Next we have to connect the leg to the new IK target bone. We tap the lower leg bone, in the inspector tap on IK Target and then select our IK target bone from the list. That's it. Now we can move the IK target bone and the leg will follow along.

You can learn more about inverse kinematics in ToonSquid on the bones effect handbook page.

IK Chains Bending The Wrong Way#

When animating with the help of the inverse kinematics constraint, you might sometimes notice that the bones in an IK chain suddenly bend in the wrong direction when you move the IK target, for example causing the knees of your character to bend inwards instead of outwards.

There are two reasons for this:

1. The IK solver does not know anything about the visuals and semantics of your animation, so any solution that gets the IK target as close as possible to the tip of the last bone is considered valid.
2. The solution of an IK chain on a given frame does not depend on the orientations of the bones on the previous frame. The solution is always determined from the current keyframed positions of the bones and the IK target.

Fortunately, we can use this knowledge to always manually point the solver towards the correct solution that we are looking for.

When you notice that the bones in an IK chain are bent in the wrong direction on a certain frame, you can grab the bones (optimally starting at the base of the chain) and drag the bone towards the direction that you want the chain to bend. The bone will not immediately follow your finger as you drag it, because its final position is still determined by the IK solver. However, dragging the bone still inserts rotation keyframes, which change the initial direction of the bone in which the IK solver will try to look for a solution. This way, once you drag the bones far enough, the IK chain should snap into another correct solution (if such a solution exists). You can repeat this process with the other bones if necessary until all bones are oriented correctly.

Adding Custom Meshes#

Not all layer types automatically deform in the same way that vector shapes do when they are bound to bones.

Pixel layers that are bound to bones are warped as if they had a warp effect attached to them. When bones are bound to any other layer that has transform properties (e.g. symbol layers or text layers), the bones will control the position, rotation and scale of the entire layer.

In order to have full control over how a layer deforms - and to make symbol and text layers deform at all - you have to add a mesh effect to the layer. The mesh effect allows you to define a custom triangle mesh on top of which the contents of your layer will be displayed. The bones effect will bind to the individual vertices of the mesh and move them around, which then in turn deforms the layer contents.

When creating the mesh, try to create smaller triangles covering the layer regions with fine details and where you expect heavy deformations to take place. Smaller triangles result in smoother deformations and less visible seams caused by distortion differences between neighboring triangles. You can use larger triangles in areas where you don't expect much deformation or areas that only contain a single color.