6. Creating Animations

You can also download the latest Cubism Editor here.

Switch to animation mode and add motion to the model you have created.
This section describes the basic operation of the animation mode.

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

Below is a link to a manual with more detailed explanations in the video.

  1. Model loading and placement [0:28]
  2. Basic operation of timeline [1:20]
  3. Basic operation of dope sheet [2:38]
  4. Animation Template [3:46]
  5. Shy Function [4:30]
  6. Interval Adjustment [5:05]
  7. Graph Editor [5:37]

English Tutorial Video

Chinese version Tutorial Video

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


The “Hiyori Momose” finished sample model used in the video => Click here for DL


Video Review

This section describes the operations for attaching motion to the model.
Adding motion makes the model even more attractive, so learn how to use it here!


Edit Mode Types

Live2D Cubism has two modes: modeling mode and animation mode.
The modeling mode is used to add motion to illustrations, and the animation mode is used to add motion to models created in the animation mode.

In this article, we will explain the animation mode.
The mode is toggled by pressing the [Modeler][Animator] icon in the upper left corner of the Editor.

Loading the model

After switching to animation mode, load the model file you want to move.
At the bottom of the screen, drag and drop the model data onto the timeline palette.

Once the model is loaded, a new scene is added and the model appears on the canvas.


Model size adjustment

If you want to adjust the size of the model, open the [Placement & Transparency] tab in the Timeline and adjust the size of the model from [Scale].

Alternatively, it can be changed from the bounding box on the canvas.

Adjustment of campus size

The size of the canvas is 1280*720 when newly created, so if you want to adjust it, you can do so from the [Size] in the inspector palette.

Key frame setting

When you have finished placing the model, open the [Live2D Parameters] tab of the purple model track in the Timeline palette.
When opened, it displays the parameters you have set in the modeling mode.
By moving the slider for this parameter, a keyframe will be keyframed with that value on the timeline.

A [keyframe] is a point struck on the timeline.
To try it out, let's play around with the parameters and hit multiple keyframes.
If you press the play button at the top of the timeline palette while typing a key, you will see that the animation is automatically split between key frames.


Trackbar work area settings

I animated, but the model disappeared in the middle of the animation.

The purple bar on the timeline is called the track, which is the range of the model on the timeline.
The track is shorter than the length of the entire scene so that the model disappears in the middle of the scene.

If you want to keep the same model visible throughout the scene, drag the edges of the track to extend it throughout the scene.
The length of the scene itself is set in [Duration: ] by dragging the left portion of the string to the left or right.

When a scene is stretched, the work area must also be stretched together or it will not be visible during playback.
The orange bar indicates the range of the work area. If you want to add motion to the end, extend the work area to the full scene.

If you play it again, the model will not disappear in the middle and will be displayed until the end.


Type of keyframe setting

In addition to moving parameters, keyframes can also be placed on the timeline by entering a numerical value next to the parameter.

Keyframes can also be hit by holding down [Ctrl] and clicking on the timeline.
If you hold down [Ctrl], you can type in parameter units, or you can click on the green bar to keyframe all parameters at once.

To delete a keyframe, hold down [Ctrl] and click on the keyframe you wish to delete, or select the keyframe and press [Delete].

In addition, multiple keyframes can be selected, and they can be moved or erased at once.
As you drag on the timeline, the selected area will turn pale blue.
In this state, when the mouse is hovered over a keyframe, an arrow appears next to the mouse, and the keyframe can be moved by dragging it sideways.

You can also copy keyframes with [Ctrl+C] and paste keyframes with [Ctrl+V].
You can also erase them all together by pressing [Delete] while they are selected.


Animation Templates

If you want to divert the same movement over and over again, it is recommended to save keyframes as “animation templates”.
Select a range of keyframes you wish to save and click on [Create New Template] at the bottom right of the Template palette.

Enter any name and click [OK] to save it as a template.

Movements such as blinking are used frequently during motion and should be registered.


Shy function

If you hit keyframes for all parameters at frame 0 first, it will be easier to add motion while anticipating the movement.

If you have multiple parameters and find it difficult to edit, use the Shy function and hide the parameters.
Click the small [shy button] on the far left of the parameter you wish to hide.

Clicking the large shy button above the track while the shy button next to the parameter is dented will hide the specified parameter.

If you want to view it again, just click the larger shy button to return.
This is recommended when adding motion to a model with many parameters.


Interval adjustment

If you want to adjust the speed of the entire motion, use the [Spacing Adjustment] at the bottom of the Timeline palette with all keyframes selected.

If you apply it at 50% for a trial, the spacing between each key is halved and the motion is faster.
Conversely, if applied at 200%, the interval can be doubled to slow down the motion.
It can also be applied partially, so if used properly, it can efficiently improve the quality of motion.


Graph editor

With a parameter selected, click on [<Graph editor>] at the top of the timeline to visually check the keyframe transition for that parameter.

From this state, keyframe values and positions can be edited.
Drag on the timeline and select multiple keyframes to display the bounding box.

Here it is possible to change the amplitude of the movement and adjust the spacing.
As with the timeline, keyframes can also be added and removed using [Ctrl].

The graph editor allows you to intuitively check and edit keyframe values, so be sure to take advantage of it when adding motion.


This is the end of the explanation of how to use the Animation Workspace.
If you want to know more details about a specific function, please refer to the manual site.

Previous section “5. XY movement of the face

© 2010 - 2022 Live2D Inc.