5. Facial XY motion attachment

You can also download the latest Cubism Editor here.

Using the “deformer” described in Adding Body Movement, we will add the [Angle X] and [Angle Y] movements that turn the face up, down, left, and right.
This section explains how to add deformers and how to add movement.

Basic Tutorial List

  1. Illustration Processing
  2. Prepare to move the illustration
  3. Let's add facial expressions
  4. Let's get our bodies moving
  5. Facial XY motion attachment
  6. Let's add motion

Tutorial Video in Japanese

English Tutorial Video

Chinese version Tutorial Video

Please refer to the following URL for the Chinese version of the video tutorial.


The completed sample model of “Hiyori Momose” appearing in the video => Click here for DL


Video Review

Here, we will add an [Angle X] [Angle Y] movement that turns the face up, down, left, and right.
Once the face is understood, the body can be moved in the same way.


Add deformer for angle XY

First we will add a deformer for XY to the previously created model, and I will explain why we are adding a deformer for XY.

XY movement is applied directly to the ArtMesh without deformers to the eyebrows.
Even if it looks like the X movement is correctly applied with 0 deformation of the eyebrow, the shape of angle X 0,+10,-10 when the deformation is -1, the shape of angle X 0,+10,-10 when the deformation is +1 on the other side... etc...
Multiple shapes will have to be created. (3 ways x 3 ways = 9 ways)
In addition, because of the Y movement, the number of shapes that need to be made keeps increasing. (3 ways x 3 ways x 3 ways = 27 ways)
This would take time to form and be difficult to manage.

The use of deformers eliminates the need to create each shape, since parameters can be attached to the deformer.
The use of deformers also offers the following advantages.

  • Multiple objects such as eyes can be deformed at once
  • XY deformations can be added with perspective awareness

Deformers may seem difficult, such as parent-child relationships, but they should be used effectively.


Creating a deformer

While it is possible to put the entire face in one deformer, it is better to make each part individually to create parallax and deform it three-dimensionally.
It is also recommended to make individual deformers for each part as it makes it easier to adjust details.

Creating a contour deformer

The method for creating a deformer is the same as described in the previous tutorial.
Select the ArtMesh you want to include and create a deformer. Warp deformers are used in XY.
The contour deformer should be made so that the number of bezier divisions is 2 x 3.

About the number of Bezier divisions

The number of bezier divisions is recommended to be 2 x 3 for long verticals, 3 x 2 for wide widths, and 2 x 2 or 3 x 3 for equal aspect ratios, using these four basic ways.

If you wish to change the number of bezier divisions, you can do so from the inspector palette.
You can increase or decrease the value here, or change it at will.

Creation of eye deformers

From the parts palette, it is easier to create a deformer by locking the parts that are not selected.

The eyes are made deformers separately for the left and right eye.
Select the lashes, eyeballs, and whites of one eye together.
You can select from the parts palette, but if you have locked all the parts except the eyes, you can select them all together by dragging them on the canvas.

Since we want to adjust the deformation during XY more finely than other parts, we make the Bezier with a 3 x 3 number of divisions.
If you want to adjust the size of the deformer, you can hold down Ctrl and transform the bounding box to adjust the size without transforming the contents.

It is easier to deform if the four inner control points surround the eye.

Make a deformer for the other eye as well.


Creating a nose deformer

For the nose, it is easier to deform it by using 2 x 2 Bezier divisions for small objects such as those written in dots, and 2 x 3 Bezier divisions for long vertical objects with a realistic touch and a nasal stripe.
The position should be such that the nose is centered.

Creating a deformer of the mouth

Create a deformer with 3 x 2 Bezier divisions.
It is easier to deform if the control points are placed so that they are at the corners of the mouth.

Creating a deformer of the eyebrows

A 2 x 2 number of Bezier divisions is recommended. As with the eyes, make them separately on the left and right sides.
It is easier to deform the eyebrows if the middle control point is in the middle of the brow line.

Creation of ear deformers

Make deformers on the ears as well. As with the eyes and eyebrows, they are made separately on each side.
The number of Bezier divisions should be 2 x 2.
Deformers should be positioned in such a way that the parts are centered.

The other side is deformed in the same way.

Creation of hair deformers

For the hair, make a deformer on top of the swaying deformer you made last time.

With an existing deformer selected, click on Create Warp Deformer and select [Set as Parent of Selected Object] to create a new deformer, which will contain the existing deformer in the newly created one.

When creating a deformer, be careful that the parent deformer is not smaller than the child deformer.

Create a deformer in each of the front, left and right side, and back hair. The number of bezier divisions depends on the length of the hair.
It is recommended to use 2 x 3 if long or 2 x 2 if short. This time, only the bangs are made in 2x2 and the rest in 2x3.

This is basically the end of the deformer for XY.
Looking at the deformer palette, a deformer is created for each part in the face rotation.
If there are parts that were omitted from being made, or if there are character-specific parts such as ribbons, make deformers for those parts as well.

X-directional motion attachment

Select the deformer you created and add three points to the [Angle X] parameter.
Since it is difficult to create the shape with all the parts displayed, hide the other head parts and use only the outline.

Select a contour deformer, move it slightly to the side, and shape it.

When creating the shape, do not look too much at the shape of the parts themselves, but deform the deformer handles with the perspective in mind to create a beautiful shape.
Once the deformation is applied so that the back side is slightly narrower and the front side is wider, the rest can be fine-tuned to the desired shape.

Make the movement to face the right side of the screen in the same way.

The nose, mouth, eyebrows, eyes, ears, and hair deformers will be moved in the same way.
The trick to deformation that is common to all is to deform the deformer with an awareness of perspective so that it is slightly thinner in the back and wider in the front.

The trick is not to make adjustments by looking only at the resulting horizontal shape, but also by watching the movement of the deformation when the parameters are moved.


Y-directional motion attachment

The movement in the Y direction is added using the same deformer used to add the X movement.
Select the deformer and choose the [Angle Y] parameter to insert three points.

As with X, the display is made to move with only the outline.
The movement is similar to the X, deforming the deformer while keeping the perspective in mind, so that the back is narrower and the front is wider.
Also, in the case of Y, it is best to let the deformation be such that the back side narrows a little.

Let's make the other parts move in the same way.


Diagonal face motion add

The deformation of each of [Angle X] and [Angle Y] has been completed, but the diagonal movement has not yet been completed, so the image will remain facing sideways even if you try to make it face diagonally.
Therefore, it is necessary to create diagonal shapes as well, but the diagonals do not need to be created from scratch; they can be generated automatically using the function.


Diagonal motion attachment Procedure

When you click on the Angle X parameter, a small pop-up appears beside it.
Hover your mouse over the far right to see the parameter adjustments, and click [Choose] at the top to select all objects with that parameter.

With the selection made, click on [Auto Generate 4 Corners] from the menu next to the parameter.

You will then see a dialog box like this.
Confirm that [Angle X] is entered in [Parameter 1] and [Angle Y] in [Parameter 2].
In addition, make sure that the option Target is set to [Selected Objects] and press OK.

Now a diagonal face has been created.
Click the chain icon to the left of the [Angle X] parameter to merge it with the parameter below.

Facial deformations can be easily checked in this state.
Move the parameters around and adjust any unnatural parts.


This is the end of this motion attaching.
As for [body rotation X], it can be created by adding a deformer, similar to that of a face.

You will get a better understanding of how the deformer actually works, as well as other areas that are not explained, by looking at sample models.
Also, if you have any questions about a function, please refer to the manual site for a detailed explanation of each function.

Previous section “4. Let's move your body” | Next section “6. Let's add motion


© 2010 - 2022 Live2D Inc.