|
@@ -66,8 +66,8 @@ keyframes indicates that the value doesn't change between them.
|
|
|
|
|
|
Keyframes in Godot
|
|
|
|
|
|
-You set values of a node's properties and create animation keyframes for them.
|
|
|
-When the animation runs, the engine will interpolate the values between the
|
|
|
+You set values of a node's properties and create animation keyframes for them.
|
|
|
+When the animation runs, the engine will interpolate the values between the
|
|
|
keyframes, resulting in them gradually changing over time.
|
|
|
|
|
|
.. figure:: img/animation_illustration.png
|
|
@@ -75,18 +75,18 @@ keyframes, resulting in them gradually changing over time.
|
|
|
|
|
|
Two keyframes are all it takes to obtain a smooth motion
|
|
|
|
|
|
-The timeline defines how long the animation will take. You can insert keyframes
|
|
|
-at various points, and change their timing.
|
|
|
+The timeline defines how long the animation will take. You can insert keyframes
|
|
|
+at various points, and change their timing.
|
|
|
|
|
|
.. figure:: img/animation_timeline.png
|
|
|
:alt: The timeline in the animation panel
|
|
|
|
|
|
The timeline in the animation panel
|
|
|
|
|
|
-Each line in the Animation Panel is an animation track that references a
|
|
|
-Normal or Transform property of a node. Each track stores a path to
|
|
|
-a node and its affected property. For example, the position track
|
|
|
-in the illustration refers to to the ``position`` property of the Sprite
|
|
|
+Each line in the Animation Panel is an animation track that references a
|
|
|
+Normal or Transform property of a node. Each track stores a path to
|
|
|
+a node and its affected property. For example, the position track
|
|
|
+in the illustration refers to to the ``position`` property of the Sprite
|
|
|
node.
|
|
|
|
|
|
.. figure:: img/animation_normal_track.png
|
|
@@ -107,8 +107,8 @@ Tutorial: Creating a simple animation
|
|
|
Scene setup
|
|
|
~~~~~~~~~~~
|
|
|
|
|
|
-For this tutorial, we'll create an AnimationPlayer node with a sprite node as
|
|
|
-its child. We will animate the sprite to move between two points on the screen.
|
|
|
+For this tutorial, we'll create an AnimationPlayer node with a sprite node as
|
|
|
+its child. We will animate the sprite to move between two points on the screen.
|
|
|
|
|
|
.. figure:: img/animation_animation_player_tree.png
|
|
|
:alt: Our scene setup
|
|
@@ -126,10 +126,10 @@ its child. We will animate the sprite to move between two points on the screen.
|
|
|
|
|
|
The sprite holds an image texture. For this tutorial, select the Sprite node,
|
|
|
click Texture in the Inspector, and then click Load. Select the default Godot
|
|
|
-icon for the sprite's texture.
|
|
|
+icon for the sprite's texture.
|
|
|
|
|
|
Select the AnimationPlayer node and click the "Animation" button in the
|
|
|
-animation editor. From the list, select "New" (|Add Animation|) to add a new
|
|
|
+animation editor. From the list, select "New" (|Add Animation|) to add a new
|
|
|
animation. Enter a name for the animation in the dialog box.
|
|
|
|
|
|
.. figure:: img/animation_create_new_animation.png
|
|
@@ -149,13 +149,13 @@ toolbar:
|
|
|
Convenience buttons
|
|
|
|
|
|
These switches and buttons allow you to add keyframes for the selected
|
|
|
-node's location, rotation, and scale. Since we are only animating the sprite's
|
|
|
-position, make sure that only the location switch is selected. The selected
|
|
|
+node's location, rotation, and scale. Since we are only animating the sprite's
|
|
|
+position, make sure that only the location switch is selected. The selected
|
|
|
switches are blue.
|
|
|
|
|
|
-Click on the key button to create the first keyframe. Since we don't have a
|
|
|
-track set up for the Position property yet, Godot will offer to
|
|
|
-create it for us. Click **Create**.
|
|
|
+Click on the key button to create the first keyframe. Since we don't have a
|
|
|
+track set up for the Position property yet, Godot will offer to
|
|
|
+create it for us. Click **Create**.
|
|
|
|
|
|
Godot will create a new track and insert our first keyframe at the beginning of
|
|
|
the timeline:
|
|
@@ -171,8 +171,8 @@ The second keyframe
|
|
|
We need to set our sprite's end location and how long it will take for it to get there.
|
|
|
|
|
|
Let's say we want it to take two seconds to move between the points. By
|
|
|
-default, the animation is set to last only one second, so change the animation
|
|
|
-length to 2 in the controls on the right side of the animation panel's timeline
|
|
|
+default, the animation is set to last only one second, so change the animation
|
|
|
+length to 2 in the controls on the right side of the animation panel's timeline
|
|
|
header.
|
|
|
|
|
|
.. figure:: img/animation_set_length.png
|
|
@@ -180,10 +180,10 @@ header.
|
|
|
|
|
|
Animation length
|
|
|
|
|
|
-Now, move the sprite right, to its final position. You can use the *Move tool* in the
|
|
|
+Now, move the sprite right, to its final position. You can use the *Move tool* in the
|
|
|
toolbar or set the *Position*'s X value in the *Inspector*.
|
|
|
|
|
|
-Click on the timeline header near the two-second mark in the animation panel
|
|
|
+Click on the timeline header near the two-second mark in the animation panel
|
|
|
and then click the key button in the toolbar to create the second keyframe.
|
|
|
|
|
|
Run the animation
|
|
@@ -201,13 +201,13 @@ Yay! Our animation runs:
|
|
|
Back and forth
|
|
|
~~~~~~~~~~~~~~
|
|
|
|
|
|
-Godot has an interesting feature that we can use in animations. When Animation
|
|
|
-Looping is set but there's no keyframe specified at the end of the animation,
|
|
|
+Godot has an interesting feature that we can use in animations. When Animation
|
|
|
+Looping is set but there's no keyframe specified at the end of the animation,
|
|
|
the first keyframe is also the last.
|
|
|
|
|
|
-This means we can extend the animation length to four seconds now, and Godot
|
|
|
-will also calculate the frames from the last keyframe to the first, moving
|
|
|
-our sprite back and forth.
|
|
|
+This means we can extend the animation length to four seconds now, and Godot
|
|
|
+will also calculate the frames from the last keyframe to the first, moving
|
|
|
+our sprite back and forth.
|
|
|
|
|
|
.. figure:: img/animation_loop.png
|
|
|
:alt: Animation loop
|
|
@@ -234,7 +234,7 @@ values. This can be:
|
|
|
- Continuous: Update the property on each frame
|
|
|
- Discrete: Only update the property on keyframes
|
|
|
- Trigger: Only update the property on keyframes or triggers
|
|
|
-- Capture: Remember the current value of the property, and blend it with the
|
|
|
+- Capture: Remember the current value of the property, and blend it with the
|
|
|
first animation key
|
|
|
|
|
|
.. figure:: img/animation_track_rate.png
|
|
@@ -242,10 +242,10 @@ values. This can be:
|
|
|
|
|
|
Track mode
|
|
|
|
|
|
-You will usually use "Continuous" mode. The other types are used to
|
|
|
+You will usually use "Continuous" mode. The other types are used to
|
|
|
script complex animations.
|
|
|
|
|
|
-Track interpolation tells Godot how to calculate the frame values between
|
|
|
+Track interpolation tells Godot how to calculate the frame values between
|
|
|
keyframes. These interpolation modes are supported:
|
|
|
|
|
|
- Nearest: Set the nearest keyframe value
|
|
@@ -259,9 +259,9 @@ keyframes. These interpolation modes are supported:
|
|
|
|
|
|
Track interpolation
|
|
|
|
|
|
-With Cubic interpolation, animation is slower at keyframes and faster between
|
|
|
-them, which leads to more natural movement. Cubic interpolation is commonly
|
|
|
-used for character animation. Linear interpolation animates changes at a fixed
|
|
|
+With Cubic interpolation, animation is slower at keyframes and faster between
|
|
|
+them, which leads to more natural movement. Cubic interpolation is commonly
|
|
|
+used for character animation. Linear interpolation animates changes at a fixed
|
|
|
pace, resulting in a more robotic effect.
|
|
|
|
|
|
Godot supports two loop modes, which affect the animation when it's set to
|
|
@@ -285,9 +285,9 @@ Keyframes for other properties
|
|
|
Godot's animation system isn't restricted to position, rotation, and scale.
|
|
|
You can animate any property.
|
|
|
|
|
|
-If you select your sprite while the animation panel is visible, Godot will
|
|
|
-display a small keyframe button in the *Inspector* for each of the sprite's
|
|
|
-properties. Click on one of these buttons to add a track and keyframe to
|
|
|
+If you select your sprite while the animation panel is visible, Godot will
|
|
|
+display a small keyframe button in the *Inspector* for each of the sprite's
|
|
|
+properties. Click on one of these buttons to add a track and keyframe to
|
|
|
the current animation.
|
|
|
|
|
|
.. figure:: img/animation_properties_keyframe.png
|
|
@@ -298,7 +298,7 @@ the current animation.
|
|
|
Edit keyframes
|
|
|
--------------
|
|
|
|
|
|
-You can click on a keyframe in the animation timeline to display and
|
|
|
+You can click on a keyframe in the animation timeline to display and
|
|
|
edit its value in the *Inspector*.
|
|
|
|
|
|
.. figure:: img/animation_keyframe_editor_key.png
|
|
@@ -306,8 +306,8 @@ edit its value in the *Inspector*.
|
|
|
|
|
|
Keyframe editor editing a key
|
|
|
|
|
|
-You can also edit the easing value for a keyframe here by clicking and dragging
|
|
|
-its easing curve. This tells Godot how to interpolate the animated property when it
|
|
|
+You can also edit the easing value for a keyframe here by clicking and dragging
|
|
|
+its easing curve. This tells Godot how to interpolate the animated property when it
|
|
|
reaches this keyframe.
|
|
|
|
|
|
You can tweak your animations this way until the movement "looks right."
|