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