Einführung in die 2D-Animation¶
Ü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.
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
Es besteht aus vier Bereichen:
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
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
The timeline lets you insert keyframes and change their timing. It also defines how long the animation is.
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.
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 
(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.
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" (
) to add a new animation. And Enter a name for the animation in the
dialog box.
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
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
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
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
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
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
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
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
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
- 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 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
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.
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
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.
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.
