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.

Cutout-Animation

Was ist das?

Traditionell ist die Cutout-Animation eine Art der Stop-Motion-Animation, bei der Papierstücke (oder anderes dünnes Material) in spezielle Formen geschnitten und zu zweidimensionalen Darstellungen von Charakteren und Objekten angeordnet werden. Die Körper der Charaktere bestehen in der Regel aus mehreren Teilen. Die Teile werden angeordnet und für jedes Bild des Films einmal fotografiert. Der Animateur bewegt und dreht die Teile in kleinen Schritten zwischen jeder Aufnahme, um die Illusion von Bewegung zu erzeugen, wenn die Bilder schnell hintereinander abgespielt werden.

Simulationen von Cutout-Animationen können jetzt mit Hilfe von Software erstellt werden, wie in South Park und Jake und die Nimmerland Piraten.

Auch in Videospielen ist diese Technik populär geworden. Beispiele dafür sind Paper Mario oder Rayman Origins.

Cutout-Animation in Godot

Godot bietet Tools für die Arbeit mit Cutout-Rigs und ist ideal für den Workflow:

  • Das Animationssystem ist vollständig in die Engine integriert: Das bedeutet, dass Animationen viel mehr als nur die Bewegung von Objekten steuern können. Texturen, Sprite-Größen, Pivotpunkte, Deckkraft, Farbmodulation und vieles mehr können animiert und überblendet werden.

  • Kombinieren Sie Animationsstile: AnimatedSprite2D ermöglicht die Verwendung der traditionellen Cel-Animation neben der Cutout-Animation. Bei der Cel-Animation werden für verschiedene Animations-Frames völlig unterschiedliche Zeichnungen verwendet, anstatt dieselben Teile unterschiedlich zu positionieren. In einer ansonsten Cutout-basierten Animation kann die Cel-Animation selektiv für komplexe Teile wie Hände, Füße, wechselnde Gesichtsausdrücke usw. verwendet werden.

  • Benutzerdefinierte Form-Elemente: Benutzerdefinierte Formen können mit Polygon2D erstellt werden und erlauben UV-Animation, Verformungen, etc.

  • Partikelsysteme: Ein ausgeschnittenes Animations-Rig kann mit Partikelsystemen kombiniert werden. Dies kann für magische Effekte, Jetpacks, etc. nützlich sein.

  • Benutzerdefinierte Collider: Legen Sie Collider und Einflussbereiche in verschiedenen Teilen der Skelette fest, ideal für Bosse und Kampfspiele.

  • Animationsbaum: Ermöglicht komplexe Kombinationen und Blending zwischen mehreren Animationen, wie es auch in 3D der Fall ist.

Und vieles mehr!

Die Erstellung von GBot

Für dieses Tutorial werden wir als Demo-Inhalt die Teile des Charakters GBot verwenden, die von Andreas Esau erstellt wurde.

../../_images/tuto_cutout_walk.gif

Holen Sie sich die Assets: cutout_animation_assets.zip.

Einrichten des Rigs

Erstellen Sie einen leeren Node2D als Root der Szene, um darunter zu arbeiten:

../../_images/tuto_cutout1.png

Der erste Node des Modells ist die Hüfte. Im Allgemeinen ist die Hüfte sowohl in 2D als auch in 3D der Root des Skeletts. Das macht es einfacher, es zu animieren:

../../_images/tuto_cutout2.png

Als nächstes kommt der Torso. Der Torso muss ein Child-Element der Hüfte sein, also erstellen Sie ein Child-Sprite und laden Sie die Torso-Textur, später passen Sie sie richtig an:

../../_images/tuto_cutout3.png

Das sieht gut aus. Schauen wir, ob unsere Hierarchie als Skelett funktioniert, indem wir den Torso rotieren. Wir können dies tun, indem wir E drücken, um den Rotationsmodus zu aktivieren, und mit der linken Maustaste ziehen. Um den Rotationsmodus zu verlassen, drücken Sie ESC.

../../_images/tutovec_torso1.gif

Der Rotations-Pivotpunkt ist falsch und muss angepasst werden.

Dieses kleine Kreuz in der Mitte des Sprite2D ist der Rotations-Pivotpunkt:

../../_images/tuto_cutout4.png

Anpassen des Pivotpunkts

Der Pivotpunkt kann durch Ändern der Property offset im Sprite2D angepasst werden:

../../_images/tuto_cutout5.png

Der Pivotpunkt kann auch visuell eingestellt werden. Während Sie den Mauszeiger über den gewünschten Pivotpunkt halten, drücken Sie V, um den Pivotpunkt für das ausgewählte Sprite2D dorthin zu verschieben. Es gibt auch ein Tool in der Toolbar, das eine ähnliche Funktion hat.

../../_images/tutovec_torso2.gif

Fügen Sie weitere Körperteile hinzu und beginnen Sie mit dem rechten Arm. Achten Sie darauf, jedes Sprite an der richtigen Stelle in der Hierarchie zu platzieren, damit seine Rotationen und Translationen relativ zu seinem Parent sind:

../../_images/tuto_cutout6.png

Beim linken Arm gibt es ein Problem. In 2D erscheinen die Child-Nodes vor ihren Parents:

../../_images/tuto_cutout7.png

Wir wollen, dass der linke Arm hinter der Hüfte und dem Torso erscheint. Wir könnten die Nodes des linken Arms hinter die Hüfte verschieben (über den Node der Hüfte in der Szenenhierarchie), aber dann ist der linke Arm nicht mehr an seinem richtigen Platz in der Hierarchie. Das bedeutet, daß er von der Bewegung des Torsos nicht beeinflußt werden würde. Wir werden dieses Problem mit RemoteTransform2D-Nodes beheben.

Bemerkung

Sie können auch Probleme mit der Tiefenanordnung beheben, indem Sie die Z-Property eines beliebigen Nodes, der von Node2D geerbt hat, anpassen.

RemoteTransform2D-Node

Der RemoteTransform2D-Node transformiert Nodes an anderer Stelle in der Hierarchie. Dieser Node wendet seine eigene Transformation (einschließlich aller Transformationen, die er von seinen Eltern erbt) auf den entfernten Node an, den er anvisiert.

Auf diese Weise können wir die Sichtbarkeitsreihenfolge unserer Elemente korrigieren, unabhängig von der Position dieser Teile in der Cutout-Hierarchie.

Erzeugen Sie einen RemoteTransform2D-Node als Child des Torsos. Nennen Sie ihn remote_arm_l. Erzeugen Sie einen weiteren RemoteTransform2D-Node innerhalb des ersten und nennen Sie ihn remote_hand_l. Benutzen Sie die Property Remote Path der beiden neuen Nodes, um die Sprites arm_l und hand_l anzuvisieren:

../../_images/tuto_cutout9.png

Das Bewegen der RemoteTransform2D-Nodes bewegt nun die Sprites. Wir können also Animationen erzeugen, indem wir die RemoteTransform2D-Transformationen anpassen:

../../_images/tutovec_torso4.gif

Vervollständigen des Skeletts

Vervollständigen Sie das Skelett, indem Sie die gleichen Schritte für die restlichen Teile ausführen. Die resultierende Szene sollte ungefähr so aussehen:

../../_images/tuto_cutout10.png

Das resultierende Rig ist einfach zu animieren. Durch Auswahl der Nodes und deren Rotation können Sie die Vorwärtskinematik (Forward Kinematics, FK) effizient animieren.

Für einfache Objekte und Rigs ist dies in Ordnung, es gibt jedoch Einschränkungen:

  • Die Auswahl von Sprites im Haupt-Viewport kann bei komplexen Rigs schwierig werden. Stattdessen wird der Szenenbaum verwendet, um Teile auszuwählen, was langsamer sein kann.

  • Inverse Kinematik (IK) ist nützlich für die Animation von Extremitäten wie Händen und Füßen und kann mit unserem Rig in seinem aktuellen Zustand nicht verwendet werden.

Um diese Probleme zu lösen, werden wir Godots Skelette benutzen.

Skelette

In Godot gibt es ein Hilfsmittel zum Erstellen von "Knochen" zwischen Nodes. Die mit Knochen verknüpften Nodes werden als Skelette bezeichnet.

Lassen Sie uns als Beispiel den rechten Arm in ein Skelett verwandeln. Um ein Skelett zu erstellen, muss eine Kette von Nodes von oben nach unten ausgewählt werden:

../../_images/tuto_cutout11.png

Klicken Sie dann auf das Skelett-Menü und wählen Sie Knochen erzeugen.

../../_images/tuto_cutout12.png

Dadurch werden Knochen hinzugefügt, die den Arm verdecken, aber das Ergebnis ist vielleicht unerwartet.

../../_images/tuto_cutout13.png

Warum fehlt der Hand ein Knochen? In Godot verbindet ein Knochen einen Node mit seinem Parent. Und es gibt derzeit kein Child des Hand-Nodes. Mit diesem Wissen können wir es noch einmal versuchen.

Der erste Schritt ist die Erstellung eines Nodes für den Endpunkt. Jede Art von Node ist geeignet, aber Marker2D ist besser geeignet, da er im Editor sichtbar ist. Der Endpoint Node sorgt dafür, dass der letzte Knochen eine Orientierung hat.

../../_images/tuto_cutout14.png

Wählen Sie nun die gesamte Kette, vom Endpunkt bis zum Arm, und erstellen Sie Knochen:

../../_images/tuto_cutout15.png

Das Ergebnis ähnelt nun viel mehr einem Skelett, und der Arm und der Unterarm können nun ausgewählt und animiert werden.

Erstellen Sie Endpunkte für alle wichtigen Extremitäten. Erzeugen Sie Knochen für alle artikulierbaren Teile des Ausschnitts, wobei die Hüfte die entscheidende Verbindung zwischen all diesen Teilen darstellt.

Sie werden feststellen, dass beim Verbinden von Hüfte und Torso ein zusätzlicher Knochen erstellt wird. Godot hat den Node der Hüfte mit einem Knochen mit des Szenen-Root verbunden, und das wollen wir nicht. Um dies zu beheben, wählen Sie den Root- und den Hüftknoten aus, öffnen das Skeleton-Menü und klicken auf Knochen löschen.

../../_images/tuto_cutout15_2.png

Ihre fertiges Skelett sollte in etwa so aussehen:

../../_images/tuto_cutout16.png

Vielleicht haben Sie eine zweite Gruppe von Endpunkten in den Händen bemerkt. Dies wird gleich mehr Sinn ergeben.

Nachdem die gesamte Figur geriggt ist, ist der nächste Schritt das Einrichten der IK-Ketten. IK-Ketten ermöglichen eine natürlichere Steuerung der Extremitäten.

IK-Ketten

IK steht für Inverse Kinematik. Es ist eine praktische Methode, um die Position von Händen, Füßen und anderen Extremitäten von Rigs wie dem von uns erstellten zu animieren. Stellen Sie sich vor, Sie möchten den Fuß eines Charakters in einer bestimmten Position auf dem Boden positionieren. Ohne IK-Ketten würde jede Bewegung des Fußes die Drehung und Positionierung mehrerer anderer Knochen erfordern (zumindest des Unterschenkels und des Oberschenkels). Das wäre ziemlich komplex und würde zu ungenauen Ergebnissen führen. Mit IK können wir den Fuß direkt bewegen, während sich der Unterschenkel und der Oberschenkel selbst einstellen.

Bemerkung

IK-Ketten in Godot funktionieren derzeit nur im Editor, nicht zur Laufzeit. Sie sollen das Einrichten von Keyframes erleichtern und sind derzeit nicht für Methoden wie prozedurale Animation geeignet.

Um eine IK-Kette zu erstellen, wählen Sie eine Kette von Knochen vom Endpunkt bis zur Basis für die Kette aus. Um zum Beispiel eine IK-Kette für das rechte Bein zu erstellen, wählen Sie Folgendes aus:

../../_images/tuto_cutout17.png

Aktivieren Sie dann diese Kette für IK. Wechseln Sie zu Bearbeiten > IK-Kette erstellen.

../../_images/tuto_cutout18.png

Dadurch wird die Basis der Kette Gelb.

../../_images/tuto_cutout19.png

Sobald die IK-Kette eingerichtet ist, greifen Sie ein beliebiges untergeordnetes Element entlang der Kette (z. B. einen Fuß) und bewegen es. Sie werden sehen, dass sich der Rest der Kette anpasst, wenn Sie seine Position ändern.

../../_images/tutovec_torso5.gif

Tipps zur Animation

Der folgende Abschnitt ist eine Sammlung von Tipps zur Erstellung von Animationen für Ihre Cutout-Rigs. Weitere Informationen darüber, wie das Animationssystem in Godot funktioniert, finden Sie unter Einführung in die Animations-Features.

Festlegen von Keyframes und Ausschließen von Propertys

Spezielle Kontextelemente werden in der oberen Toolbar angezeigt, wenn das Animations-Editorfenster geöffnet ist:

../../_images/tuto_cutout20.png

Der Key-Button fügt Positions-, Rotations- und Skalierungs-Keyframes für die ausgewählten Objekte oder Knochen an der aktuellen Abspielkopfposition ein.

Mit den Schalter-Buttons "loc", "rot" und "scl" links neben dem Schlüssel können Sie deren Funktion ändern und festlegen, für welche der drei Propertys Keyframes erstellt werden sollen.

Hier ist eine Illustration, wie dies nützlich sein kann: Stellen Sie sich vor, Sie haben einen Node, der bereits zwei Keyframes hat, die nur seine Skalierung animieren. Sie möchten demselben Node eine überlappende Rotationsbewegung hinzufügen. Die Rotation soll zu einem anderen Zeitpunkt beginnen und enden als die Skalierungsänderung, die bereits eingerichtet ist. Mit den Schalterbuttons können Sie festlegen, dass beim Hinzufügen eines neuen Keyframes nur Rotationsinformationen hinzugefügt werden. Auf diese Weise können Sie vermeiden, dass unerwünschte Skalierungs-Keyframes hinzugefügt werden, die eine bestehende Skalierungsanimation unterbrechen würden.

Erstellen einer Standardpose

Stellen Sie sich eine Standardpose (auch Rest-Pose) als eine Default-Pose vor, auf die Ihr Cutout-Rig eingestellt werden sollte, wenn keine andere Pose in Ihrem Spiel aktiv ist. Erstellen Sie eine Standardpose wie folgt:

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

  1. Erstellen Sie eine neue Animation und benennen Sie sie in "rest" um.

  2. Wählen Sie alle Nodes in Ihrem Rig aus (die Box-Auswahl sollte gut funktionieren).

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

Nur Rotation ändern

Bei der Animation eines Cutout-Rigs muss oft nur die Rotation der Nodes geändert werden. Position und Skalierung werden nur selten verwendet.

Beim Einfügen von Keys kann es also sinnvoll sein, die meiste Zeit nur den "rot"-Schalter zu aktivieren:

../../_images/tuto_cutout22.png

Dadurch wird die Erstellung unerwünschter Animationsspuren für Position und Skalierung vermieden.

Keyframing von IK-Ketten

Wenn Sie IK-Ketten bearbeiten, müssen Sie nicht die gesamte Kette auswählen, um Keyframes hinzuzufügen. Wenn Sie den Endpunkt der Kette auswählen und einen Keyframe einfügen, werden automatisch auch für alle anderen Teile der Kette Keyframes eingefügt.

Ein Sprite visuell hinter seinen Parent verschieben

Manchmal ist es notwendig, dass ein Node während einer Animation seine visuelle Tiefe relativ zu seinem Parent-Node ändert. Stellen Sie sich eine Figur vor, die der Kamera zugewandt ist und etwas hinter ihrem Rücken hervorzieht und es vor sich hält. Während dieser Animation müssten der gesamte Arm und das Objekt in seiner Hand ihre visuelle Tiefe relativ zum Körper der Figur ändern.

Zu diesem Zweck gibt es eine keyframe-abhängige "Hinter Parent"-Property für alle von Node2D erbenden Nodes. Überlegen Sie sich bei der Planung Ihres Rigs, welche Bewegungen es ausführen soll, und überlegen Sie sich, wie Sie "Hinter Parent"- und/oder RemoteTransform2D-Nodes verwenden werden. Sie bieten überlappende Funktionen.

../../_images/tuto_cutout23.png

Festlegen von Easing-Kurven für mehrere Tasten

Um dieselbe Easing-Kurve auf mehrere Keyframes gleichzeitig anzuwenden:

  1. Wählen Sie die entsprechenden Keys aus.

  2. Klicken Sie auf das Stiftsymbol unten rechts im Animationsfenster, um den Übergangseditor zu öffnen.

  3. Klicken Sie im Übergangseditor auf die gewünschte Kurve, um sie anzuwenden.

../../_images/tuto_cutout24.png

2D-Skelettverformung

Skelettverformung kann verwendet werden, um ein Cutout-Rig zu erweitern, so dass sich einzelne Teile organisch verformen können (z. B. Fühler, die wackeln, wenn eine Insektenfigur läuft).

Dieser Prozess wird in einer separaten Anleitung beschrieben.