Merge pull request #966 from brainsick/robisplash-updates

update splash screen and animations tutorials for Godot 3.0

learning/step_by_step/animations.rst

@@ -6,90 +6,77 @@ Animations
 Introduction
 ------------
 
-This tutorial will explain how everything is animated in Godot. Godot's
-animation system is extremely powerful and flexible.
+Godot's animation system is extremely powerful and flexible.
 
-To begin, let's just use the scene from the previous tutorial (:ref:`doc_splash_screen`).
-The goal is, to add a simple animation to it. Here's a copy
+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
 just in case: :download:`robisplash.zip <files/robisplash.zip>`.
 
-Creating the animation
-----------------------
+Add an animation player
+-----------------------
 
 First of all, add an :ref:`AnimationPlayer <class_AnimationPlayer>`
-node to the scene as a child of "bg" (the root node):
+node to the scene as a child of "background" (the root node):
 
-.. image:: img/animplayer.png
+.. image:: img/robisplash_anim_inspector.png
 
 When a node of this type is selected, the animation editor panel will
 appear:
 
-.. image:: img/animpanel.png
-
-So, it's time to create a new animation! Press the new animation button
-and name the animation "intro".
-
-.. image:: img/animnew.png
+.. image:: img/robisplash_anim_editor.png
 
-After the animation has been created, it's time to edit it, by
-pressing the "edit" button:
+The animation editor panel stays visible until manually hidden.
 
-.. image:: img/animedit.png
-
-Editing the animation
----------------------
+Creating the animation
+----------------------
 
-Now this is when the magic happens! Several things happen when the
-"edit" button is pressed, the first one is that the animation editor
-appears above the animation panel. (In Godot 2.x, this button has been
-removed, instead, click on the 'animation' toggle at the bottom right 
-for similar functionality.)
+It's time to create a new animation! Press the new animation button and name
+the animation "intro" when the dialog appears.
 
-.. image:: img/animeditor.png
+.. image:: img/robisplash_anim_new.png
 
-The second and most important, is that the property editor enters
+Now that we have an animation the property editor enters
 "animation editing" mode. In this mode, a key icon appears next to
-every property of the property editor. This means that, in Godot, *any
-property of any object* can be animated:
-
-.. image:: img/propertykeys.png
+every property of the property editor. In Godot any property of an object
+can be animated:
 
-Making the logo appear
-----------------------
+.. image:: img/robisplash_anim_property_keys.png
 
-The logo will appear from the top of the screen. After selecting
-the animation player, the editor panel will stay visible until
-manually hidden (or the animation node is erased). Taking advantage of
-this, select the "logo" node and go to the "pos" property, move it up
-to position: 114,-400.
+Editing the animation
+---------------------
 
-Once in this position, press the key button next to the property:
+The logo will appear from the top of the screen.
 
-.. image:: img/keypress.png
+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:
 
-As the track is new, a dialog will appear asking to create it. Confirm
-it!
+.. image:: img/robisplash_anim_logo_inspector_key.png
 
-.. image:: img/addtrack.png
+When the dialog appears, confirm that you are creating a new track.
 
 The keyframe will be added in the animation player editor:
 
-.. image:: img/keyadded.png
+.. image:: img/robisplash_anim_editor_keyframe.png
 
 Move the editor cursor to the end, by clicking here:
 
-.. image:: img/move_cursor.png
+.. image:: img/robisplash_anim_editor_track_cursor.png
 
-Change the logo position to 114,0 and add a keyframe again. With two
+Change the logo position to ``(118, 0)`` and add a keyframe again. With two
 keyframes, the animation happens.
 
-.. image:: img/animation.png
+.. 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
 
-Pressing Play on the animation panel will make the logo descend. To test
-it by running the scene, the autoplay button can tag the animation to
-start automatically when the scene starts:
+Click the "Autoplay on Load" button to set the animation to start automatically
+when the scene starts.
 
-.. image:: img/autoplay.png
+.. image:: img/robisplash_anim_editor_autoplay.png
 
 And finally, when running the scene, the animation should look like
 this:

learning/step_by_step/splash_screen.rst

@@ -10,7 +10,10 @@ This is a simple tutorial to establish the basic idea of how the GUI
 subsystem works. The goal is to create a really simple, static
 splash screen.
 
-Following is a file with the assets that will be used. These can be added directly to your project folder - no need to import them:
+.. image:: img/robisplash_result.png
+
+Following is a file with the assets that will be used. The extracted files can
+be placed directly in your project folder and Godot will import them automatically.
 
 :download:`robisplash_assets.zip <files/robisplash_assets.zip>`.
 
@@ -19,25 +22,24 @@ Setting up
 
 Set the display resolution to 800x450 in Project Settings, and set up a new scene like this:
 
-.. image:: img/robisplashscene.png
-
-.. image:: img/robisplashpreview.png
+.. image:: img/robisplash_scene.png
 
 The nodes "background" and "logo" are of :ref:`TextureRect <class_TextureRect>`
-type. These have a special property for setting the texture to be
-displayed, just load the corresponding file.
+type. To display an image, just drag the corresponding asset to the texture property.
 
-.. image:: img/texframe.png
+.. image:: img/robisplash_background_inspector.png
 
 The node "start" is a :ref:`TextureButton <class_TextureButton>`.
 It takes several images for different states, but only the normal and
 pressed will be supplied in this example:
 
-.. image:: img/texbutton.png
+.. image:: img/robisplash_button_inspector.png
 
 Finally, the node "copyright" is a :ref:`Label <class_Label>`.
-A custom font can be set for labels by editing the following property:
 
-.. image:: img/label.png
+Your final scene should look something like this.
+
+.. image:: img/robisplash_editor.png
 
-As a side note, the font was imported from a TTF, see :ref:`doc_importing_fonts`.
+Go ahead and run the project.  If you're satisfied with the results, continue to
+the next tutorial.