Graph editor

(Updated 06/16/2022)

A graph editor allows you to create animations while visually checking changes in parameters.
This section describes the basic operations of the Graph Editor.

 

 

Switch Edit Mode

By default, the [<Dope sheet>] is displayed, which represents keyframes as dots.

Click the [Switch Edit Mode] button to switch to the [<Graph editor>].

Selecting a parameter displays a graph, which can then be edited.
Multiple curves can also be displayed simultaneously by selecting multiple parameters.

Click the [Switch Edit Mode] button again to switch to [<Dope sheet>].

Edit the animation while switching to a format that is easy to use.

 

Basic operation

Keyframe Insertion

You can insert a key at any position by holding down [Ctrl] and [Left Click] on the frame at the position you want to insert.
You can insert a key on the curve by holding [Ctrl] + [Shift] and [Left Click].
The cursor at this time will display a “+” as shown in the figure below.

Delete Keyframes

You can delete a key by holding down [Ctrl] and [Left Click] on the keyframe.
The cursor at this time will display a “-” as shown in the figure below.

Moving keyframes

You can change the position by dragging the selected keyframe.

When the Bezier curve key is moved, the front and rear handles extend and contract in ratio to prevent the curve from bending through the front and rear handles.
This is true even when moved on a dope sheet.

Multiple selections allow you to move multiple keyframes at the same time.

You can also use the [left and right arrow keys] to move the keyframe left or right.
Only left and right arrow keys can be used for movement.

 

Continuous Bezier Editing

It can be edited so that the front and rear handles are aligned.
Useful for adjusting smooth curves.
By default, holding down [Ctrl] and moving a handle will result in continuous bezier editing, but you can also change
The default can also be changed from the [Palette Menu] by checking the [Always edit continuous Beziers] checkbox.
(In that case, [Ctrl] will invert the function.)

 

Edit multiple keyframes

If you start dragging from an empty area on the timeline, you can select keyframes contained within that area.
Multiple selected keyframes can be edited for parameter values at once.
When multiple selections are made, a red frame [bounding box] will appear.
The [bounding box] can be deformed freely, just as you would do elsewhere, and by grabbing the center point, you can move it while maintaining the keyframe alignment.
The amplitude of the curve can also be adjusted by scaling the [bounding box].

The following actions are performed by dragging while holding down the Shift or Alt key with multiple selections.

[Shift]+drag Vertical movement up and down
[Shift]+drag Scaling while maintaining aspect ratio
[Alt]+drag Scaling with anchor centered
[Shift] + [Alt]+drag Scaling with anchors centered while maintaining aspect ratio

 

Box Editing

Narrowing the width of the box will place the keys as close together as possible.
The key does not disappear when the box is transformed in the selected state.
In addition, the original shape is memorized until the box disappears, so there is no loss of curve information even if the box is repeatedly deformed.

 

Copy and paste

You can copy and paste keys within the graph editor.
Information on one curve can be pasted into any other curve at any position across scenes and animations.
In the case of multiple curves or FA curves, the curves are limited to the same curve.

 

Curved dragging

You can grab a curve and edit the shape.
It is useful for creating rough shapes.

 

Handle shaping

Shapes the handles before and after the selected point into a straight line (continuous Bézier).
It can be selected from the right-click menu and applied to a selection key or to the entire selection curve.

 

Value formatting

Round the values of the selected points with the grid values.

You can use this function by checking the [Smart snap using Shift] checkbox in the Timeline palette menu.
The [Shift] + [Alt] + [Drag] toggles between enable and disable.

 

Value Change

When edited with the parameter sliders, the original shape is maintained until a decision is made, and the shape is maintained as long as possible, even if the handles reach their upper and lower limits.

 

Change values with up/down cursor keys

In the dopesheet or graph editor, select a key and use up or down on the keyboard to change the value.

 

Multiple Property Selection

Multiple properties can be selected.

Selection Method:

  • [Ctrl] + click to select individual items
  • [Shift] + click to select a range
  • Select all elements inside by clicking on the folder in the properties

TIPS
The property selection color and the curve line color will be the same, and if multiple properties are selected, each will be color-coded.

 

 

Display parameter name at key position

If the [Display key name] checkbox in the Timeline menu is checked, at the key position in the graph editor,
the name of the parameter will be displayed.

Expanding and reducing the timeline

Use [Alt] + [Mouse Wheel] to zoom in and out the width of the timeline.
The center of scaling is the cursor position.

TIPS
Dope sheets can be scaled in the same way.

Use [Alt] + [Ctrl] + [Mouse Wheel] to increase or decrease the height of the timeline.

 

 

Applying the Curve

To apply one of the five types of curves described below to a graph, click on the respective curve's button with the key on the curve selected.

Here we will change the default setting of [Auto Smooth] to [Linear].

The curve connecting the next keyframe after the selected keyframe is now [Linear].

Curves can also be changed with multiple selections.

See the “Curve Types” section below for details on this curve.

 

Curve type

If two or more keys are inserted on the same parameter, the space between each key is automatically interpolated with a curve.
The Cubism Editor has five types of interpolating curves, allowing you to create a variety of animations.

Auto smooth

The default keyframe interpolation method is [Auto Smooth].
The applied keys are connected by smooth curves.
The animation begins to move slowly and decelerates toward the next key frame.

Button Actual Animation Graph Editor Curves

 

Linear

The applied keys are connected by a straight line between them.
Animation is constant and variable, with linear motion.

Button Actual Animation Graph Editor Curves

 

Step

The applied keys are connected by a horizontal straight line between them that matches the value of the previous keyframe.
The animation moves so that the front and back pictures change in an instant.

Button Actual Animation Graph Editor Curves

 

Inverse step

The applied keys are connected by a horizontal straight line that matches the numerical value of the trailing keyframe.
The animation moves so that the front and back pictures change in an instant.

Button Actual Animation Graph Editor Curves

 

Bezier

Select a key and click the [Bezier] button to display a yellow [Bezier Handle] on the key.
By grabbing the rounded edge, you can move it up, down, left, or right, and freely edit the shape of the curve.

Button Actual Animation Graph Editor Curves

 

Curve Preset:

Click on the button to the right of the [Bezier] button to apply any of the commonly used curve shapes that have been pre-populated.
This is a useful function that can also be utilized for character movement, although it is often used primarily in motion graphics.

 

Recalculation of curves

Accuracy of curve calculation has been improved since Cubism 4.2.00.
Motion created with Cubism 4.1.05 or earlier can be [Recalculate Curves].

How to recalculate curves:
Click CAN3 in the Project palette to display the [Recalculate Curves] button in the Inspector palette.

Click the [Recalculate Curves] button to recalculate the curves for all scenes.

If there is a change in the value, a dialog box will display the details.

 

Precautions when embedding the SDK

There are a few things to keep in mind when incorporating the animations you create into the SDK.
For more information, please see the following page.

-> Precautions when embedding SDK

© 2010 - 2022 Live2D Inc.