Browse Source

Merge pull request #4472 from psobolik/animation-intro-tweaks

Edit animation intro page for clarity and grammar
Nathan Lovato 4 years ago
parent
commit
b4a57eeaa8
1 changed files with 81 additions and 80 deletions
  1. 81 80
      tutorials/animation/introduction.rst

+ 81 - 80
tutorials/animation/introduction.rst

@@ -11,12 +11,11 @@ In this guide you learn to:
 -  Work with the Animation Panel
 -  Animate any property of any node
 -  Create a simple animation
--  Call functions with the powerful Call Function Tracks
 
 In Godot, you can animate anything available in the Inspector, such as
 Node transforms, sprites, UI elements, particles, visibility and color
 of materials, and so on. You can also modify values of script variables
-and call any function.
+and even call functions.
 
 Create an AnimationPlayer node
 ------------------------------
@@ -25,7 +24,7 @@ To use the animation tools we first have to create an
 :ref:`class_AnimationPlayer` node.
 
 The AnimationPlayer node type is the data container for your animations.
-One AnimationPlayer node can hold multiple animations, that can
+One AnimationPlayer node can hold multiple animations, which can
 automatically transition to one another.
 
 .. figure:: img/animation_create_animationplayer.png
@@ -33,7 +32,7 @@ automatically transition to one another.
 
    The AnimationPlayer node
 
-After creating one click on the AnimationPlayer node in the Node tab to
+After you create an AnimationPlayer node, click on it to
 open the Animation Panel at the bottom of the viewport.
 
 .. figure:: img/animation_animation_panel.png
@@ -41,7 +40,7 @@ open the Animation Panel at the bottom of the viewport.
 
    The animation panel position
 
-It consists of four parts:
+The animation panel consists of four parts:
 
 .. figure:: img/animation_animation_panel_overview.png
    :alt: The animation panel
@@ -52,40 +51,43 @@ It consists of four parts:
 -  The tracks listing
 -  The timeline with keyframes
 -  The timeline and track controls, where you can zoom the timeline and
-   edit tracks for example.
+   edit tracks, for example.
 
 Computer animation relies on keyframes
 --------------------------------------
 
-A keyframe defines the value of a property at a certain point in time.
+A keyframe defines the value of a property at a point in time.
 
 Diamond shapes represent keyframes in the timeline. A line between two
-keyframes indicates that the value hasn't changed.
+keyframes indicates that the value doesn't change between them.
 
 .. figure:: img/animation_keyframes.png
    :alt: Keyframes in Godot
 
    Keyframes in Godot
 
-The engine interpolates values between keyframes, resulting in a gradual
-change in values over time.
+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
    :alt: Two keyframes are all it takes to obtain a smooth motion
 
    Two keyframes are all it takes to obtain a smooth motion
 
-The timeline lets you insert keyframes and change their timing. It also
-defines how long the animation is.
+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 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.
+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
    :alt: Example of Normal animation tracks
@@ -94,8 +96,8 @@ to the node and the affected property.
 
 .. tip::
 
-   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
+   If you animate the wrong property, you can edit a track's path at any time
+   by double-clicking on it and typing the new path. Play the animation using the
    "Play from beginning" button |Play from beginning| (or pressing
    :kbd:`Shift + D` on keyboard) to see the changes instantly.
 
@@ -105,29 +107,27 @@ Tutorial: Creating a simple animation
 Scene setup
 ~~~~~~~~~~~
 
-For this tutorial, we'll create an AnimationPlayer node and a sprite node as its
-child.
+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
 
    Our scene setup
 
-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.
-
 .. tip::
 
-   Adding animated nodes as children to the AnimationPlayer node is not
-   required, but it is a nice way of distinguishing animated nodes from
+   Animated nodes don't have to be children of the AnimationPlayer node, 
+   but putting them there 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" (|Add
-Animation|) to add a new animation. And Enter a name for the animation in the
-dialog box.
+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. 
+
+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. Enter a name for the animation in the dialog box.
 
 .. figure:: img/animation_create_new_animation.png
    :alt: Add a new animation
@@ -137,7 +137,7 @@ dialog box.
 Adding a track
 ~~~~~~~~~~~~~~
 
-To add a new track for our sprite, select it and take a look in the
+To add a new track for our sprite, select it and take a look at the
 toolbar:
 
 .. figure:: img/animation_convenience_buttons.png
@@ -146,15 +146,15 @@ toolbar:
    Convenience buttons
 
 These switches and buttons allow you to add keyframes for the selected
-node's location, rotation, and scale respectively.
+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.
 
-Deselect rotation, because we are only interested in the location of our
-sprite for this tutorial and click on the key button.
+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**. 
 
-As we don't have a track already set up for the transform/location
-property, Godot asks whether it should set it up for us. Click **Create**.
-
-This creates a new track and our first keyframe at the beginning of
+Godot will create a new track and insert our first keyframe at the beginning of
 the timeline:
 
 .. figure:: img/animation_track.png
@@ -165,23 +165,23 @@ the timeline:
 The second keyframe
 ~~~~~~~~~~~~~~~~~~~
 
-Now we need to set the destination where our sprite should be headed and
-how much time it takes to get there.
+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 2 seconds to go to the other point. By
-default the animation is set to last only 1 second, so change this in
-the timeline controls in animation panel's lower panel to 2.
+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 
+header.
 
 .. figure:: img/animation_set_length.png
    :alt: Animation length
 
    Animation length
 
-Click on the timeline header near the 2-second mark and move the sprite
-to the target destination on the right side.
+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*.
 
-Again, click the key button in the toolbar. This creates our second
-keyframe.
+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
 ~~~~~~~~~~~~~~~~~
@@ -198,25 +198,27 @@ Yay! Our animation runs:
 Back and forth
 ~~~~~~~~~~~~~~
 
-Godot has an additional feature here. Like said before,
-Godot always calculates the frames between two keyframes. In a loop, the
-first keyframe is also the last keyframe, if no keyframe is specified at
-the end.
+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. 
 
 .. figure:: img/animation_loop.png
    :alt: Animation loop
 
    Animation loop
 
-If you set the animation length to 4 seconds now, the animation moves
-back and forth. You can change this behavior if you change the track's
-loop mode. This is covered in the next chapter.
+You can change this behavior by changing the track's loop mode. This is covered
+in the next chapter.
 
 Track settings
 ~~~~~~~~~~~~~~
 
-Each track has a settings panel at the end, where you can set the update
-mode, the track interpolation, and the loop mode.
+Each track has a settings panel at the end, where you can set its update
+mode, track interpolation, and loop mode.
 
 .. figure:: img/animation_track_settings.png
    :alt: Track settings
@@ -229,18 +231,19 @@ 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: The current value of a property is remembered, and it will blend with the first animation key found
+-  Capture: Remember the current value of the property, and blend it with the 
+   first animation key
 
 .. figure:: img/animation_track_rate.png
    :alt: Track mode
 
    Track mode
 
-In normal animations, you usually use "Continuous". The other types are
-used to script complex animations.
+You will usually use "Continuous" mode. The other types are used to 
+script complex animations.
 
-The interpolation tells Godot how to calculate the frame values between
-the keyframes. These interpolation modes are supported:
+Track interpolation tells Godot how to calculate the frame values between 
+keyframes. These interpolation modes are supported:
 
 -  Nearest: Set the nearest keyframe value
 -  Linear: Set the value based on a linear function calculation between
@@ -253,12 +256,12 @@ the keyframes. These interpolation modes are supported:
 
    Track interpolation
 
-Cubic interpolation leads to a more natural movement, where the
-animation is slower at a keyframe and faster between keyframes. This is
-usually used for character animation. Linear interpolation creates more
-of a robotic movement.
+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 if it's set to
+Godot supports two loop modes, which affect the animation when it's set to
 loop:
 
 .. figure:: img/animation_track_loop_modes.png
@@ -276,13 +279,13 @@ loop:
 Keyframes for other properties
 ------------------------------
 
-Godot doesn't restrict you to only edit transform properties. Every
-property can be used as a track where you can set keyframes.
+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, you get
-a small keyframe button for all the sprite's properties. Click on
-this button and Godot automatically adds a track and keyframe to the
-current animation.
+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
    :alt: Keyframes for other properties
@@ -292,21 +295,19 @@ current animation.
 Edit keyframes
 --------------
 
-For advanced use and to edit keyframes in detail, You can click on them
-to bring up the keyframe editor in the inspector. You can use this to
-directly edit its values.
+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
    :alt: Keyframe editor editing a key
 
    Keyframe editor editing a key
 
-Additionally, you can also edit the easing value for this keyframe by
-clicking and dragging the easing setting. This tells Godot, how to change
-the property values when it reaches this keyframe.
+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 usually tweak your animations this way, when the movement doesn't
-"look right".
+You can tweak your animations this way until the movement "looks right."
 
 .. |Play from beginning| image:: img/animation_play_from_beginning.png
 .. |Add Animation| image:: img/animation_add.png