【Cavalry 学習9】パスに沿って図形を動かす
本日はこちらのチュートリアル
この動画では、シェイプをパスに沿ってアニメーションさせる方法と、シェイプをパスの進行方向に向ける方法を見ていく。また、ボーナスとして、シェイプをパスに沿って変形させる方法も紹介する。
この例では、パスに沿って移動する際に曲げられた長方形を使用しており、同じツールを使用してこれを行う方法を解説する。
まずペンツールを使ってパスを描くことから始める。これがオブジェクトが追従するパスとなる。適当に形を描き、描画を終了する。その後、描いたパスを画面外に移動させ、オブジェクトの出現を防ぐ。
次に矢印を作成する。矢印プリミティブをAltキーを押しながらクリックして形を選ぶ。これを使用する。オブジェクトをパスに沿って移動させるには「Pathfinder」を使用する。これはパス上の位置を計算するツールである。
パスに沿って移動させるには「Pathfinder」
パスファインダーを追加するには、ポジション属性を右クリックし、「Add Behavior」を選択して「Pathfinder」を選ぶ。
ポジション>Add Behavior>Pathfinder
パスファインダーの設定を開き、入力シェイプとしてペンツールで描いたパスをドラッグする。トラベル（Travel）を調整すると、矢印がパスに沿って移動する様子が確認できる。
デフォルトでは、パスはループするため、終点に達すると開始点に戻る。トラベルを逆方向にスクロールすれば、逆の動きになる。
PathfinderのInput Shapeに図形をドラッグ
→トラベルの値を動かすとアニメーションする
次に、矢印をパスの進行方向に向ける設定を行う。パスファインダーの回転データは「Value」タブに保存されているので、これを矢印の回転属性にドラッグして接続する。これで、パスに沿った矢印のアニメーションが完成する。
パスに沿って移動する矢印のアニメーションが完成したので、次にシーンの他の部分をどのように設定したかを説明する。矢印シェイプを選択し、これを複製ツールに追加しようとしたが、変形が適用されているオブジェクトを直接複製ツールに追加することはできない。この場合、まずオブジェクトをグループ化してから複製ツールに追加する必要がある。
分布をランダムに変更し、個数や配置を調整する。色を設定する場合は、ライブラリのパレットを使用し、パレットから色配列を作成して、出力を矢印のフィルカラーに接続する。
次に、複製された矢印にドロップシャドウフィルターを追加し、影の強さや色を調整する。
図形にドロップシャドウ→Filters
パスファインダーのトラベルをアニメーションさせる前に、現時点ではタイムラインをスクロールしてもアニメーションが発生していないことに気付く。そのため、パスファインダーにアニメーションを追加する必要がある。
パスファインダーのトラベルをアニメーションさせるには、フレームビヘイビアを追加する。これはカウンターのような役割を果たし、値をカウントアップさせることでアニメーションを作成する。フレームビヘイビアを追加するだけで、パスに沿ったトラベルのアニメーションが可能になる。
Frameとは：
BehaviourにFrameを適用すると数字をカウントアップしてくれるってことか。。。
ちなみに普通にTravel属性でキーフレームを打ってもアニメーションはできた。
また、複製ツールにランダムビヘイビアを追加して、各矢印の動きをずらす。これで、ランダムにパスを移動する矢印のアニメーションが完成する。
▼Random Behaviour付与後の動き。最後がなんか溜まる。笑
ここからは応用編なので一旦手つかず。
次に、シェイプをパスに沿って変形させる方法を紹介する。新しいシーンを作成し、再びパスを描画する。長方形を作成し、エッジ分割数を増やす。これにより、形状が曲げられる際のジオメトリを確保する。
長方形の変形には、デフォーマータブの「＋」ボタンを押して「Pathfinder」を追加する。その後、描いたパスを入力シェイプとしてドラッグする。トラベルを調整すると、パスに沿って形状が曲がる様子が確認できる。ループをオフにすることで、形状がパスの終点を超えるとそのまま飛び出す動きになる。
エッジ分割数を調整すると、形状の変形の滑らかさが変わる。分割数が少ない場合、曲線に合わせて曲がらないが、分割数を増やすと滑らかに曲がるようになる。これで、パスに沿った変形アニメーションが完成する。同じ手順で複製ツールを使い、色を設定することで、さらに応用が可能である。
このようにして、Cavalryでオブジェクトをパスに沿ってアニメーションさせたり変形させたりする方法を解説した。ぜひ活用してほしい。
まとめ
Discussion