Work in progress

The content of this page was not yet updated for Godot 4.2 and may be outdated. If you know how to improve this page or you can confirm that it's up to date, feel free to open a pull request.

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

それは何ですか?

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

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

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

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

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

  • アニメーションシステムはエンジンと完全に統合されています: これは、アニメーションがオブジェクトの動き以上のものを制御できることを意味します。テクスチャ、スプライトサイズ、ピボット、不透明度、色変調などをすべてアニメーション化およびブレンドできます。

  • Combine animation styles: AnimatedSprite2D allows traditional cel animation to be used alongside cutout animation. In cel animation different animation frames use entirely different drawings rather than the same pieces positioned differently. In an otherwise cutout-based animation, cel animation can be used selectively for complex parts such as hands, feet, changing facial expressions, etc.

  • カスタムシェイプエレメント: カスタムシェイプは、Polygon2D で作成でき、UVアニメーション、変形などが可能です。

  • Particle Systems: A cutout animation rig can be combined with particle systems. This can be useful for magic effects, jetpacks, etc.

  • カスタムコライダー: スケルトンの異なる部分にコライダー(衝突検知)と影響領域を設定し、ボスや格闘ゲームに最適です。

  • アニメーションツリー: 3Dでの動作と同じように、複数のアニメーションを複雑に組み合わせたりブレンドしたりできます。

さらに多くも!

GBotの作成

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

../../_images/tuto_cutout_walk.gif

Get your assets: cutout_animation_assets.zip.

リグのセットアップ

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

../../_images/tuto_cutout1.png

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

../../_images/tuto_cutout2.png

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

../../_images/tuto_cutout3.png

これはよさそうです。胴体を回転させて、階層がスケルトンとして機能するかどうかを見てみましょう。これを行うには、:kbd`E` を押して回転モードに入り、マウスの左ボタンでドラッグします。回転モードを終了するには、ESC を押します。

../../_images/tutovec_torso1.gif

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

This small cross in the middle of the Sprite2D is the rotation pivot:

../../_images/tuto_cutout4.png

ピボットの調整

The pivot can be adjusted by changing the offset property in the Sprite2D:

../../_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 Sprite2D. 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

We want the left arm to appear behind the hip and the torso. We could move the left arm nodes behind the hip (above the hip node in the scene hierarchy), but then the left arm is no longer in its proper place in the hierarchy. This means it wouldn't be affected by the movement of the torso. We'll fix this problem with RemoteTransform2D nodes.

注釈

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

RemoteTransform2Dノード

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

This allows us to correct the visibility order of our elements, independently of the locations of those parts in the cutout hierarchy.

胴体の子として 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では、ボーンはノードをその親に接続します。そして、現在、手のノードに子はありません。この知識を得た上でもう一度試してみましょう。

The first step is creating an endpoint node. Any kind of node will do, but Marker2D is preferred because it's visible in the editor. The endpoint node will ensure that the last bone has orientation.

../../_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 stands for inverse kinematics. It's a convenient technique for animating the position of hands, feet and other extremities of rigs like the one we've made. Imagine you want to pose a character's foot in a specific position on the ground. Without IK chains, each motion of the foot would require rotating and positioning several other bones (the shin and the thigh at least). This would be quite complex and lead to imprecise results. IK allows us to move the foot directly while the shin and thigh self-adjust.

注釈

IK chains in Godot currently work in the editor only, not at runtime. They are intended to ease the process of setting keyframes, and are not currently useful for techniques like procedural animation.

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

../../_images/tuto_cutout17.png

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

../../_images/tuto_cutout18.png

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

../../_images/tuto_cutout19.png

Once the IK chain is set up, grab any child or grand-child of the base of the chain (e.g. a foot), and move it. You'll see the rest of the chain adjust as you adjust its position.

../../_images/tutovec_torso5.gif

アニメーションのヒント

The following section will be a collection of tips for creating animation for your cutout rigs. For more information on how the animation system in Godot works, see Introduction to the animation features.

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

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

../../_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

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

To apply the same easing curve to multiple keyframes at once:

  1. 関連するキーを選択します。

  2. Click on the pencil icon in the bottom right of the animation panel. This will open the transition editor.

  3. In the transition editor, click on the desired curve to apply it.

../../_images/tuto_cutout24.png

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

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

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