Introduction to the animation features

Übersicht

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

  • eine Eigenschaft eines beliebigen Nodes zu animieren

  • eine simple Animation zu erstellen

  • auf Funktionen mithilfe der Funktionsaufrufspur zuzugreifen

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.

The 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.

The animation panel position

Das Animationspanel in der Bodenleiste

Es besteht aus vier Bereichen:

The animation panel

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.

Keyframes 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.

Two keyframes are all it takes to obtain a smooth motion

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.

The timeline in the animation panel

Die Zeitleiste im Animationsfenster

Each line of the Animation Panel is an animation track. Normal and Transform tracks reference node properties. Their name or id is a path to the node and the affected property.

Example of Normal animation tracks

Beispiel für normale Animationsspuren

Tipp

If you animate the wrong property, you can edit a track's path anytime. Double click on it and type the new path. Play the animation using the "Play from beginning" button Play from beginning (or pressing Shift + D on keyboard) to see the changes instantly.

Anleitung: Erstellen einer einfachen Animation

Eine Szene einrichten

For this tutorial, we'll create an AnimationPlayer node and a sprite node as its child.

Our scene setup

Unser Szenenaufbau

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.

Tipp

Adding animated nodes as children to the AnimationPlayer node is not required, but it is a nice way of distinguishing animated nodes from non-animated nodes in the Scene Tree.

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.

Add a new animation

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:

Convenience buttons

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:

The sprite track

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.

Animation length

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:

The 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.

Animation loop

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.

Track settings

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: Aktualisiert die Eigenschaft nur für Keyframes oder Trigger

  • Erfassen: Der aktuelle Wert einer Eigenschaft wird gespeichert und mit dem ersten gefundenen Animationsschlüssel vermischt

Track mode

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

Track 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:

Loop modes

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 for other properties

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 editing a key

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 Godot API 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.

Add Call Method Track

Aufrufmethoden-Spur hinzufügen

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

Select AudioStreamPlayer

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