カットアウトアニメーション

それは何ですか?

カットアウトアニメーションストップモーションアニメーション の一種で、紙片(または他の薄い素材)を特殊な形状にカットし、キャラクターやオブジェクトを2次元に配置します。キャラクターの体は通常、いくつかのピースで構成されています。このピースは、フィルムの各フレームごとに配置され、撮影されます。アニメーターは、各ショット間でパーツを少しずつ移動および回転させて、イメージを順番にすばやく再生して動いているように見せます。

カットアウトアニメーションのシミュレーションを、South ParkJake and the Never Land Pirates に見られるように、ソフトウェアを使用して作成できるようになりました。

ビデオゲームでは、このテクニックも人気となっています。その例としては、 ペーパーマリオ または「レイマン オリジン があります。

Godotのカットアウトアニメーション

Godotは、カットアウトリグを操作するためのツールを提供し、ワークフローに最適です:

  • アニメーションシステムはエンジンと完全に統合されています: これは、アニメーションがオブジェクトの動き以上のものを制御できることを意味します。テクスチャ、スプライトサイズ、ピボット、不透明度、色変調などをすべてアニメーション化およびブレンドできます。
  • アニメーションスタイルを組み合わせる: AnimatedSpriteでは、カットアウトアニメーションと一緒に従来のセルアニメーションを使用できます。セルアニメーションでは、異なるアニメーションフレームは、同じピースが異なる位置に配置されるのではなく、まったく異なる図面を使用します。カットアウトベースのアニメーションでは、セルアニメーションを手、足、表情の変化などの複雑なパーツに選択的に使用できます。
  • カスタムシェイプエレメント: カスタムシェイプは、Polygon2D で作成でき、UVアニメーション、変形などが可能です。
  • パーティクルシステム: カットアウトアニメーションリグは、パーティクルシステムと組み合わせることができます。これは魔法の効果、ジェットパックなどに役立ちます。
  • カスタムコライダー: スケルトンの異なる部分にコライダー(衝突検知)と影響領域を設定し、ボスや格闘ゲームに最適です。
  • アニメーションツリー: 3Dでの動作と同じように、複数のアニメーションを複雑に組み合わせたりブレンドしたりできます。

さらに多くも!

GBotの作成

このチュートリアルでは、Andreas Esauが作成した GBot キャラクターの一部をデモコンテンツとして使用します。

../../_images/tuto_cutout_walk.gif

アセットを取得します: gbot_resources.zip

リグのセットアップ

空のNode2Dをシーンのルートとして作成し、その下で作業します:

../../_images/tuto_cutout1.png

モデルの最初のノードは腰です。一般に、2Dと3Dの両方で、腰はスケルトンのルートです。これにより、アニメーションが簡単になります:

../../_images/tuto_cutout2.png

次は胴体になります。胴体は腰の子である必要があるため、子スプライトを作成して胴体のテクスチャをロードし、後で適切に調整します:

../../_images/tuto_cutout3.png

This looks good. Let's see if our hierarchy works as a skeleton by rotating the torso. We can do this be pressing E to enter rotate mode, and dragging with the left mouse button. To exit rotate mode hit ESC.

../../_images/tutovec_torso1.gif

回転ピボットが間違っているため、調整する必要があります。

Sprite の中央にあるこの小さな十字が回転ピボットです:

../../_images/tuto_cutout4.png

ピボットの調整

ピボットは、スプライトの offset プロパティを変更することで調整できます:

../../_images/tuto_cutout5.png

The pivot can also be adjusted visually. While hovering over the desired pivot point, press V to move the pivot there for the selected Sprite. There is also a tool in the tool bar that has a similar function.

../../_images/tutovec_torso2.gif

右腕からボディピースを追加していきます。各スプライトを階層内の正しい位置に配置し、その回転と移動が親に対して相対的になるようにしてください:

../../_images/tuto_cutout6.png

左腕には問題があります。2D では、子ノードは親ノードの前に表示されます:

../../_images/tuto_cutout7.png

左腕が腰と胴体の後ろに表示されるようにします。左腕のノードを腰の後ろ(シーン階層のヒップノードの上)に移動することはできますが、左腕は階層内の適切な位置にいなくなります。これは、胴体の動きに影響を受けないことを意味します。RemoteTransform2D ノードを使ってこの問題を修正します。

注釈

Node2Dから継承するノードのZプロパティを調整することで、深度の順序の問題を修正することもできます。

RemoteTransform2Dノード

RemoteTransform2D ノードは、階層内の別の場所にあるノードを変形します。このノードは、自身の幾何学変換(親から継承した幾何学変換の状態を含む)をターゲットのリモートノードに適用します。

これにより、要素の表示順序を、カットアウト階層内の部品の位置に関係なく独立して修正することができます。

胴体の子として RemoteTransform2D ノードを作成します。それを remote_arm_l と呼びます。最初のノード内に別のRemoteTransform2Dノードを作成し、remote_hand_l と呼びます。 2つの新しいノードの Remote Path` プロパティを使用して、それぞれ ``arm_l スプライトと hand_l スプライトをターゲットにします。

../../_images/tuto_cutout9.png

RemoteTransform2D ノードを移動すると、それに対応するスプライトが移動します。RemoteTransform2D の幾何学変換を調整することでアニメーションを作成できます:

../../_images/tutovec_torso4.gif

スケルトンの完成

残りのパーツについても同じ手順を実行して、スケルトンを完成させます。結果のシーンは次のようになります:

../../_images/tuto_cutout10.png

結果として得られるリグは、アニメーション化が容易になります。ノードを選択して回転させると、フォワードキネマティック(FK)が効率的にアニメートされます。

単純なオブジェクトとリグの場合、これは問題ありませんが、制限があります:

  • 複雑なリグでは、メイン ビューポートでスプライトを選択するのが難しくなる場合があります。代わりに、シーンツリーがパーツの選択に使用されることになり、作業がより遅くなる可能性があります。
  • インバースキネマティクス(IK)は、手や足などの四肢をアニメートするのに便利ですが、現在の状態のリグでは使用できません。

これらの問題を解決するために、Godotのスケルトンを使用します。

スケルトン

ゴドーにはノード間に「ボーン」を作成するヘルパーがあります。ボーンにリンクされたノードはスケルトンと呼ばれます。

例として、右腕をスケルトンに変えてみましょう。スケルトンを作成するには、ノードのチェーンを上から下に選択する必要があります:

../../_images/tuto_cutout11.png

次に、[スケルトンのオプション]メニューをクリックし、Make Bones(v3.1.2ではMake Custom Bone(s)...です)を選択します。

../../_images/tuto_cutout12.png

これにより、腕を覆う骨が追加されますが、結果に驚くかもしれません。

../../_images/tuto_cutout13.png

手には骨がないのはなぜですか? Godotでは、ボーンはノードをその親に接続します。そして、現在、手のノードに子はありません。この知識を得た上でもう一度試してみましょう。

最初の手順は、終点ノードの作成です。どのような種類のノードでも実行できますが、エディタに表示されるため、Position2D が適しています。終点ノードは、最後のボーンの方向を確定します。

../../_images/tuto_cutout14.png

次に、終点から腕までのチェーン全体を選択し、ボーンを作成します:

../../_images/tuto_cutout15.png

結果はスケルトンにとても似ており、腕と前腕を選択してアニメーション化できるようになりました。

すべての重要な四肢の終点を作成します。カットアウトの関節化が可能なすべての部分で骨を生成し、腰をすべての最終的な接続先として使用します。

腰と胴体を接続すると、余分な骨が作成されることに気付くかもしれません。 Godotは腰ノードをボーンでシーンルートに接続しましたが、これは望ましくありません。これを修正するには、ルートと腰ノードを選択し、スケルトンメニューを開き、``ボーンをクリア``(v3.1.2ではカスタムボーンをクリア)をクリックします。

../../_images/tuto_cutout15_2.png

最終的なスケルトンは次のようになります:

../../_images/tuto_cutout16.png

手の中に2つ目の終点のセットが表示されていることに気付いたかもしれません。これは少し先で理解できます。

フィギュア全体がリギングされたので、次のステップはIKチェーンの設定です。IKチェーンを使用すると、四肢をより自然に制御できます。

IKチェーン

IKはンバースキネマティックの略です。これは、手、足、その他のリグの先端の位置をアニメーション化するときに便利な手法です。キャラクターの足を地面の特定の位置にポーズしたいと想像してください。 IKチェーンがなければ、足の各動作には、他のいくつかのボーン(少なくともすねと太もも)を回転させて配置する必要があります。これは非常に複雑で、不正確な結果につながります。

IKを使用すると、すねと太ももを自己調整しながら、足を直接動かすことができます。

IKチェーンを作成するには、チェーンの終点からベースまでのボーンのチェーンを選択します。たとえば、右脚のIKチェーンを作成するには、次を選択します:

../../_images/tuto_cutout17.png

次に、このチェーンをIKに対して有効にします。 [スケルトンのオプション] -> [IKチェーンを作成]に移動します。

../../_images/tuto_cutout18.png

その結果、チェーンのベースが黄色に変わります。

../../_images/tuto_cutout19.png

IKチェーンを設定したら、チェーンのベースの子または孫(足など)をつかんで移動します。チェーンの位置を調整すると、チェーンの残りの部分も調整されます。

../../_images/tutovec_torso5.gif

アニメーションのヒント

次のセクションは、カットアウトリグのアニメーションを作成するためのヒント集です。Godot のアニメーション システムの動作の詳細については、アニメーション を参照してください。

キーフレームの設定とプロパティの除外

アニメーションエディタウィンドウが開いていると、特別なコンテキスト要素が上部のツールバーに表示されます:

../../_images/tuto_cutout20.png

キーボタンは、選択したオブジェクトまたはボーンの位置、回転、およびスケールのキーフレームを現在の再生ヘッドの位置に挿入します。

キーボタンの左側にある "loc"、"rot" および "scl" トグルボタンはその機能を変更し、3つのプロパティのとれにキーフレームが作成されるかを指定できるようにします。

これがどのように役立つかを説明します: すでに2つのキーフレームがそのスケールのみをアニメーション化しているノードがあるとします。そして、その同じノードにオーバーラップする回転移動を追加しますが、この回転動作は、既に設定されているスケールの変更とは異なる時間に開始および終了する必要があります。このような場合は、トグルボタンを使用することで、新しいキーフレームを追加するときに回転情報のみを追加できます。これにより、既存のスケールアニメーションを乱すような不要なスケールキーフレームの追加を回避できます。

レストポーズの作成

レストポーズは、ゲーム内で他のポーズがアクティブでないときに、カットアウトリグを設定する既定のポーズと考えてください。次のように、レストポーズを作成します:

1. Make sure the rig parts are positioned in what looks like a "resting" arrangement.

  1. 新しいアニメーションを作成し、"rest" に名前を変更します。
  2. リグ内のすべてのノードを選択します(ボックス選択は正常に機能するはずです)。

4. Make sure the "loc", "rot", and "scl" toggle buttons are all active in the toolbar.

5. Press the key button. Keys will be inserted for all selected parts storing their current arrangement. This pose can now be recalled when necessary in your game by playing the "rest" animation you've created.

../../_images/tuto_cutout21.png

回転のみを修正する

カットアウトリグをアニメーション化する場合、多くの場合、変更する必要があるのはノードの回転だけです。場所と縮尺はほとんど使用されません。

したがって、キーを挿入する際には、ほとんどの場合、「rot」トグルのみをアクティブにすると便利です。

../../_images/tuto_cutout22.png

これにより、位置と縮尺の不要なアニメーショントラックが作成されることを回避できます。

IKチェーンのキーフレーム

IKチェーンを編集する場合、キーフレームを追加するためにチェーン全体を選択する必要はありません。チェーンの終点を選択してキーフレームを挿入すると、チェーンの他のすべての部分にもキーフレームが自動的に挿入されます。

親の背後にスプライトを視覚的に移動する

アニメーション中に、親ノードを基準にしてノードの視覚的な深さ(前後関係)を変更する必要がある場合があります。カメラの方を向くキャラクターを考えてみてください。キャラクターが背中の後ろから何かを引き出し、目の前に差し出します。このアニメーション中に、腕全体と手のオブジェクトは、キャラクターの体に対して視覚的な深さを変更する必要があります。

これを支援するために、すべてのNode2D継承ノードにキーフレーム化が可能な "Behind Parent" プロパティがあります。リグを計画するときは、実行する必要のある動きについて考え、"Behind Parent" やRemoteTransform2Dノードをどのように使用するかについて考えてください。これらは、重複する機能を提供しています。

../../_images/tuto_cutout23.png

複数のキーのイージング曲線を設定する

同じイージング曲線を複数のキーフレームに一度に適用するには:

  1. 関連するキーを選択します。
  2. アニメーションパネルの右下にある鉛筆アイコンをクリックすると、トランジションエディタが開きます。
  3. トランジションエディタで、目的のカーブをクリックして適用します。
../../_images/tuto_cutout24.png

2Dスケルタル(ボーン)変形

スケルタル変形を使用して、カットリグを補強し、単一のピースを有機的に変形させることができます(たとえば、昆虫のキャラクターが歩くとぐらつく触覚)。

このプロセスは、別のチュートリアル で説明されています。