#05 Parameter and Movement

Finally, we move on to the process of constructing movement!
Live2D uses the mechanic "Parameter" to construct movements.
In this tutorial, we will add movements to drawing objects and deformers with the use of parameter.

    About Parameter

A parameter is used for controlling movements on a numerical scale.

For example, the parameter of "EyeR Open" has a range of value between 0 and 1. When the value is set to "0", the eye is closed. While set it to "1", the eye is fully opened.
Here we refer "0" and "1" as the "key values" in the parameter.
"Closed eye" and "Opened eye" are referred as "key forms".

In the following, we will set the parameters for our drawing objects and deformers, and then add movements to them.

    Using Guide Image to Display Various Expressions

For the upcoming process, displaying the guide image "sketch.png" would be helpful in keeping track of the movements you make.

Hence, click the eye icon to display the guide image.


    Assigning Key Values to a Parameter

The procedure begins with assigning key values to the "Right eye" parameter.

  1. Select the draw object that you wish to assign value to.

  2. In the "Parameter" palette, click on the parameter "EyeR Open".

This will bring up the "Parameter Edit" dialogue box. We will set the parameter key values here.

Click on the values "0" and "1" on the scale bar.
The idea is to make the eyes closed when the value is at "0", and opened fully at "1".

Once you assigned the parameter key values, the slider "EyeR Open" will now have a round marks on it.

    Open/Close Right Eye

The following steps are guides to work on the shape of the closed right eye.

Since the value "0" on the parameter sets the eye at its closed state, the parameter should be at "0" when we design the movement of the closed eye. This can be done by dragging the slider to the left of the parameter, or by right clicking the "0" key on the parameter. 

Additionally, set the objects "Eye white" and "Pupil" on the "Parts" list to "Hide" mode, in order to see the guide image clearly.

1. Lock all the parts
2. Unlock "Eye" parts
3. Hide "Eye white"
4. Hide the "Pupil" part

Move the "eyelash" drawing object to align with the guide image's closed eye.
Upon clicking the drawing object, a red frame will appear around it. In the center of the frame is a red dot. Click and drag it to move the object.
Adjust the position of the drawing object until it matches (approximate) center point with the guide image's eye.


     Open/Close Right Eye with the Path Tool

Next, reshape the whole "eyelash" piece to match the guide image's closed eye. To do this with individual point-to-point adjustment would be challenging and ineffective, especially for new learners.
This situation is where the Path tool plays an important role. 

First, select the drawing object.

Select the Deform Path tool. The red frame around the selected drawing object will disappear. Click on the drawing object to add dots like the image below.

Now, adjust the path to match the shape of the drawing object to match the guide image's shape.
Select the Edit Drawable Object tool (the pointer). Then, click-drag the points on the path to shift the shape of the drawing object.


This is how you make the material into the shape of the closed eye.

After it is done, feel free to remove the path to clear up the canvass. Select the item "D_EYE.00" on your Parts palette and tap delete key to remove it.
Removing the path may be wise in this instance, but in some other ones, you may keep the path for later.

The shaping work is still in a rough form. The thickness does not match with the guide. To correct it, move the polygon dots one-by-one to refine the shape.
Reshape the drawing object into the guide image's thickness. The detailed fine touch improves the quality a lot!


Now, the parameter "EyeR Open" should be activated. Slide along the bar to move the eyes open and closed.

    Open/Close the Left Eye

Same as the Right Eye, begin the Left Eye with setting up the parameter.
Assign the key values "0" and "1" to the parameter "EyeL Open".


  Open State      Closed State

    Open/Close for the Eye White

This is to setup the Eye White on the right eye.
The procedure is the same as setting up the eyelashes.

First, begin with shaping the Eye White.
Lock all the other layers in your "Parts" palette. Hide the Right Eye Eyeball too.

Select the Eye White drawing material. Then, edit the parameter "EyeR Open" by double-clicking it on the parameter palette.

Establish the key values at "0" and "1".

Set the "EyeR Open' value to "0", either by dragging the knob to the left of the bar, or right-clicking the left end of the bar.

Now, we do the formation.
Select the drawing object. Click and drag downwards on the center-top red dot of the red frame. It collapses the Eye White.

As you fold it down to hide the top of the Eye White, the bottom part extends beyond the Eyelash. Click-drag the center-bottom red dot upwards to further collapse it as it hides the bottom. 

It is not perfect yet, as both sides of the Eye White is still exposed. 
Move the polygon dots towards the center so that the Eye White is in a shape that is just small enough to be fully covered up by the Eyelash.


The Eye White is now setup.

    Eye White 

Eye White Open and Closed State


  Open State        Closed State

    Clipping the Eyeball to the Eye White

The following is about the Eyeball (iris piece).
As you can see, when "EyeR Open" is at "0", the right eye should be closed, but the Eyeball is still showing.

However, we cannot simply collapse the Eyeball piece to make it the closed state. As seen in the image below, the outcome is bad. We need a different procedure for the Eyeball.

The "Clipping" function allows us to hide the Eyeball without deforming its shape.
Clipping prohibits the drawing object above to extend beyond the area of the drawing object below.
In this instance, clipping the Eyeball to the Eye White layer hides any Eyeball part beyond the area of Eye White. 

To do so, first select the Eye White piece. Copy its ID from the Edit palette.

Then, select the Eyeball, paste the copied ID into the box "Clip ID" in the Edit palette.

Now, if you slide the "EyeR open" parameter to the left to close the eye, the Eyeball would no longer be exposed beyond the Eye White area as it folds down.

Repeat the same process on the left eye.


  Open State        Closed State

    Mouth Open and Close

The following part is for opening and closing the mouth piece.
The process is similar to the eye piece.

  1. Select both mouth pieces.

  2. Click on the "Mouth Open" parameter.

You can select multiple drawing objects when setting a parameter. 

The parameter edit window should appear. 
Set the key values at "0" and "1".
The button "Add 2 keys" automatically create a key value at both ends of the bar.

Set the parameter value of "Mouth Open" to "0".

The following process is for the upper lip.
Shift the upper outline of the mouth downwards.
The Lasso tool may come in handy here, as it allows you to freely select an area of polygons.

First select the Lasso tool, then surround the area of polygons to be worked on.

Move the lower half of the texture downwards.

Now work on the shaping.

Open State   Closed State

Do the bottom prat of the mouth.

Open State   Closed State

Test out the parameter. It is completed if it can close up correctly.

    Face Tilt (Angle Z)

A deformer can also be assigned to a parameter.
The method is the same as doing it to a drawing object.

  1. Select the deformer "Face Rotation deformer"

  2. Click on the "Angle Z" parameter.

The Parameter Edit window should open.
Add 3 key values: "-30", "0", "30".
This can also be done by simply clicking on the "Add 3 points" button.

Set the parameter value to "30". Then, drag the handle of the rotation deformer clockwise (about 30 degree to the right).

Then, set the parameter value to "-30". Then, drag the handle counter-clockwise (about 30 degree to the left).

    Preparation Work for Live2D Cubism Animator

The combination of multiple parameters can create a wide variety of expressions.

This is the end of Live2D Cubism Modeler.
In the next part, we will move on to Animator.

For Animator to load up the model properly, keep only the necessary parts-layers visible. 
For example, the guide image should be hidden up.

When ready, save the data as it is.