Animationen

Einführung

Das Animationssystem von Godot ist extrem leistungsstark und flexibel.

Beginnen wir mit der Szene aus dem vorherigen Tutorial (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ücke die „Neue Animation“-Schaltfläche und benenne 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ähle bei geöffnetem Animationseditor-Bedienfeld den Node „Logo“ aus, setze die Eigenschaft „Rect / Position“ auf (118, -400) und drücke die Schlüsselknopf neben der Eigenschaft:

../../_images/robisplash_anim_logo_inspector_key.png

Wenn das Dialogfeld angezeigt wird, vergewissere Dich, dass Du eine neue Spur erstellst.

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

../../_images/robisplash_anim_editor_keyframe.png

Bewege den Editor-Mauszeiger zeitlich vorwärts, indem Du hier klickst:

../../_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

Pressing „Play selected animation from start“ button on the animation panel (or Shift + D on keyboard) will make the logo descend.

../../_images/robisplash_anim_editor_play_start.png

Klicke 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