New series of Spine Twitch streams

June 1st, 2020

A new series of Twitch streams will begin on the 11th of June and continue every Thursday at 4pm CET with our host Erika! You can ask questions live and interact with Erika as she shows off rigging in Spine.

Follow the Esoteric Software Twitch channel to be notified of the start of a stream.

If you can't make it for the stream, don't worry! We'll be uploading the recording on our Twitch streams archive page.

The subject of this cycle of streams is going to be the rigging process of a lovely new mascot designed by Natalia Marcos and Siniša "Sinke" Mataić. Can you guess what it is?

Multi-direction characters have become widely popular in Spine and we've recently added a number of related features to Spine, so we figure it is a good time to make a new series of streams that show the techniques that make the best use of the new features.

Let us know your comments and opinions on the forum.

Mesh weight workflows

May 18th, 2020

Weights let you bind the vertices of a mesh to bones. Instead of using free form deformation on individual vertices, you can move vertices by moving the bones they are bound too. Using bones to deform meshes makes it easier to control complex mesh setups and is much more efficient then setting deform keys.

In our previous blog posts on mesh creation tips and a taxonomy of meshes we've discussed the foundations of creating meshes. Here we continue our exploration by discussing workflow tips for assigning weights to your mesh vertices.

One mesh, multiple outputs

Given the same mesh, we can achieve very different results by using different bones and weights to manipulate the vertex positions.

For example this tip shows a cube, weighted so that it pivots around the bone in the front:

Here is the same cube mesh, with the same set of bones, but with the weights reversed so the mesh pivots around the bone in the back of the cube. The reversal is done by inverting the weights and the list of bones the mesh is weighted to.

Here is the same cube mesh again, but with weights set so that the cube pivots around the axis between the vertices in the left and right corners:

Planning ahead

In our previous blog posts on meshes, we established simple rules for placing mesh vertices based on the mesh's purpose. We can extend this purpose-based thinking to setting weights. Thankfully, we already did most of the planning when we decided the structure of the mesh.

We've already seen some examples of this purpose-based thinking for weights in the previous section, which considered around which bones the mesh and its vertices should pivot.

What we need to answer when setting weights is the following question: which vertices should be moved by which bone to fulfill the purpose of the mesh?

To make our life easier, we should always strive for simplicity. When setting weights, this means we want to weight vertices to the minimum number of bones necessary for the mesh to fulfill its purpose. The fewer bones we have to deal with to manipulate a mesh, the easier it becomes to animate the mesh.

Here's another example: we can turn our rather static cube into a bendy, jelly cube by first modifying its mesh structure to allow bending, then setting the weights so the bending can be easily controlled by a single bone. Note that this setup only allows us to bend the cube as illustrated in the GIF below. Limiting the cube's "purpose" this way allows the setup to be simple.

Be mindful of when you bind meshes to bones

By binding meshes in animate mode, you can create advanced setups that add alternative poses which use a different configuration of bones. We've described this process in this blog post, where two different poses of the same wing are bound to the same set of bones.

However, for new users this freedom could be dangerous if used carelessly.

A mesh will remember the position of the bones at the time it was bound to them. A common beginner mistake is to move a bone around, bind a mesh to it, then move the bone back to its original place. Doing this causes the vertices to move when changing the weights, as the bone position is now different from the position it had when we bound the vertices to it.

When binding a mesh in animate mode, the chances of this accidentally happening are even higher, as we tend to move bones around a lot more in animate mode than in setup mode.

Therefore it is almost always best to bind your meshes in setup mode, unless you specifically need to bind a mesh in animate mode to add an alternative pose.

Fortunately, if this kind of little accident happens, it is possible to assign a new binding position to the selected mesh by pressing the update bindings button. This will update the bone positions that the vertices "remember" to the current bone positions, discarding the previous positions.

Set and test weights in animate mode

Weights are set automatically the first time a mesh is bound to bones. To see the effect of our weights, we might be tempted to move the bones around in setup mode. It can be fine to move bones to see how the weights deform and then use undo, but as explained in the previous section, moving the bones in setup mode means the vertices will move when weights are adjusted.

How can we make this process safer? By setting weights directly in animate mode! Create a test animation in which the bones that should deform the mesh are moving, then adjust the weights until you're happy with the results.

This is especially useful when simulating depth or dealing with complex meshes. Seeing your weights in motion makes it so much easier to adjust them compared to setting them while looking at a still pose.

Pressing Ctrl (Cmd on Mac) temporarily pauses the animation, making it easier to select the vertices with the weights direct tool.

Start from extremes

When testing the effectiveness of the weights assigned to a mesh, always start from the extremes. That is to say, the two most opposite values or positions. We can apply this process to bone positions as well as weights, giving us two different workflows.

The easiest way to set the weights for a mesh is to start by assigning a value of 100% to the vertices that are on the extreme opposite ends of the movement the mesh needs to make. Next, work on getting the vertices in between to balance the mix of weights in an amount that follows the movement planned for the mesh. This applies to nearly all meshes except the simple meshes, which are concatenated instead.

For example, for meshes that are simulating depth, start with the vertices that are the farthest away from the viewer and assign the initial weights of 100% to the bone that will control them. Next, identify the vertices that should be the closest and assign them 100% influence to the bone that will control those. Finally, while playing a test animation, adjust the weights for the vertices in between to achieve the depth effect.

The other way to start from extremes consists of moving the bones controlling the mesh to positions or poses that are beyond what will actually be needed when animating. If a leg should bend, break it a little by going slightly beyond the possible angles. If a face should rotate in space, push it to the extreme limit (which sometimes can look rather comical).

The reason to do this is that at such extremes the fine tuning of the weights becomes easier because the weights that need to be corrected stand out. Also, supporting a greater range of motion can provide the animator with more freedom.

Often multiple passes are needed: after everything looks fine in one direction or extreme position, test the opposite extreme and fix any weights that don't look good. Then place the bones in the previous pose to see if anything went out of place when fixing the other direction.

After everything looks good in all the extremes, the in between poses will likely already look fantastic.

Group weights

Another way to simplify the process of assigning weights is to find groups of weights that can have all the same weight, or close to it to start with.

Meshes that bend only from a side view make this process quite easy. For example, if you want an arm to retain its shape in the upper part, you will need to select at least 4 vertices and weight them all to the upper arm bone. Then repeat the process for the lower part of the arm. With that out of the way, figuring out the weights for the vertices at the elbow, where the arm bends, is much easier. These can also be selected in pairs of two vertices if the mesh is tubular.

Meshes that simulate depth are a bit trickier. Imagine dividing the mesh into several slices. The slices could be at regular intervals from the part of the mesh that is the most far away toward the part that is the closest to the viewer. Each of these slices is a group of vertices that has the same weights because it's at the same depth from the viewer.

Even if the weights won't have the exact same weights in the end, having a general approximation is still very useful before fine tuning the weights that are not quite right yet.

This principle is similar to parallax scrolling, where groups of images move at different speeds to simulate depth.

Start from the parent

When a mesh is bound to more than two bones, it is a good idea to start weighting the mesh from the bone highest in the tree hierarchy and then descending one bone at a time. If the bones are independent, meaning one bone is not parented to the other, then you can simply choose to start from one side of the mesh and progress toward the other side.

Starting from the parent bone lets you to define the general motion first. You can then move on to the child bones to add detail to mesh sections that depend on the parent bone's weights.

For example to recreate the jelly cube, set the weights so it can bend nicely first. Next, add the weights of the the third child bone that controls the top of the cube.

Spine can do the math

Manually setting weights so that vertices are progressively more influenced by bones can be tedious. The quickest way to make a soft bending mesh is to weight half of its vertices 100% to one bone, and the other half to the other bone, then box select the weights in the middle, and press the Smooth button until the result satisfies you.

A similar result can be achieved by weighting a mesh with fewer vertices, then later adding more vertices to the mesh. Spine will automatically calculate the weights for you based on the surrounding vertices.

Overlapping triangles

When the mesh overlaps with itself, sometimes a part of the image that should be behind is instead drawn on top. When that happens you can fix it by changing the triangle order.

It can be useful to sort the bones a mesh is bound to so that the bone farthest away is the lowest in the list and the closest bone is at the beginning of the list. Assign vertices more weight to the bone that better represents their drawing order to resolve any overlapping issues.

Just like weights, the order of bones in the weights view for a mesh cannot be keyed in an animation. This also means that any adjustments to the triangle order will be reflected in all animations.

Mesh cleanliness

Unnecessary weights may be present in your mesh after calculating weights automatically, smoothing, or painting the weights on the mesh. Pruning these weights improves performance, reduces file size, and also makes the weights more manageable.

It may also happen that after setting the perfect weights, several vertices turn out to all have the exact same weights. Removing these extra vertices by editing the mesh and deleting them is another great way to improve performance and making weight adjustments easier.

Deform keys are the devil

This whole post is about weights, but what about deform keys? Many new Spine users are tempted to use deform keys to deform their meshes. Deform keys are powerful and have their place, but in most cases using weights is superior for a number of reasons.

First, keying a mesh's deform will key all the vertices together. For example, if your mesh is a head and you use deform keys to animate the ears flapping, you won't be able to come back afterward and animate moving the nose because every key to animate the ears also keyed the nose vertices. You would need to use a straight ahead workflow to animate both the ears and nose together. It is difficult to get this right on your first pass, and it is difficult to go back later and adjust the existing keys. The problem gets worse the more elements you want to animate in the same mesh, like the eyes or mouth.

When using weights, you would assign vertices for the ears and nose to different bones. You then key the bones separately rather than keying the entire mesh.

The other reason to avoid deform keys is that each deform key stores a vertex position for every bone that the vertex is weighted to. If you have 40 deform keys and 100 vertices and each vertex is weighted to 4 bones, those keys will be storing 40 * 100 * 4 = 16,000 vertex positions! This gets worse and worse as you add more meshes and deform keys and can result in your skeleton data being much larger than necessary.

When using weights, you only key the bones and those keys only need to store a little bit of information.

The movement when interpolating between deform keys is always in a straight line, while weights allow vertices to move more dynamically by using bone rotation, scale, or shear, or by having a vertex bound to multiple bones.

Lastly, it's a bit more efficient at runtime to animate bones than it is to apply deform keys. In both cases the vertices are still transformed by the bones, but additional work is required to interpolate between the deform keys.

So when should you use deform keys? Rarely and sparingly! They make sense if you really need to move each vertex separately and it would take many bones to do so with weights. Keep in mind that deform keys can be combined with mesh weights. Sometimes weights provide all the desired deformations, except for a specific pose where they don't quite deform as needed. In that case it can make sense to use a deform key or two to get the mesh to behave exactly as required.

Conclusion

We hope these tips can help you tackle weights and meshes in general and with more confidence. If you haven't already, don't forget to check the two previous blog posts exploring mesh creation tips and a taxonomy of meshes. What would you like to learn about next? We would love to hear your thoughts on the Spine forum.

A taxonomy of meshes

May 4th, 2020

Meshes are one of the most versatile and powerful Spine features. In a previous blog post, we discussed tips for mesh creation, and specifically vertex placement strategies.

In addition to vertex placement strategies, we can also categorize meshes into 3 broad types to pick and choose from, making it easier to decide how to create a mesh for a specific image.

Simple meshes

This first kind of mesh can be deceiving in its apparent simplicity. This type of mesh consists of only 4 corner vertices, which can be created by selecting an attachment and checking the Mesh checkbox in the attachment's properties panel.

This kind of mesh usually doesn't appear alone in a skeleton, but comes in greater numbers! Using many such simple meshes can help us simulate depth or complex conjoined movements. The high number of these little pieces allows us to model complexity, even if the individual parts aren't complex at all.

We can create chains of simple meshes, where each mesh has different weights. The weights of a single mesh of that chain can again be kept simple: most of the time, all vertices of a single simple mesh have the same weights! The power and flexibilty comes from the combination of these simple meshes.

An example of this is the whipped cream on the top of this cake:

cake

The eyes in the Owl example project are also made up of simple meshes, each having 4 vertices with the same weights. But the weights differ between meshes. This lets us create what is essentially a parallax effect:

owl-setup-eyes

owl-moving-eyes

In other cases we may retain the basic vertices structure, but weight individual vertices differently, as shown in this video:

fisherpelican-setup

boat-result

In this case the little pieces help us simulate depth and fake perspective distortion.

Bending meshes

This second kind of mesh is meant to bend, like in the case of arms, legs, or anything that should bend in its middle section.

Bending meshes usually feature a slightly higher overall number of vertices, and exhibit symmetry using internal vertices and edges in addition to the vertices on the meshes hull. They may also sometimes feature more vertices in critical areas that need to bend nicely.

Tubular meshes

This kind of bending mesh is usually composed of a hull which is as close to straight as possible, and horizontal and/or vertical edges on the inside, creating symmetric sections.

You can follow the creation of such meshes in this stream for a fishing rod, and in this stream for a bendy arm.

Hair strands, tails, and other soft bending meshes

These meshes are the crooked little siblings of tubular meshes. Their hull generally follows the shape of the image. Internal edges are then created to enable clean bending along the main axis of the image.

Semi-rigid bending meshes

These meshes still have bending as their main purpose, but thanks to weights they have a more rigid structure in specific areas. These meshes are especially suited for arms or legs, and tend to have two or more rigid parts of the mesh separated by a smaller bending area in the middle of the mesh.

Complex meshes

Meshes that also need to enable complex movements on top of (optional) bendiness, or which aren't at least somewhat symmetric are called complex meshes.

There are infinite applications for such meshes, including things like complex perspective distortions, faces, clothing, and so on. They often feature a complex hull, with internal vertices and edges where folds or lines are present in the image, or at the sides of facial features instead of featuring simple parallel lines. We've looked into the creation of these types of meshes in our previous blog post.

Simple meshes serving a complex purpose

Meshes that are meant to be distorted by partially following a bone through weights to end up in a significantly different shape fall in this group.

Examples of this would be the meshes for the eyelids that allow the character to blink, bird wings which fly in perspective, or a tank whose cannon can shoot.

We consider them complex because the shapes they can take on, and the weights required to achieve these shapes after distortion is not necessarily obvious and may vary depending on the kind of movement they are required to perform.

eyes

Depth simulating meshes

This subtype includes meshes that are used to simulate depth as their main or sole purpose. This can be achieved with as little as one mesh and two bones and multiple techniques, and it can be applied to all sorts of images. The best results can be achieved with clear edges and vertices of the mesh match the edges in the underlying image.

Props

Many so called props, objects that are part of the scenery or that can be equipped by a character, often require the simulation of depth. These objects usually have clearly defined edges which are modelled by the mesh structure to make perspective distortion and a sense of depth possible.

Examples of such props are treasure chests and hand held objects, such as swords, or guns.

backpack

Faces

Meshes of faces can also fall into this category if the can look into different directions, thereby requiring a bit of perspective distortion.

Conceptually, such a face mesh is made up of one big oval with little holes "punched out" for orifices like eyes and mouth.

This tip shows the general logic when creating a face:

You can also watch the full mesh creation of different faces in the rigging streams for the characters of Delilah, Damien and Vianna.

head-mesh 

Clothing

Clothing is often modelled with meshes so it can more easily follow body movements, or display secondary motion, such as its reaction to wind.

There are several ways to rig clothing depending on how independent from the body movements it should be.

Capes, skirts, sleeves, all fall in this category. For an in-depth dive, check out these two streams and our Mix and Match example project, which features all kinds of clothing rigs.

Multi-purpose assets

Anything that serves two or more purposes can be considered complex, especially if the movement that deforms the (weighted) mesh is generated both by translating as well as rotating one or more bones.

An example of this is a torso that rotates in space, bends, and bounces, as illustrated in this stream or this stream.

Faces would deserve an entire chapter detailing the subtle art of simulating depth in addition to facial-feature-specific controls. An example of such a complex face rig is the elderly lady painting shown in the GIF below.

rotating-head-weights

Conclusion

Now that we have strategies to place vertices and a taxonomy of mesh types with respect to their purpose, we are ready to dive into weighting meshes in the next blog post.

We hope this brief carousel of meshes can serve as a useful compendium, and sparks ideas for future projects! We would love to hear your thoughts on the forum.

Mesh creation tips: vertex placement

April 20th, 2020

Meshes can be difficult to get right, not only for beginners, but also for seasoned riggers, especially when it comes vertex placement and weights. In this post, we'll discuss some tips that will help you create better meshes using various vertex placement strategies.

If you are not yet familiar with meshes, have a look at our meshes section in the Spine user guide.

Principles of good mesh structure

What makes a good mesh? Given an image, there's an infinite number of meshes and weights you could come up with, subject to the purpose of the mesh. Irrespective of your use case, here are a few general guide lines you can follow while creating your meshes.

Follow natural folds and edges

If you are lost and don't really know where to start placing your first vertices on the mesh, look for the natural folds of the images you want to create a mesh for.

Specifically, try to identify edges that separate one area from another. These edges can be visible lines, changes in color or angle, and so on. Thankfully the human eye is fantastic at detecting such separating edges!

To create the outer hull of a mesh, start from a corner in the image and place as few vertices as possible to approximate the general outline of the image. Even better, use the trace feature to finish this step faster. You might want to touch up the output by removing vertices and moving vertices closer to the image's pixels without cutting parts of the image off.

For inner vertices, start from the parts that help to convey the shape of the mesh first by placing a vertex in corners, or at the start and end of important edges that define the structure of the mesh.

Outline features with vertices

When dealing with something as complex as faces, a good rule of thumb is to start by outlining each feature of the face - nose, eyes, eyebrows, mouth, etc. - by placing at least one vertex on each side of every feature. This allows you to isolate the features and give them plasticity. It also makes it easier to define and add vertices to each facial feature.

You can see an example of this same logic in a frame of this tip where the process to rig a face is shown:

image of a lady with vertices on the sides of the features

Only add the vertices you really need

It is tempting to think a lot of vertices will give you more control over your mesh. In reality, too many vertices will make working with your meshes harder, be it weighting, selecting vertices, or creating deforms. The mesh tools view and the weight brushes can help making these tasks easier. But too many vertices can also have a detrimental effect on the runtime performance of your skeleton. A very useful tool to keep the number of vertices in check is the metrics view.

With this in mind, always start with the least number of vertices possible. Only add vertices where required to create the rough shapes you need. Set the weights on this minimal mesh so it deforms like you want, then add more vertices as needed for finer control. When you add these additional vertices, Spine will automatically calculate their weight based on the existing surrounding vertices, making your job much easier.

You can see several examples of meshes in the tip below. Note how most areas are sparse in terms of vertices, while only important features have a higher density of vertices:

Concentrate vertices around the parts that convey the shape

We've learned to use vertices to model features, and that superfluous vertices shouldn't be added. Here's another tip on where to place vertices: place vertices so that the resulting mesh conveys the shape of the object.

Curved, bendy surfaces using only 3 lines and weights

How much can one get away with, when trying to reduce the amount of vertices? If you're trying to simulate something curved and bendy, try to avoid falling in the trap of adding a gazillion vertices to match the curve.

As demonstrated in this tip, straight images bend better than already curved ones. If you start out with an already bent image and try to bend it in the opposite direction, you'll have a bad time.

A straight image, on the contrary, gives you much more usable angular deformation using less vertices.

In fact you can simulate softly bending objects with as little as 4 vertices per side. Give it a try! Not satisfied with the result? Add a few more vertices strategically, without going overboard. In most cases you'll find there is no need to add more vertices, especially when considering the actual size it will be seen. Your runtime performance will thank you! This tip shows a comparison of many vertices versus less vertices in movement. Can you spot the difference?

Harmonious structures deform better

A mesh made of equidistant or proportionally distant vertices will usually deform better than one where vertices follow a more random placement. This is because when a vertex moves, the amount of the image that deforms depends on the distance to other vertices. When some vertices are much closer than others, the deformation often doesn't match how most real world materials behave.

Symmetrical vertex placement, like the longitude and latitude lines on a map of the Earth, helps to make believeable and consistent deformations. Bending one direction will behave similarly to bending in the other direction. However, even when bending in only one direction, a symmetrical mesh structure helps the mesh to mimic the solidity and consistency of real world materials.

Here are a couple of examples of harmonious, mostly symmetric, easily deformable mesh structures.

Don't be afraid to change your mesh later

This last tip may be obvious, but it's one of the most important ones. Don't be afraid to experiment or to try to get away with less. If something doesn't work exactly how you envisioned, go back to setup mode and adjust the mesh structure or touch up the weights. Even better, you can do so while looking at a moving result by keeping the Preview view open next to you.

In the future we will also explore weighting techniques in more detail, although you can already find some examples in our tips section. Did you find these tips useful? Join the discussion of this post on the Spine forum!

Older