Spine version: 3.8+
Tags:

Professional, Meshes, Transform constraints

Owl

The Owl project shows one way to take advantage of additive animation blending. Additive animation blending lets you create effects such as blending multiple facial expressions, such as 25% angry, 25% sad, and 50% happy. The project also employs techniques to give the skeleton a 3D look.

Setup

The skeleton contains only a handful of images so focusing on the setup of the 3D effect and poses becomes easier.

The head is composed of several images that are connected to 3 bones. The head bone controls the owl's head and can be used to easily translate, rotate, and scale the entire head.

The other two bones, control and control-back, are used to create the 2.5D effect. The effect is accomplished using a transform constraint that lets the control-back bone follow the control bone with a translation mix set to -100.

This results in the target control-back bone moving in the opposite direction of the control bone:

The depth effect is added by weighting a mesh to these two opposite bones, as illustrated in the Cube tip.

The largest mesh, head-base, is used as a reference when weighting all the smaller meshes relative to it. Starting from the external edge, a series of concentric vertices were created to give the illusion of spherical head. These vertices are bound to the 3 bones head, control, and control-back. As it is easier to start from a neutral state of weights, all the weights were initially set to be 100% influenced by the bone head. The middle of the mesh was then painted using weight painting in additive mode to become influenced by the control bone. Similarly, the external edge vertices were weighted to the control-back bone so that the feathers in the back move in the opposite direction of the rest of the face, giving the illusion of depth.

The eyes are composed of a number of attachments: L_eye-iris, R_eye-iris, L_eye-closed, R_eye-closed, L_eye-pupil, R_eye-pupil, L_eye-light, and R_eye-light. All attachments except the pupils are weighted to the bones head and control letting the eyes contribute to the 2.5D effect without distortion, and moving proportionally to the control bones. To simulate the owl gazing at the control bone, the L_eye-pupil and R_eye-pupil images are parented to the bone control so that they follow it completely.

The beak is composed of two attachments, beak and beak-down, and generally follows a similar setup as the eyes to simulate depth.

Body

The body of the owl connects the head to the branch. The body is composed of 3 meshes, body, L_wing, and R_wing, which are weighted to the body-top-control and owl-base bones. The body-top-control bone is parented to the head bone, and owl-base is parented to branch-2.

The owl's tail consists of 3 images, feather-1, feather-2, and feather-3, which are parented to the tail-feathers bone, which itself is parented to the owl-base bone.

While the feet of course belong to the owl, they are located outside the owl hierarchy and are parented to the branch-2 bone.

Branch

The branch features a long mesh called wood which is weighted to a chain of bones, branch-1 through branch-6. The branch has few vertices, except near the joints of the bones. This allows smoother bending around the joints while retaining a rigid shape everywhere else.

Each leaf on the branch consists of a bone and image attachment. The leaf bones are parented to the branch bone closest to them. By giving each leaf its own bone, they can be easily animated to simulate a gentle breeze bending them.

Animations

The owl animations are designed to be played at the same time on different tracks and to use additive animation blending. The down, up, left, and right animations are single frame animations, each representing an extreme pose to be additively blended with the other animations at runtime based on user input, for example based on the mouse cursor position like in the demo at the top of this page.

Idle

This animation is meant to be played in a loop and is responsible for subtle breathing movements, wiggling of the tail feathers, as well as the bending of the branch and leaves to simulate wind.

This animation is deliberately longer and separate from the idle animation. This way, when the two animations are played at the same time, they will loop at different times, making the blinking happen at different intervals than if it was part of the idle animation.

The blink animation consists of attaching the L_eye-closed and R_eye-closed images so that they cover the rest of the eyes, after which they are detached again to simulate blinking.

Directions

The animations up, down, left, and right each consist of only one frame with one translation key for the control bone on the farthest point it could reach for each direction.

Additive animation blending

You can preview the result of playing several animations at the same time using different blending mixtures in the preview view. For example, first set the idle animation on track 0 and the blink animation on track 1. Next, enable additive blending on tracks 2, 3, 4, and 5, then set up, down, left, and right on each of those tracks. Finally, adjust the alpha of tracks 2 through 5 to get various blends of the animations.

The demo at the top of this page adjusts the alpha of the direction tracks using the location of the mouse cursor. A similar effect could be had by placing a control bone at the mouse cursor and using IK and transforms constraints to adjust the skeleton, as shown in the IK web demo. However, additive animation blending is more powerful because it is blending the entire pose from multiple animations. The animations can be significantly different and more complex than what can be achieved by positioning a control bone. Also the animations can be looped, they don't need to be a single frame like in this Owl example.

Additive animation blending has many uses, it is not limited to blending between direction animations. For example, it can be useful for facial animation, where multiple emotion animations are applied at the same time, each with a different influence, such as 25% angry, 25% sad, and 50% happy.