After Effectsでラバーホースの手足に短縮遠近法用の幅コントロールを追加する方法
ラバーホースの手足に幅コントロールを追加するには、ストローク幅と両端のテーパー幅を、それぞれ独立したスライダーとして公開します。次に、手足のポーズと合わせてこれらのコントロールをアニメーションさせます。見た目の長さを短くし、どちらの端が手前にあるかを示し、その方向を支えるように幅の変化を調整します。
このチュートリアルは、After Effectsのネイティブシェイプレイヤーで手足を扱うキャラクターアニメーターを対象としています。Rubberhose 3のホースも含みます。ここでは、視聴者に向かって、または視聴者から遠ざかるスタイライズされたターンに使える、再利用可能な太さのコントロールを作成します。以下の手順では、ドキュメントに記載されたコントロールと例示的なポーズテストを組み合わせます。提案する値は、作画上の判断に使う開始値です。
1. 手足の曲げと太さを分ける
まず、中心線を変えるプロパティとシルエットを変えるプロパティを見分けます。Rubberhose 3では、Hose lengthがホースがまっすぐになるコントローラー間の距離を決めます。Directionはホースの曲がる方向を制御し、Battle Axeはカメラに近づく、または遠ざかる動きを表すためにDirectionをアニメーションさせる方法を具体的に提案しています。これらはポーズを付けるのに便利なコントロールですが、見た目の幅を調整するコントロールの代わりにはなりません。Battle Axe: Controls
Battle Axeのドキュメントによると、ホースはシェイプレイヤーとして扱われ、ストローク、塗り、レイヤースタイル、エフェクトを組み合わせて見た目を作れます。また、スタイルプリセットと曲げプリセットを区別しており、曲げプリセットでは太さは変わりません。この設定では、幅コントロールの対象が明確になるよう、まず単一のストロークで描画するシンプルなホースを使います。Battle Axe: Styles
独立して調整できる値を3つ用意します。最大ストローク幅、開始側の幅のパーセンテージ、終了側の幅のパーセンテージです。これらを別々にしておくと、テーパーを作り直さずに全体の太さを変えられます。また、手足のパスを反転させずに、奥行きの見え方を逆にできます。
2. シンプルな手足を準備し、パスの方向を確認する
リグを変更する前に、作業用のプロジェクトコピーを保存します。手足を1本選び、輪郭全体が見やすいニュートラルなポーズにします。装飾的なディテールでシルエットが見づらい場合は、一時的にシンプルなスタイルで作業します。
ホースレイヤーのContentsを展開し、実際に手足を描画しているストロークを探します。見つけるには、幅を一時的に少し変更し、画面上の変化を確認してから取り消します。見た目に複数のストロークが使われている場合は、先にどれを本体のストロークとして扱うか決めます。
パスの開始点が肩や腰だと決めつけないでください。片方の端のテーパー幅を変えて、どちらの端が反応するか確認します。コントローラー名に対応関係を記録します。たとえば、「Start Width — Shoulder」「End Width — Wrist」のようにします。この確認をしておけば、後で調整する端を取り違えずに済みます。
新しいネイティブシェイプレイヤーのテスト用には、塗りなし、ストロークありの開いた曲線パスを描きます。既存のホースを使う場合は、生成済みのパスとリグの接続を維持します。目的はパス周りの描画プロパティを変更し、ポーズのシステムを引き続き使える状態にすることです。
3. スライダーを接続する前にテーパーを設定する
表示されているストロークの下で、Taperを展開します。After Effectsでは、影響する範囲を指定するStart LengthとEnd Length、両端の太さを調整するStart WidthとEnd Widthが用意されています。対応するテーパーの長さがゼロの場合、端点の幅を変えてもテーパーの見た目は変わりません。長さの単位にPercentageを使うと、パスの長さに対する割合で変化の範囲を指定できます。Adobe: How to taper shape strokes
最初は次のように設定します。
- Length UnitsをPercentageに設定します。
- Start LengthとEnd Lengthをそれぞれ50%に設定します。
- Start WidthとEnd Widthをそれぞれ100%に設定します。
- 最初の変化をシンプルにするため、Start EaseとEnd Easeを0に設定します。
これは提案する初期プロファイルであり、必須のリグ仕様ではありません。両端をニュートラルな値にしておけば、テーパーを加える前の基準になります。コントロールが動作したら、キャラクターの輪郭に合わせて変化の長さとイージングを調整します。最初のポーズテストでは、幅の変化だけを評価できるよう、これらの設定は固定しておきます。
4. アニメーター向けのスライダーを3つ追加して接続する
「Limb Width Controls」という名前のヌルレイヤーを作成します。Effect > Expression Controls > Slider ControlからSlider Controlエフェクトを3つ適用します。各エフェクトの名前を変更し、以下の初期値を入力します。Adobeでは、ヌルにエクスプレッションコントロールを配置して、他のレイヤーのプロパティから参照できます。Adobe: Using expression controls
| スライダー名 | 初期値 | 対象プロパティ |
|---|---|---|
| Maximum Width | 32 | Stroke Width |
| Start Width Percent | 100 | Taper > Start Width |
| End Width Percent | 100 | Taper > End Width |
対象の各プロパティで、WindowsではストップウォッチをAltキーを押しながらクリックし、macOSではOptionキーを押しながらクリックして、エクスプレッションを有効にします。エクスプレッションのピックウィップを、対応するスライダーの数値にドラッグします。次のプロパティに進む前に、それぞれの接続を確認しながら3つすべてに繰り返します。
ピックウィップを使うと、After Effectsが実際のレイヤー名とエフェクト名を使って参照を作成します。接続する前にコントロール名を変更し、複数のコントロールレイヤーを作る場合は、各手足で異なる名前を使います。Adobeは、エフェクトに内容が分かる名前を付けることを推奨しており、リンクしたエクスプレッションコントロールをキーフレーム化できると説明しています。Adobe: Using expression controls
各スライダーを個別にテストします。Maximum Widthではメインのストロークの太さが変わります。Start Width Percentは、確認した開始側の端に影響し、End Width Percentは反対側の端に影響するはずです。アニメーションを始める前に、両端のスライダーを100に戻します。この手順ではインターフェース上で接続するため、カスタムスクリプトは不要です。
5. 意図的に異なる3つのポーズで短縮遠近法をテストする
トランジションを仕上げる前に、3つのポーズを作り、それぞれホールドします。以下の値は設計の例であり、測定に基づく遠近法の結果ではありません。パスが肩から始まり、手首で終わることと、上記のテーパー長の設定を前提としています。
| テストポーズ | Maximum Width | Start Width Percent | End Width Percent | 作画の意図 |
|---|---|---|---|---|
| 横向きのニュートラル | 32 | 100 | 100 | 通常のシルエットを確認する |
| 手首が手前に近づく | 44 | 65 | 100 | 手首側を強調する |
| 手首が遠ざかる | 32 | 100 | 65 | 肩側を強調する |
手首が近づくポーズでは、画面上で手首を肩に近づけ、手足の見た目の長さを短くします。短くなったシルエットが意図的に見えるまで曲がり具合を調整してから、幅に差を付けます。手の大きさや重なりも向きの伝わり方に影響するため、手が見える状態で結果を判断します。
遠ざかるポーズでは、幅の強調を逆にし、キャラクターに対する手の位置も見直します。幅の値を2つ入れ替えるだけでは、ポーズが曖昧なままになることがあります。胴体から手足が出てくる位置や、手と接する位置も含め、輪郭全体を確認します。
アニメーション設計上の判断として、2つのコントローラー間の距離から幅を自動で連動させるのは避けます。端点間の距離が短いポーズには、横向きの曲げなど、さまざまな形がありえます。幅を独立して操作できれば、意図した奥行きの見え方を選べます。
極端に幅を変えないとポーズが伝わらない場合は、まず中心線と重なりを見直します。理解しやすい作画を、太さで補強してください。各ポーズが想定する表示サイズで読み取れるまで、3つのホールドポーズを調整します。
6. 太さが脈打つように変化しないようコントロールをアニメーションさせる
ホールドポーズが機能したら、対応するポーズの時点で3つのスライダーにキーフレームを設定します。まずはゆっくりしたトランジションをプレビューします。ポーズの間のフレームも、端点と同じくらい注意して確認します。説得力のある2つのポーズでも、その間に不自然なシルエットができることがあります。
確認するときは、位置、曲がり、幅のプロファイル、タイミングの順に見るとよいでしょう。手足がターンする前に膨らんで見える場合は、幅の変化をずらすか、緩やかにします。見た目の長さが変わらないまま手前側が太くなる場合は、長さを短くする段階をより明確にする必要がないか確認します。
トランジション全体を通して、手や足の接続を確認します。手が変わらないのに手首だけが太くなると、意図しない襟のような形になることがあります。必要に応じてつながる部分の絵を調整するか、局所的な幅の変化を小さくします。ホースだけを評価せず、全体のシルエットを見ながら作業します。
すべての手足に同じ幅のアニメーションを自動的に適用しないでください。まず代表的な動きを1つ仕上げ、設定の参考にします。それぞれの手足に固有のポーズと輪郭の判断が必要です。
7. 幅コントロールのよくある問題を診断する
| 症状 | 確認箇所 | 次に行うこと |
|---|---|---|
| 端点のスライダーが反応しないように見える | 対応するテーパー長と選択したストローク | 長さを0以外にし、表示中のストロークを確認する |
| 反対側の端が変わる | 実際のパスの方向 | コントローラーのラベルまたは接続を修正する |
| 幅の参照でエラーが表示される | レイヤー名とエフェクト名 | ピックウィップで接続し直す |
| 手足の中央部が膨らんで見える | 最大幅とテーパーの変化 | 最大幅を小さくするか、変化を調整する |
| 短縮したポーズが曖昧なまま | 中心線、端点の絵、重なり | テーパーを強める前にポーズを描き直す |
| スタイルを変更した後に幅コントロールが機能しなくなる | エクスプレッションが適用されたストローク | 意図した描画プロパティを確認し、接続し直す |
動きができたら、スタイルを保存して再利用できるようにします。Battle Axeではホースのスタイルを保存、コピーできますが、別のホースで設定を使う前にテストしてください。そのホースの幅参照が、意図したコントロールを参照していることを確認します。Battle Axe: Styles
完成したリグでは、すぐにニュートラルな太さに戻したり、どちらかの端を強調したり、幅の設定を作り直さずにポーズを修正したりできます。3つのコントロールをシンプルに保ち、両方向の奥行きでテストし、実際にキャラクターが見られるサイズでシルエットを仕上げます。
出典
- Battle Axe、『Controls』。
- Battle Axe、『Styles』。
- Adobe、『How to taper shape strokes』。
- Adobe、『Using expression controls』。
