Animationen

Einführung

Das Animationssystem von Godot ist extrem leistungsstark und flexibel.

Beginnen wir mit der Szene aus der vorherigen Anleitung (Begrüßungsbildschirm). Das Ziel besteht darin, dem Begrüßungsbild eine "Einblend"-Animation hinzuzufügen. Hier ist eine Kopie für alle Fälle: robisplash.zip.

Hinzufügen eines Animationsplayers

Füge der Szene zunächst einen AnimationPlayer - Node als Kind von "background" (dem Wurzel-Node) hinzu:

../../_images/robisplash_anim_inspector.png

Wenn ein Node dieses Typs ausgewählt wird, wird der Animationseditor angezeigt:

../../_images/robisplash_anim_editor.png

Der Animationseditor bleibt sichtbar, bis er manuell ausgeblendet wird.

Erstellen einer Animation

Es ist Zeit eine neue Animation zu erstellen! Drücken Sie die „Neue Animation“-Schaltfläche und benennen die Animation „Intro“, wenn der Dialog angezeigt wird.

../../_images/robisplash_anim_button.png ../../_images/robisplash_anim_new.png

Jetzt, da wir eine Animation haben, wechselt der Eigenschafteneditor in den Modus "Animationsbearbeitung". In diesem Modus wird neben jeder Eigenschaft des Eigenschafteneditors ein Schlüsselsymbol angezeigt. In Godot kann jede Eigenschaft eines Objekts animiert werden:

../../_images/robisplash_anim_property_keys.png

Bearbeiten einer Animation

Das Logo erscheint oben auf dem Bildschirm.

Wählen Sie bei geöffnetem Animationseditor-Bedienfeld den Node "Logo" aus, setzen die Eigenschaft "Rect / Position" auf (118, -400) und drücken die Schlüsselknopf neben der Eigenschaft:

../../_images/robisplash_anim_logo_inspector_key.png

Wenn das Dialogfeld angezeigt wird, vergewissern Sie sich, dass Sie eine neue Spur erstellen.

Das Schlüsselbild wird im Animationsplayer-Editor hinzugefügt:

../../_images/robisplash_anim_editor_keyframe.png

Bewegen Sie den Editor-Mauszeiger zeitlich vorwärts, indem Sie hier klicken:

../../_images/robisplash_anim_editor_track_cursor.png

Ändere die Logo-Position zu (118, 0) und füge erneut ein Schlüsselbild hinzu. Bei zwei Schlüsselbildern erfolgt die Animation.

../../_images/robisplash_anim_editor_keyframe_2.png

Durch Drücken von "Ausgewählte Animation vom Start aus abspielen" im Animationsfenster (oder Umschalt + D auf der Tastatur), wird das Logo nach unten bewegt.

../../_images/robisplash_anim_editor_play_start.png

Klicken Sie auf die Schaltfläche "Automatisch beim Laden abspielen", um die Animation beim Start der Szene automatisch zu starten.

../../_images/robisplash_anim_editor_autoplay.png

Und zum Schluss sollte die Animation beim Ausführen der Szene so aussehen:

../../_images/out.gif