Update intro to 2D animation for Godot 3.1

tutorials/animation/introduction_2d.rst

@@ -36,15 +36,15 @@ automatically transition to one another.
 
    The AnimationPlayer node
 
-Click on the AnimationPlayer node in the Node tab to open the Animation
-Panel at the bottom of the viewport.
+After creating one click on the AnimationPlayer node in the Node tab to
+open the Animation Panel at the bottom of the viewport.
 
 .. figure:: img/animation_animation_panel.png
    :alt: The animation panel position
 
    The animation panel position
 
-It consists of five parts:
+It consists of four parts:
 
 .. figure:: img/animation_animation_panel_overview.png
    :alt: The animation panel
@@ -54,7 +54,6 @@ It consists of five parts:
 -  Animation controls (i.e. add, load, save, and delete animations)
 -  The tracks listing
 -  The timeline with keyframes
--  The keyframe editor (when enabled)
 -  The timeline and track controls, where you can zoom the timeline and
    edit tracks for example.
 
@@ -66,7 +65,8 @@ Computer animation relies on keyframes
 
 A keyframe defines the value of a property at a certain point in time.
 
-White and blue diamond shapes represent keyframes in the timeline.
+Diamond shapes represent keyframes in the timeline. A line between two
+keyframes indicates that the value hasn't changed.
 
 .. figure:: img/animation_keyframes.png
    :alt: Keyframes in Godot
@@ -112,7 +112,7 @@ Scene setup
 ~~~~~~~~~~~
 
 For this tutorial, we'll going to create an AnimationPlayer node and a
-sprite node as an AnimationPlayer node child.
+sprite node as its child.
 
 .. figure:: img/animation_animation_player_tree.png
    :alt: Our scene setup
@@ -120,7 +120,8 @@ sprite node as an AnimationPlayer node child.
    Our scene setup
 
 The sprite holds an image texture and we animate that sprite to move
-between two points on the screen. As a starting point, move the sprite
+between two points on the screen. For this tutorial use the default Godot
+Icon as the sprites' texture. As a starting point, move the sprite
 to a left position on the screen.
 
 .. tip::
@@ -129,10 +130,10 @@ to a left position on the screen.
    required, but it is a nice way of distinguishing animated nodes from
    non-animated nodes in the Scene Tree.
 
-Select the AnimationPlayer node and click on "Add animation" (|Add
-Animation|) in the animation tab to add a new animation.
-
-Enter a name for the animation in the dialog box.
+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.
 
 .. figure:: img/animation_create_new_animation.png
    :alt: Add a new animation
@@ -219,8 +220,7 @@ Yay! Our animation runs:
 Back and forth
 ~~~~~~~~~~~~~~
 
-As you can see, the "loop" button is enabled by default and our
-animation loops. Godot has an additional feature here. Like said before,
+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.
@@ -238,24 +238,25 @@ Track settings
 ~~~~~~~~~~~~~~
 
 Each track has a settings panel at the end, where you can set the update
-rate, the track interpolation, and the loop mode.
+mode, the track interpolation, and the loop mode.
 
 .. figure:: img/animation_track_settings.png
    :alt: Track settings
 
    Track settings
 
-The update rate of a track tells Godot when to update the property
+The update mode of a track tells Godot when to update the property
 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
 
 .. figure:: img/animation_track_rate.png
-   :alt: Track rate
+   :alt: Track mode
 
-   Track rate
+   Track mode
 
 In normal animations, you usually use "Continuous". The other types are
 used to script complex animations.
@@ -313,67 +314,56 @@ current animation.
 Edit keyframes
 --------------
 
-For advanced use and to edit keyframe in detail, enable the keyframe
-editor (|Keyframe editor|).
-
-This adds an editor pane on the right side of the track settings. When
-you select a keyframe, you can directly edit its values in this editor:
+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.
 
 .. figure:: img/animation_keyframe_editor_key.png
    :alt: Keyframe editor editing a key
 
    Keyframe editor editing a key
 
-Additionally, you can also edit the transition value for this keyframe:
-
-.. figure:: img/animation_keyframe_editor_transition.png
-   :alt: Keyframe editor editing a transition
-
-   Keyframe editor editing a transition
-
-This tells Godot, how to change the property values when it reaches this
-keyframe.
+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 usually tweak your animations this way, when the movement doesn't
 "look right".
 
-Advanced: Call Func tracks
---------------------------
+Advanced: Call Method tracks
+----------------------------
 
 Godot's animation engine doesn't stop here. If you're already
 comfortable with Godot's scripting language
 :ref:`doc_gdscript` and :doc:`/classes/index` you
 know that each node type is a class and has a bunch of callable
-functions.
+methods.
 
 For example, the :ref:`class_AudioStreamPlayer` node type has a
-function to play an audio stream.
+method to play an audio stream.
 
-Wouldn't it be great to play a stream at a specific keyframe in an
-animation? This is where "Call Func Tracks" come in handy. These tracks
+Wouldn't it be great to use a method at a specific keyframe in an
+animation? This is where "Call Method Tracks" come in handy. These tracks
 reference a node again, this time without a reference to a property.
-Instead, a keyframe holds the name and arguments of a function, that
+Instead, a keyframe holds the name and arguments of a method, that
 Godot should call when it reaches this keyframe.
 
-To let Godot play a sample when it reaches a keyframe, follow this list:
+To demonstrate, we're going to use a call method track to play audio at a
+specific keyframe. Normally to play audio you should use an audio track,
+but for the sake of demonstrating methods we're going to do it this way.
 
 Add a :ref:`class_AudioStreamPlayer` to the Scene Tree and setup a
 stream using an audio file you put in your project.
 
-.. figure:: img/animation_add_audiostreamplayer.png
-   :alt: Add AudioStreamPlayer
-
-   Add AudioStreamPlayer
-
 Click on "Add track" (|Add track|) on the animation panel's track
 controls.
 
-Select "Add Call Func Track" from the list of possible track types.
+Select "Add Call Method Track" from the list of possible track types.
 
-.. figure:: img/animation_add_call_func_track.png
-   :alt: Add Call Func Track
+.. figure:: img/animation_add_call_method_track.png
+   :alt: Add Call Method Track
 
-   Add Call Func Track
+   Add Call Method Track
 
 Select the :ref:`class_AudioStreamPlayer` node in the selection
 window. Godot adds the track with the reference to the node.
@@ -383,114 +373,22 @@ window. Godot adds the track with the reference to the node.
 
    Select AudioStreamPlayer
 
-Select the timeline position, where Godot should play the sample by
-clicking on the timeline header.
-
-Enable the Keyframe Editor by clicking on |Keyframe editor|.
+Right click the timeline where Godot should play the sample and
+click the "Insert Key" option. This will bring up a list of methods
+that can be called for the AudioStreamPlayer node. Select the first
+one.
 
-Click on "Add keyframe" near the settings of our func track (|Add
-keyframe|) and select the keyframe.
-
-.. figure:: img/animation_call_func_add_keyframe.png
-   :alt: Add a keyframe to the call func track
-
-   Add a keyframe to the call func track
-
-Enter "play" as the function name.
-
-.. figure:: img/animation_call_func_keyframe.png
-   :alt: Keyframe settings of a call func track
-
-   Keyframe settings of a call func track
+.. image:: img/animation_method_list.png
 
 When Godot reaches the keyframe, Godot calls the
 :ref:`class_AnimationPlayer` node's "play" function and the stream
 plays.
 
-References
-----------
-
-Animation panel reference
-~~~~~~~~~~~~~~~~~~~~~~~~~
-
-.. figure:: img/animation_animation_panel_reference.png
-   :alt: The animation panel reference
-
-   The animation panel reference
-
-The animation panel has the following parts (from left to right):
-
-Animation controls
-^^^^^^^^^^^^^^^^^^
-
-.. figure:: img/animation_reference_animation_controls.png
-   :alt: Animation controls
-
-   Animation controls
-
--  Play animation backwards from current position
--  Play animation backwards from the animation end
--  Stop animation
--  Play animation forwards from the animation beginning
--  Play animation forwards from the current position
--  Direct time selection
-
-Animation management
-^^^^^^^^^^^^^^^^^^^^
-
-.. figure:: img/animation_reference_animation_management.png
-   :alt: Animation management
-
-   Animation management
-
--  Create a new animation
--  Load animation
--  Save animation
--  Duplicate animation
--  Rename animation
--  Delete animation
--  Animation selection
--  Automatically play selected animation
--  Edit animation blend times
--  Extended animation Tools
-
-Timeline zoom level control
-^^^^^^^^^^^^^^^^^^^^^^^^^^^
-
-.. figure:: img/animation_reference_timeline_zoom_level.png
-   :alt: Timeline zoom level control
-
-   Timeline zoom level control
-
-Timeline control
-^^^^^^^^^^^^^^^^
-
-.. figure:: img/animation_reference_timeline_controls.png
-   :alt: Timeline control
-
-   Timeline control
-
--  Length of animation
--  Steps of animation
--  Toggle loop animation
-
-Track control
-^^^^^^^^^^^^^
-
-.. figure:: img/animation_reference_track_control.png
-   :alt: Track control
-
-   Track control
+You can change its position by dragging it on the timeline, you can also
+click on the keyframe and use the keyframe settings in the inspector.
 
--  Add track
--  Move track up
--  Move track down
--  Delete track
--  Extended track tools
--  Toggle keyframe editor
+.. img:: img/animation_call_method_keyframe.png
 
 .. |Play from beginning| image:: img/animation_play_from_beginning.png
 .. |Add Animation| image:: img/animation_add.png
-.. |Keyframe editor| image:: img/animation_keyframe_editor_toggle.png
 .. |Add track| image:: img/animation_add_track.png
-.. |Add keyframe| image:: img/animation_add_keyframe.png