グラフエディタ

グラフエディタとは

(2018/06/21 更新)

グラフエディタを使えばパラメータの変化を視覚的に確認しながらアニメーションを作ることができます。
ここではグラフエディタの基本操作について説明します。

 

 

編集モードの切り替え

デフォルトではキーフレームを点で表している[ドープシート]が表示されています。

[編集モードの切り替え]ボタンをクリックし、[グラフエディタ]に切り替えます。

パラメータを選択するとグラフが表示され、編集することができます。
複数のパラメータを選択することで複数のカーブを同時に表示することもできます。

再び[編集モードの切り替え]ボタンをクリックすると[ドープシート]に切り替わります。

使いやすい形式に切り替えながらアニメーションの編集を行います。

 

グラフエディタの設定

グラフエディタ右上のハンバーガーボタンをクリックすると、グラフエディタの設定を表示します。

キーの値を表示する

[グラフエディタ上でキーの値を表示する]にチェックを入れるとキーの数値を表示します。

オートリサイズ

オートリサイズ ON
[グラフエディタのオートリサイズ]にチェックを入れると、ドラッグでキーフレームを移動している間、数値に合わせてグラフ全体が追従します。

オートリサイズ OFF
チェックを入れない場合はドラッグでキーフレームを移動する間、グラフ全体は追従しません。
グラフ全体はキーフレームの位置の確定と同時に変化します。

カーブのキーの位置にスナップ

[カーブのキーの位置にスナップ]にチェックを入れると、選択したキーを前後のキーの数値にスナップします。
キーフレームを上下に移動すると、スナップする数値でオレンジ色の線が表示されます。

 

 

基本操作

キーフレームの挿入

挿入したい位置のフレーム上で[Ctrl]を押しながら[左クリック]することで任意の位置へキーを挿入することができます。
[Ctrl]+[Shift]を押しながら[左クリック]するとカーブ上にキーを挿入することができます。
この時のカーソルは下の図のように『+』の表示となります。

キーフレームの削除

キーフレーム上で[Ctrl]を押しながら[左クリック]することでキーを削除することができます。
この時のカーソルは下の図のように『-』の表示となります。

キーフレームの移動

選択したキーフレームをドラッグすることで位置を変えることができます。
複数選択すると、複数のキーフレームを同時に移動させることができます。

また、[左右の矢印キー]を使用することでキーフレームを左右に移動することもできます。
[矢印キー]での移動は左右のみ対応しています。

複数のキーフレームを編集する

タイムライン上の何もないところからドラッグをはじめると、その範囲に含まれるキーフレームを選択できます。
複数選択されたキーフレームは一括でパラメータ値の編集をすることができます。
複数選択を行うと赤い枠[バウンディングボックス]が表示されます。
[バウンディングボックス]は他での操作と同じように自由に変形することができ、中心の点をつかむことでキーフレームの位置関係を保ったまま移動できます。
また、[バウンディングボックス]を拡大縮小することでカーブの振幅を調整することができます。

複数選択をした状態でShiftキーやAltキーを押しながらドラッグすることで下記の動作をします。

[Shift]+ドラッグ 上下に垂直移動
[Shift]+ドラッグ 縦横比を保ったまま拡大縮小
[Alt]+ドラッグ アンカーが中心にある状態で拡大縮小
[Shift]+[Alt]+ドラッグ 縦横比を保ったまま、アンカーが中心にある状態で拡大縮小

POINT
現在[Shift]+ドラッグ(縦横比を保ったまま拡大縮小)、[Alt]+ドラッグ、[Shift]+[Alt]+ドラッグの操作で不具合が発生しており、今後修正予定となっております。
ご不便をおかけしており誠に申し訳ございませんが、ご了承くださいますよう、何卒お願い申し上げます。(2018年1月23日)

プロパティの複数選択

プロパティは複数選択することが可能です。

選択方法:

  • [Ctrl]+クリックで個別選択
  • [Shift]+クリックで範囲選択

 

 

 

タイムラインの拡大と縮小

[Alt]+[マウスホイール]でタイムラインの横幅を拡大縮小ができます。
拡大縮小の中心はカーソルの位置です。

TIPS
ドープシートも同様の操作で拡大縮小を行うことができます。

[Alt]+[Ctrl]+[マウスホイール]でタイムラインの縦幅を拡大縮小ができます。

 

 

カーブの適用

後述する5種類のカーブをグラフに適用するには、カーブ上のキーを選択した状態でそれぞれのカーブのボタンをクリックします。

ここではデフォルトの設定である[オートスムーズ]を[リニア]に変更してみます。

選択したキーフレームの次のキーフレームをつなぐカーブが[リニア]になりました。

複数選択した状態でカーブを変更することもできます。

5種類のカーブの詳細は後述の『5種類のカーブ』の項目をご覧ください。

 

5種類のカーブ

同じパラメータ上で2つ以上キーを挿入すると、それぞれのキーの間は自動的にカーブで補間されます。
CubismEditor3.0には補間するカーブの種類が5種類あり、様々なアニメーションを作成することができます。

オートスムーズ

デフォルトのキーフレーム補間法は[オートスムーズ]です。
適用したキーの間はなめらかなカーブでつながります。
アニメーションはゆっくり動き始め、次のキーフレームへ向かって減速する動きになります。

ボタン 実際のアニメーション グラフエディタのカーブ

 

リニア

適用したキーの間は直線でつながります。
アニメーションは一定で変化し、直線的な動きになります。

ボタン 実際のアニメーション グラフエディタのカーブ

 

ステップ

適用したキーの間は前のキーフレームの数値に合わせた水平の直線でつながります。
アニメーションは前後の絵が一瞬で変化するように動きます。

ボタン 実際のアニメーション グラフエディタのカーブ

 

インバースステップ

適用したキーの間は後ろのキーフレームの数値に合わせた水平の直線でつながります。
アニメーションは前後の絵が一瞬で変化するように動きます。

ボタン 実際のアニメーション グラフエディタのカーブ

 

ベジェ

キーを選択し、[ベジェ]ボタンをクリックすることでキーに黄色の[ベジェハンドル]が表示されます。
端の丸い部分をつかむことで上下左右に動かすことができ、カーブの形を自由に編集することができます。

ボタン 実際のアニメーション グラフエディタのカーブ

 

SDK組み込み時の注意事項

作成したアニメーションをSDKに組み込む場合にはいくつかの注意点があります。
詳しくは下記のページをご覧ください。

SDK組み込み時の注意事項

Copyright © 2018 Live2D Inc.