オブジェクトを動かすアニメーションにおいて
直線的な動きではなく、軌跡に沿って動かしたい場合に
モーションパスの機能を使用します。 

前回の記事で制作したシャボン玉の動きなどがまず最たる例です。
ゆらゆらと右往左往しながら浮かんでいく動きです。

20170114_g1
 

 ===============================

■ モーションパスをつけよう


さっそく作っていきます。
キャラクターが「ぷぅっ!」と吹くアニメーションに
玉の発生を合わせます。

20170118_g1


吹く瞬間に玉が表示されるようにするために
玉の開始フレーム位置を合わせます。

20170118_01


つづいて、モーションパスの設置は、スキマティックウィンドウです。
ウィンドウの右下の「新規モーションパス」ボタン、もしくは
なにもないところを右クリックしてメニューから「新規モーションパス」を選択します。

20170118_02

20170118_03


モーションをつける対象(今回はBub7が対象のシャボン玉)を選んでから
モーションパスを設置すると、パスの短冊と対象が繋がった状態で設置されます。

繋がっていない場合は、下画像のように対象の下の緑丸とPath短冊を繋ぎましょう
繋ぐと、ステージ上に少し見にくいですがピンク色の「0」文字と点線が表示されます。

 
20170118_04


まずは、これでモーションパスオブジェクトの設置完了です。


 *******************************

★ここでワンポイント

上の画像では、動かしたいシャボン玉(水色の丸) と
だいぶ離れたところに「0」のピンクポイントができてしまいました。

ピンクの0ポイントから、点線のラインに沿って
対象が移動するのがモーションパスなのですが
この状態だと、この距離を保った状態で点線の形に移動するという
見た目的にすごく扱いづらいことになります。

原因は、レベル自体の中心点とズレたところにシャボン玉が描かれているせいです。
「編集ツール」で中心点をずらしてもこの問題は解決できません
レベルの中の絵自体をきちんと中心に持っていってあげるしかないのです…(2017/01/13現在)

なので、絵とモーションパスの位置がおかしい!という場合は
レベルの中の位置を修正しましょう。

まず中心位置を把握するために、「表示」→「フィールドガイド」にチェックを入れて
ステージの座標ガイドを表示させます。

20170118_05

そしてレベルビューアから、対象の絵を選択して
メインビューアにレベルの絵を映します。

すると中心点の座標(0 , 0)からだいぶ離れたところに
絵があることがわかります。

  20170118_06

まったく! なんでそんな位置に描いてしまったのでしょう!
(まぁいろいろ事情はあるわけですが・・・)
とにかくこれは不便なので修正します。

玉の中心を(0 , 0)に合わせました

20170118_07


そしてタイムシートの絵に戻ると
ちゃんと0ポイントの位置に玉がきました
  20170118_08

これでパスの線と絵の位置が揃いました。
問題解決です。

*********************************


■ パス(軌跡)を描こう
 
シャボン玉がどういうラインをたどるのか、パスの線を編集していきます。
2つの方法があります。

 ・ ベジェ曲線で編集する
 ・ 手描きで描く

---------------------------------

 まずは基本的なベジェ編集の方法から紹介します。
パス編集ツール」 を使用します。 

20170118_09
 

そしてポイントは、「スキマティック」上でパスの短冊を選んでから
ステージ上の点線をクリックします。

この手順を踏まないとなぜか選択できません。(2017/01/13現在)

20170118_10
 
うまく選択できたらベジェを編集するためのアンカーポイントとハンドルの表示になります。

パス線の「がスタート地点で、「がゴール地点になるので
0の点を、噴出口に合わせて
1を飛んでいった先の上空にします。

あとは下画像のように線の編集です。
線の途中を、CTRLを押しながらクリックするとポイントを追加できます。
点を選んでDELETEを押せば消すこともできます。
(ベジェ曲線の編集のコツとか、いつか書けたら書きたいと思います。)

20170118_g2

 
これで軌跡が描けました。

-------------------------------

ベジェの編集に慣れていない人は、手描きで描いた線にします。
ブラシツール」 を使用します。

20170118_14
 
 そして、スキマティックウィンドウでパスの短冊を選択してから
ステージ上で線を描きます。

先ほどベジェで描いたように、噴出口から上空に向かって蛇行した曲線を描きます。
ちなみに・・・ひと筆で描かなければいけません。

もしくは別にすでに描いて用意してある1本の線をコピーしてきて
パスの短冊を選択して、ステージに貼り付ける、という方法もできます。

いずれかの方法で、ステージ上に線が描かれると
「この線をモーションパスにしてもいいですか?」的なことを英語で聞かれるので
「はい」を押しましょう。

20170118_15


------------------------------

これでモーションの動きの線が設定できたことになります。

=====================


■ 動き始めと終わりの時間を設定しよう

つづいて、パラメータウィンドウを開いて
対象となるBub7のposPathを表示させます。

右側のブラウザでクリックすると表示されます。

20170118_11


まず、「ぷぅっ!」と吹く瞬間が14フレームなので、14フレームに「0」を入力します。

20170118_12

 そして、終点となるのはこの動画の終わりの72フレーム目なので
72フレームに、「100」を入力します。
ポイントは、モーションパスの線は 0→1 と書いてあるのに
パラメータは、0→100 ということです!

20170118_13
 

これで、再生してみると
シャボン玉が描いたパスの軌跡に沿ってきちんと動いてくれました! 

20170118_g3
 
=========================


■ 動きに抑揚をつける

モーションパスという目的は果たせたのですが
このままだと、ずっと一定の速度で動いてしまっているので
シャボン玉っぽさが弱いので、緩急をつけます。

前回の記事のイージングをかける説明でも書いたように
グラフエディタを使って、Bub7のposPathの曲線を編集します。

最初に吹いた瞬間は勢いよくまっすぐ伸びる坂
そのあとは、ゆるやかに蛇行するような坂にすることで、ふわふわと緩急がつきます。(微妙なニュアンスレベルのことですが…)

20170118_16


これをすべてのシャボン玉につけてあげることでこうなりました!

20170114_g1


 =========================


■ まとめ

説明すると長々となってしまって
なんか難しそう、複雑っぽいって思うかもしれませんが
慣れるとそうでもないです。工程としては単純です!


① 動かす絵を描く
スキマティックでその絵にモーションパスを設置
パスの線を描く・編集する (開始位置0、終了位置1 (正確にはパスのアンカーポイントの数))
パラメータエディタで、開始・終了フレームを設定 (開始位置0、終了位置100)
⑤ 速度の緩急を調整する

以上です!