Einführung in die Animationsfunktionen

Der AnimationPlayer-Node erlaubt es, allerlei Animationen zu erstellen - von ganz einfachen bis hin zu recht komplexen Abläufen.

In dieser Einführung lernst Du:

  • mit dem Animationspanel zu arbeiten

  • Eigenschaften eines beliebigen Nodes zu animieren

  • eine simple Animation zu erstellen

  • Funktionen mithilfe der Funktionsaufrufspur aufzurufen

In Godot können Sie jeden Wert im Inspektor animieren. Eine Animation entsteht, indem der Wert oder Zustand einer Eigenschaft zeitabhängig verändert wird. So lässt sich alles Mögliche animieren: Sprites, UI-Elemente, Partikel, die Sichtbarkeit sowie Texturfarben. Aber nicht nur: Sie können jede Funktion eines Skripts aus dem AnimationPlayer aufrufen und so den weiteren Spielverlauf steuern.

Einen AnimationPlayer-Node anlegen

Um die Werkzeuge zur Animation zu verwenden, benötigen wir zunächst einen AnimationPlayer-Node.

Der AnimationPlayer-Node dient als Container für Animationsabfolgen. Es können mehrere Animationen in einem AnimationPlayer-Node enthalten sein, sodass es einen automatischen Übergang von der einen zur anderen gibt.

Der AnimationPlayer-Node

Der AnimationPlayer-Node

Klicken Sie nach dem Erstellen auf den AnimationPlayer-Node im Node-Tab, um das Animationspanel im Ansichtsbereich unten zu öffnen.

Das Animationspanel in der Bodenleiste

Das Animationspanel in der Bodenleiste

Es besteht aus vier Bereichen:

Das Animationspanel

Das Animationspanel

  • Bedienfelder zur Organisation von Animationen (d.h. hinzufügen, laden, speichern und löschen von Animationen)

  • die Liste der Animationsspuren

  • die Zeitleiste mit angelegten Schlüsselbildern (Keyframes)

  • die Bedienfelder zur Verkleinerung/Vergrößerung der Zeitleiste sowie Bearbeitung der Spuren.

Computeranimation basiert auf Keyframes

Ein Keyframe definiert den Wert einer Eigenschaft zu einem bestimmten Zeitpunkt.

Diamond shapes represent keyframes in the timeline. A line between two keyframes indicates that the value hasn't changed.

Schlüsselframes in Godot

Schlüsselframes in Godot

Die Engine interpoliert Werte zwischen Keyframes, was zu einer allmählichen Veränderung der Werte im Laufe der Zeit führt.

Zwei Keyframes genügen, um eine reibungslose Bewegung zu erreichen

Zwei Keyframes genügen, um eine reibungslose Bewegung zu erreichen

The timeline lets you insert keyframes and change their timing. It also defines how long the animation is.

Die Zeitleiste im Animationsfenster

Die Zeitleiste im Animationsfenster

Jede Zeile der Animationstafel ist eine Animationsspur. Normal- und Transformationsspuren verweisen auf Nodeeigenschaften. Ihr Name oder ihre ID ist ein Pfad zum Node und der betroffenen Eigenschaft.

Beispiel für normale Animationsspuren

Beispiel für normale Animationsspuren

Tipp

Wenn Sie die falsche Eigenschaft animieren, können Sie den Pfad einer Spur jederzeit bearbeiten. Doppelklicken Sie darauf und geben Sie den neuen Pfad ein. Spielen Sie die Animation mit der Schaltfläche "Von Anfang an abspielen" ab (oder drücken Sie Shift + D auf der Tastatur), um die Änderungen sofort zu sehen.

Anleitung: Erstellen einer einfachen Animation

Eine Szene einrichten

In diesem Tutorial erstellen wir ein Sprite-Node mit einem AnimationPlayer als dessen Kind. Wir werden das Sprite animieren und es soll sich zwischen zwei Punkten auf dem Bildschirm zu bewegen.

Unser Szenenaufbau

Unser Szenenaufbau

Warnung

AnimationPlayer inherits from Node instead of Node2D or Spatial, which means that the child nodes will not inherit the transform from the parent nodes due to a bare Node being present in the hierarchy.

Therefore, it is not recommended to add nodes that have a 2D/3D transform as a child of an AnimationPlayer node.

The sprite holds an image texture. We animate that sprite to move between two points on the screen. For this tutorial, use the default Godot icon as the sprite's texture. As a starting point, move the sprite to a left position on the screen.

Select the AnimationPlayer node, then click the "Animation" button in the animation editor. From the list select "New" (Add Animation) to add a new animation. And Enter a name for the animation in the dialog box.

Fügen Sie eine neue Animation hinzu

Fügen Sie eine neue Animation hinzu

Hinzufügen einer Spur

Um eine neue Spur für unser Sprite hinzuzufügen, wählen Sie sie aus und sehen Sie in der Symbolleiste nach:

Komfortable Schaltflächen

Komfortable Schaltflächen

Mit diesen Schaltern und Schaltflächen können Sie Keyframes für die Position, Rotation und Skalierung des ausgewählten Nodes hinzufügen.

Deaktivieren Sie die Rotation, da wir für diese Anleitung nur an der Position unseres Sprites interessiert sind und klicken Sie auf die Schlüssel-Schaltfläche.

Da wir noch keine Spur für die Transformation/Lokation-Eigenschaft eingerichtet haben, fragt Godot, ob er es für uns einrichten soll. Klicken Sie auf Erstellen.

Dadurch entsteht eine neuer Spur und unser erster Keyframe am Anfang der Zeitachse:

Die Sprite-Spur

Die Sprite-Spur

Der zweite Keyframe

Jetzt müssen wir das Ziel festlegen, wohin unser Sprite gehen soll und wie lange es dauert, bis es dort ankommt.

Nehmen wir an wir möchten, dass es 2 Sekunden dauert, um zum anderen Punkt zu kommen. Standardmäßig dauert die Animation nur 1 Sekunde. Ändern Sie dies in den Steuerelementen der Zeitleiste im unteren Bereich des Animationsfensters auf 2.

Animationslänge

Animationslänge

Klicken Sie auf die Kopfzeile der Zeitleiste in der Nähe der 2-Sekunden-Marke und bewegen Sie das Sprite zum Zielort auf der rechten Seite.

Klicken Sie erneut auf die Schaltfläche in der Symbolleiste. Dadurch wird unser zweiter Keyframe erstellt.

Die Animation starten

Klicken Sie auf die Schaltfläche "Von Anfang an spielen" (|Von Anfang an spielen|).

JA! Unsere Animation läuft:

Die Animation

Die Animation

Hin und her

Godot hat hier eine zusätzliche Funktion. Wie bereits erwähnt, berechnet Godot immer die Frames zwischen zwei Keyframes. In einer Schleife ist der erste Keyframe auch der letzte, wenn am Ende kein weiterer Keyframe angegeben wird.

Animationsschleife

Animationsschleife

Wenn Sie jetzt die Animationslänge auf 4 Sekunden einstellen, bewegt sich die Animation vor und zurück. Sie können dieses Verhalten ändern, wenn Sie den Schleifenmodus der Spur ändern. Dies wird im nächsten Kapitel behandelt.

Spur-Einstellungen

Jede Spur verfügt über ein Einstellungsfenster am Ende, in dem Sie den Aktualisierungsmodus, die Spurinterpolation und den Schleifenmodus festlegen können.

Spur-Einstellungen

Spur-Einstellungen

Der Aktualisierungsmodus einer Spur teilt Godot mit, wann die Eigenschaftswerte aktualisiert werden sollen. Dies kann sein:

  • Fortlaufend: Aktualisiert die Eigenschaft für jeden Frame.

  • Diskret: Aktualisiert die Eigenschaft nur für Keyframes.

  • Trigger: Only update the property on keyframes or triggers. Triggers are a type of keyframe used by the current_animation property of a AnimationPlayer, and Animation Playback tracks.

  • Capture: If the first keyframe's time is greater than 0.0, the current value of the property will be remembered and will be blended with the first animation key. For example, you could use the Capture mode to move a node that's located anywhere to a specific location.

Spur-Modus

Spur-Modus

In normalen Animationen verwenden Sie normalerweise "Fortlaufend". Die anderen Typen werden verwendet, um komplexe Animationen zu skripten.

Die Interpolation sagt Godot, wie die Frame-Werte zwischen den Keyframes berechnet werden sollen. Diese Interpolationsmodi werden unterstützt:

  • Nächstgelegene: Legen Sie den nächsten Keyframe-Wert fest

  • Linear: Legen Sie den Wert basierend auf einer linearen Funktionsberechnung zwischen den beiden Keyframes fest

  • Kubisch: Legen Sie den Wert basierend auf einer Berechnung der kubischen Funktion zwischen den beiden Keyframes fest

Spur-Interpolation

Spur-Interpolation

Die kubische Interpolation führt zu einer natürlicheren Bewegung, wobei die Animation bei einem Keyframe langsamer und zwischen den Keyframes schneller ist. Dies wird normalerweise für Charakteranimation verwendet. Die lineare Interpolation führt zu einer eher roboterhaften Bewegung.

Godot unterstützt zwei Schleifenmodi, die sich auf die Animation auswirken, wenn sie auf Schleife eingestellt ist:

Schleifenmodi

Schleifenmodi

  • Klemmschleifen-Interpolation: Wenn dies ausgewählt ist, stoppt die Animation nach dem letzten Keyframe für diese Spur. Wenn das erste Keyframe wieder erreicht wird, wird die Animation auf ihre Werte zurückgesetzt.

  • Wrap-Loop-Interpolation: Wenn diese Option ausgewählt ist, berechnet Godot die Animation nach dem letzten Keyframe, um wieder die Werte des ersten Keyframes zu erreichen.

Keyframes für andere Eigenschaften

Godot beschränkt Sie nicht darauf, nur Transformationseigenschaften zu bearbeiten. Jede Eigenschaft kann als eine Spur verwendet werden, in der Sie Keyframes festlegen können.

Wenn Sie Ihr Sprite auswählen, während das Animationspanel sichtbar ist, erhalten Sie einen kleinen Keyframe-Button für alle Eigenschaften des Sprites. Wenn Sie auf diese Schaltfläche klicken, fügt Godot automatisch eine Spur und ein Keyframe zur aktuellen Animation hinzu.

Keyframes für andere Eigenschaften

Keyframes für andere Eigenschaften

Keyframes bearbeiten

Zur erweiterten Verwendung und zum detaillierten Bearbeiten von Keyframes können Sie darauf klicken, um den Keyframe-Editor im Inspektor aufzurufen. Sie können dies verwenden, um die Werte direkt zu bearbeiten.

Keyframe-Editor zum Bearbeiten eines Schlüssels

Keyframe-Editor zum Bearbeiten eines Schlüssels

Darüber hinaus können Sie den Beschleunigungswert für diesen Keyframe bearbeiten, indem Sie auf die Beschleunigungseinstellung klicken und sie ziehen. Dies teilt Godot mit, wie die Eigenschaftswerte geändert werden sollen, wenn dieser Keyframe erreicht wird.

Normalerweise optimieren Sie Ihre Animationen auf diese Weise, wenn die Bewegung nicht "richtig aussieht".

Fortgeschritten: Aufruf von Methodenspuren

Godots Animations-Engine hört hier nicht auf. Wenn Sie bereits mit Godots Skriptsprache GDScript Grundlagen und All classes vertraut sind, wissen Sie, dass jeder Node-Typ eine Klasse ist und über eine Reihe von aufrufbaren Methoden verfügt.

Beispielsweise verfügt der Node-Typ AudioStreamPlayer über eine Methode zum Abspielen eines Audiostreams.

Wäre es nicht toll, eine Methode an einem bestimmten Keyframe in einer Animation zu verwenden? Hier sind "Call Method Tracks" praktisch. Diese Spuren verweisen erneut auf einen Node, diesmal ohne Verweis auf eine Eigenschaft. Stattdessen enthält ein Keyframe den Namen und die Argumente einer Methode, die Godot aufrufen sollte, wenn er diesen Keyframe erreicht.

Zur Demonstration verwenden wir eine Aufrufmethode, um Audio in einem bestimmten Keyframe abzuspielen. Normalerweise sollten Sie zum Abspielen von Audio eine Audiospur verwenden, aber um die Methoden zu demonstrieren, werden wir dies auf diese Weise tun.

Fügen Sie dem Szenenbaum ein AudioStreamPlayer hinzu und richten Sie einen Stream mit einer Audiodatei ein, die Sie in Ihr Projekt eingefügt haben.

Klicken Sie auf "Spur hinzufügen" (|Spur hinzufügen|) in der Spursteuerung des Animationspanels.

Wählen Sie "Anrufmethode-Spur hinzufügen" aus der Liste der möglichen Spur-Typen.

Aufrufmethoden-Spur hinzufügen

Aufrufmethoden-Spur hinzufügen

Wählen Sie im Auswahlfenster den Node AudioStreamPlayer. Godot fügt die Spur mit dem Verweis auf den Node hinzu.

AudioStreamPlayer auswählen

AudioStreamPlayer auswählen

Klicken Sie mit der rechten Maustaste auf die Zeitachse, in der Godot das Beispiel abspielen soll und klicken Sie auf die Option "Schlüssel einfügen". Dadurch wird eine Liste der Methoden angezeigt, die für den AudioStreamPlayer-Node aufgerufen werden können. Wählen Sie die erste Methode aus.

../../_images/animation_method_options.png

Wenn Godot den Keyframe erreicht, ruft Godot die "Play"-Funktion des Nodes AudioStreamPlayer auf und der Stream wird abgespielt.

Sie können die Position ändern, indem Sie sie auf die Timeline ziehen. Sie können auch auf den Keyframe klicken und die Keyframe-Einstellungen im Inspektor verwenden.

../../_images/animation_call_method_keyframe.png

Using RESET tracks

You can set up a special RESET animation to contain the "default pose". This is used to ensure that the default pose is restored when you save the scene and open it again in the editor.

For existing tracks, you can add an animation called "RESET" (case-sensitive), then add tracks for each property that you want to reset. The only keyframe should be at time 0, and give it the desired default value for each track.

If AnimationPlayer's Reset On Save property is set to true, the scene will be saved with the effects of the reset animation applied (as if it had been seeked to time 0.0). This only affects the saved file – the property tracks in the editor stay where they were.

If you want to reset the tracks in the editor, select the AnimationPlayer node, open the Animation bottom panel then choose Apply Reset in the animation editor's Animation dropdown menu.

When adding tracks on new animations, the editor will ask you to automatically create a RESET track when using the keyframe icon next to a property in the inspector. This does not apply on tracks created with Godot versions prior to 3.4, as the animation reset track feature was added in 3.4.