2016-02-08 23:45:57 +01:00
|
|
|
.. _doc_animations:
|
2016-02-08 22:07:55 +01:00
|
|
|
|
2016-02-07 22:54:52 +01:00
|
|
|
Animations
|
|
|
|
==========
|
2016-02-06 01:54:33 +01:00
|
|
|
|
|
|
|
Introduction
|
|
|
|
------------
|
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Godot's animation system is extremely powerful and flexible.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
To begin, let's use the scene from the previous tutorial (:ref:`doc_splash_screen`).
|
|
|
|
The goal is to add a "fade-in" animation to the splash image. Here's a copy
|
2017-10-14 14:25:27 +02:00
|
|
|
just in case: :download:`robisplash.zip <files/robisplash.zip>`.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Add an animation player
|
|
|
|
-----------------------
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2016-02-19 22:00:07 +01:00
|
|
|
First of all, add an :ref:`AnimationPlayer <class_AnimationPlayer>`
|
2018-01-10 05:44:38 +01:00
|
|
|
node to the scene as a child of "background" (the root node):
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_inspector.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
|
|
|
When a node of this type is selected, the animation editor panel will
|
|
|
|
appear:
|
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_editor.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
The animation editor panel stays visible until manually hidden.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Creating the animation
|
|
|
|
----------------------
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
It's time to create a new animation! Press the new animation button and name
|
|
|
|
the animation "intro" when the dialog appears.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_new.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Now that we have an animation the property editor enters
|
2016-12-13 22:10:03 +01:00
|
|
|
"animation editing" mode. In this mode, a key icon appears next to
|
2018-01-10 05:44:38 +01:00
|
|
|
every property of the property editor. In Godot any property of an object
|
|
|
|
can be animated:
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_property_keys.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Editing the animation
|
|
|
|
---------------------
|
2016-02-09 23:40:35 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
The logo will appear from the top of the screen.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
With the animation editor panel open, select the "logo" node and set the
|
|
|
|
"Rect / Position" property to ``(118, -400)`` and press the key button next
|
|
|
|
to the property:
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_logo_inspector_key.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
When the dialog appears, confirm that you are creating a new track.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2016-12-13 22:10:03 +01:00
|
|
|
The keyframe will be added in the animation player editor:
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_editor_keyframe.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2016-12-13 22:10:03 +01:00
|
|
|
Move the editor cursor to the end, by clicking here:
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_editor_track_cursor.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Change the logo position to ``(118, 0)`` and add a keyframe again. With two
|
2016-02-06 01:54:33 +01:00
|
|
|
keyframes, the animation happens.
|
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_editor_keyframe_2.png
|
|
|
|
|
|
|
|
Pressing "Play selected animation from start. (Shift-D)" on the animation panel
|
|
|
|
will make the logo descend.
|
|
|
|
|
|
|
|
.. image:: img/robisplash_anim_editor_play_start.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
Click the "Autoplay on Load" button to set the animation to start automatically
|
|
|
|
when the scene starts.
|
2016-02-06 01:54:33 +01:00
|
|
|
|
2018-01-10 05:44:38 +01:00
|
|
|
.. image:: img/robisplash_anim_editor_autoplay.png
|
2016-02-06 01:54:33 +01:00
|
|
|
|
|
|
|
And finally, when running the scene, the animation should look like
|
|
|
|
this:
|
|
|
|
|
2017-10-14 14:19:23 +02:00
|
|
|
.. image:: img/out.gif
|