髪や服の「揺れ」の動きを表現する
対応バージョン：Cubism 2.0以降
（解説ではCubism Editor 2.0を使用しているので、最新版ソフトウェアと若干見た目や操作が異なる場合があります。）
チュートリアル作者：KAZUYA (URL: http://design-illust.blog.jp)
映像関係のデザイナー。
「Live2D Creative Award 2014」でファイナリスト。
ここでは風が吹いた時の髪や服の揺れを説明していきます。
ループでの使用を想定していますので、ずっと風が吹くシーンや
応用の仕方により海の中のシーンなどに使えると思います。
－－目次－－
ステップ１：揺れをつける素材の準備
ステップ２：変形パスでの揺れの作成【髪の毛、マフラー】
ステップ３：曲面デフォーマでの揺れの作成【服、スカート】
ステップ４：アニメーターでループする揺れを調整
－－－－－－
このチュートリアルで作成されたファイルのサンプルは、以下のボタンからダウンロードできます。ダウンロードした際は、
下記の【このデータの利用条件】に同意したものとみなされます。
【このデータの利用条件】
● 商用利用：NG。できません。
● 再配布：NG。できません。
● 改変：個人利用、テスト用途のみOKです。
Article & data, Copyright © 2015 KAZUYA
ステップ1. 揺れをつける素材の準備
【1】描き起こしとパーツ分け
風が吹く方向を決め絵を描き起こします。
風の強さにもよりますが、風の吹く方向を決めそれに基づいて絵を描き起こします。
今回のサンプルは左から右へと意識しています。
TIPS
髪の毛のカーブ
髪の毛のカーブはキツくなりすぎない方が
後の工程でコントロールしやすいです。
カーブがキツイと揺らした時に
髪の自然な動きが作りにくくなります。
パーツ分けと描き足し
絵を書き起こしたらパーツ分けて、
髪が揺れた時に見える部分も想定し描き足しておきます。
この作業は動きを作りながら後で足していく場合もあります。
（手前の青い髪の部分が動くと想定して、
後ろの髪や服も描いておく）
スカートと足の重なり順
スカートなどは手前の面と奥の面で
足を挟むように画像を分けておきます。
これはスカート揺れたときに、
手前も奥も見える範囲が変わるため、
作成しておく必要性があるからです。
描き起こして、分けたパーツはこのようになります。
動く箇所は「髪」「マフラー」「スカート」「目の瞬き」です。
ステップ2. 変形パスでの揺れの作成【髪の毛、マフラー】
では、作成した素材で髪やマフラーなどの揺れに有効な「変形パス」を使い、
髪の揺れのループを作成していきます。
【1】パスを付ける
まずは髪の動きをつけるための軸となるパスを付ける作業です。
動かしたい①オブジェクトを選択し、②変形パスのアイコンをクリックした後、
③髪の流れにそって変形パスを作成します。パスは髪のカーブが起こる箇所に合わせてポイントを作るようにします。
【2】髪に動きを付ける
次に作成した変形パスに合わせて、髪に動きをつけていく作業に入ります。
①変形パスとオブジェクトの両方選択した状態で、②動かしたい箇所のパラメータを設定をクリック。
③パラメータのポイント数は決まっていませんが、ここでは5つ作成します。
ポイントはバーをクリックする事で作ることができます。
パラメータの作成ができたら、次はそのパラメータのポイントとに合わせ、髪の動きを付けていきます。
ループの動きを作るためには、最初と最後の絵が同じでないといけないので、ポイントの両端は動かしません。
今回は中の3つを使い髪を波打たせます。（右図の赤枠の部分が動かさないポイントです）
【3】パスの動かし方
パスの動かし方は、
①パラメータ内の「髪揺れ 後」などの動かしたいにポイントにカーソルを合わせ、右クリック、
その後②パスのポイントクリックしたまま移動する事で、動きを設定することができます。
赤枠の真ん中の3つを順に選択して、髪の動きをつけていきましょう。
上記で作成した3つのポイント髪の動きをGIF動画で確認するとこんな感じになります。
風は目に見えてはいませんが、わかりやすくするために青丸をつけてみました。
実際に存在する物体が通り過ぎることで髪が動いていると想像すると動きがつけやすいでしょう。
同じ理屈で前髪やマフラーなども作成します。
理屈は同じですので、説明は割愛しますが、
根元は髪の毛が生えているのを想像し、
つむじの方から毛先に向かってパスをつけると良いでしょう。
TIPS：髪やマフラーの根本は動かさない
基本的に髪やマフラーは根本は固定されているはずなので動かすことはありません
TIPS：風の表現のコツ
風は目に見えませんが、実際は吹いている方向から物体として通過していると考えて髪に動きを付けると良いでしょう。
ステップ3. 曲面デフォーマでの揺れの作成【服、スカート】
ここでは衣服などの揺れに有効的な
曲面デフォーマを使っての揺れのループを説明します。
【1】曲面デフォーマを作る
①動かしたいオブジェクトを選択し、②「デフォーマを作成」のボタンを押す。
①名前は任意のものをつけておいてください。
②曲面を選択、②分割数は決まっていませんが、ここでは5×5にしておきます。
デフォーマが作成できたら、Ctrlキーを押しながら赤枠を動かし、デフォーマの形をスカートの角度や大きさに合わせます。
角度や大きさを合わせる事で、衣服の形状を活かした動きがつけられると思います。
【2】曲面デフォーマにパラメータを設定する
続いて、作成した曲面デフォーマにパラメータを設定します。
デフォルトにはないスカートなど新しいパラメータを追加するには
パラメータパネルにある①「パラメータ設定」をクリックし、
②「新規値」をさらにクリックして③新規のパラメータを作成する必要があります。
新規でパラメータが作成できたら、
パス同様、パラメータのポイントの両端は動かさず、左から右へと風を意識して
曲面デフォーマのポイントを動かします。パスが線で動かすのに対して、曲面デフォーマ
は面として意識しながら動きをつけると良いでしょう。
作成したスカートの動きをGIF動画で確認するとこんな感じです。
TIPS：スカートの揺れの作り方
スカートの揺れは髪と同様に風の流れを意識することに加え、風によってフワッと膨らむ感じを出すと良いでしょう。
これで揺れの動きの説明は終わりですが、これ以外にも目の瞬きなど必要に応じで、他の動きもつけておきましょう。
ステップ4. アニメーターでループする揺れを調整
最後にアニメーターで揺れができるだけ自然に見えるように調整をしていきます。
ループは作り方により、動きに変なリズムができてしまうので、ここの調整しだいでそれを緩和する事ができます。
【1】アニメーターを使ってみる
モデラーで設定したファイルをアニメーターで読み込み、
タイムラインの「Live2Dパラメータ」で、作成した
髪やマフラーなどに-1～1の数値を入れて動かします。
ここでは例として、0～29コマを使い１秒の動きを作りますが、
この後の工程で、前後合わせて8コマほど削るので、0～29コマ＋8コマの合計
0～37コマ（1秒7コマ）を使い髪のループを作ります。
揺れ開始は①0コマで-1、揺れの終わりは②1秒7コマで1を設定します。
※このサンプルではマフラーの揺れのみ数値が逆になっています。
理由としてはあまりにも全部が同じ動きだと逆に不自然に見えるので、あえて動きを逆にしています。
下図では髪、マフラー、スカートに揺れの動きがついています。
アニメの基本はこれで完成ですが、これだけだとループ再生した時にカクカクした動きになるので、前後の数コマを削り自然な動きにします。
ここでは前後、各4コマ（合計8コマ）削っていますが、
削る数はものによって変わるので、自分なりの調整をしてみましょう。
【2】揺れの調整
ワークエリアを縮めてループを確認し、削るコマ数やループそのもののコマ数など
調整していきます。
ワークエリア内でループ確認ができたら、表示の幅を実際使っている幅だけにします。
ここでは前後4コマずつ削ります。
表示範囲の削り方は、端をつかんで移動させることで長さの調整ができます。
あと、矢印を移動させることで位置を変更できます。
調整すると下図のような感じになります。（アニメの開始は0コマ、終わりは29コマ）
これで1秒のループの絵が完成です。
できたループをコピーして3つにします。
そのうちの１つにまばたきをさせ、髪やマフラーが3回揺れる間に、
1回瞬きのループ絵を作成します。
これは髪の1揺れに対して瞬きを１回にすると瞬きの回数が多くなり
絵が不自然になるのを防ぐために行うものです。
動きの作成が終わったら背景と合成し、フィルタなどをかけたら完成です。
サンプルは最終的にAdobeのAfterEffectsで合成し加工してますが、
使うツールは任意のもので構いません。
これでこのチュートリアルの動きは完成となります。
Aricle copyright © 2015 KAZUYA