Merge pull request #2989 from skyace65/IntroToEditor

Overhaul intro to editor page for Godot 3.2

getting_started/step_by_step/intro_to_the_editor_interface.rst

@@ -11,92 +11,103 @@ Project manager
 ---------------
 
 When you launch Godot, the first window you’ll see is the Project
-Manager. It lets you create, remove, import or play game projects.
+Manager. Since you have no projects there will be a popup asking if you
+want to open the asset library, just click cancel, we'll look at it later.
 
-|image0|
+.. image:: img/project_manager_first_open.png
+
+Now you should see the project manager. It lets you create, remove, import
+or play game projects.
+
+.. image:: img/editor_ui_intro_project_manager_01.png
 
 In the top-right corner you’ll find a drop-down menu to change the
 editor’s language.
 
-|image1|
+.. image:: img/editor_ui_intro_project_manager_02.png
 
 From the **Templates** tab you can download open source project templates and
-demos to help you get started faster. Just select the template or demo you want,
-click download, once it's finished downloading click install and choose where
-you want the project to go.
+demos from the Asset Library to help you get started faster. Just select the
+template or demo you want, click download, once it's finished downloading click
+install and choose where you want the project to go. You can learn more about
+it in :ref:`doc_what_is_assetlib`.
 
-|image2|
+.. image:: img/editor_ui_intro_project_manager_03.png
 
 Create or import a project
 ~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-To create a new project, click the ``New Project`` button on the right. Give
-it a name and choose an empty folder on your computer to save it.
+To create a new project, click the ``New Project`` button on the right. Here
+you give it a name, choose an empty folder on your computer to save it to,
+and choose a renderer.
 
-|image3|
+.. image:: img/editor_ui_intro_project_manager_04.png
 
 Click the Browse button to open Godot’s file browser and pick a location
 or type the folder’s path in the Project Path field.
 
-|image4|
+.. image:: img/editor_ui_intro_project_manager_05.png
 
 When you see the green tick on the right, it means the engine detects an
-empty folder and you may click ``Create``. Godot will create the project
-for you and open it in the editor.
+empty folder. You can also click the ``Create Folder`` button next to your
+project name and an empty folder will be created with that name for the project.
+
+Finally, you need to choose which renderer to use (OpenGL ES 3.0 or OpenGL
+ES 2.0). The advantages and disadvantages of each are listed to help you choose,
+and you can refer to :ref:`doc_gles2_gles3_differences` for more details. Note
+that you can change the backend from the project settings if you change your mind
+later on. For this tutorial either backend is fine.
+
+Once you are done click ``Create & Edit``. Godot will create
+the project for you and open it in the editor.
 
-The next time you’ll open Godot, you’ll see your new project in the
+The next time you open the project manager, you’ll see your new project in the
 list. Double click on it to open it in the editor.
 
-|image5|
+.. image:: img/editor_ui_intro_project_manager_06.png
 
 You can import existing projects in a similar way, using the Import
 button. Locate the folder that contains the project or the
 ``project.godot`` file to import and edit it.
 
-|image7|
+.. image:: img/editor_ui_intro_project_manager_08.png
 
 When the folder path is correct, you'll see a green checkmark.
 
-|image8|
+.. image:: img/editor_ui_intro_project_manager_09.png
 
 Your first look at Godot’s editor
 ---------------------------------
 
 Welcome to Godot! With your project open, you should see the editor’s
-interface with the 3D viewport active. You can change the current
-workspace at the top of the interface. Click on 2D to switch to the 2D
-workspace.
+interface with empty docks on the right side.
 
-|image9|
-
-Now you should see this interface, with empty docks on the right side.
-
-|image10|
+.. image:: img/editor_ui_intro_editor_interface_overview.png
 
 At the top, from left to right, you can see the **main menus**, the
 **workspaces**, and the **playtest buttons**.
 
-On the left side, you have the **FileSystem dock**, where you’ll manage
-your project files and assets.
+On the bottom left side, you have the **FileSystem dock**, where you’ll
+manage your project files and assets.
 
-|image11|
+.. image:: img/editor_ui_intro_dock_filesystem.png
 
 On the right side, you’ll find the **Scene dock**, which lists the active
 scene’s content and the **Inspector** in the bottom right corner.
 
-|image12|
+.. image:: img/editor_ui_intro_dock_inspector.png
 
 In the center, you have the **Toolbar** at the top, where you’ll find
 tools to move, scale or lock your scene’s objects. It changes as you
 jump to different workspaces.
 
-|image13|
+.. image:: img/editor_ui_intro_editor_02_toolbar.png
 
 The **Bottom Panel** is the host for the debug console, the animation
 editor, the audio mixer… They are wide and can take precious space.
 That’s why they’re folded by default.
 
-|image14|
+.. image:: img/editor_ui_intro_editor_03_animation_player.png
 
 The workspaces
 --------------
@@ -107,16 +118,17 @@ AssetLib.
 You’ll use the **2D workspace** for all types of games. In addition to 2D games,
 the 2D workspace is where you'll build your interfaces. Press F1 to access it.
 
-|image15|
+.. image:: img/editor_ui_intro_editor_04_2d_workspace.png
 
 In the **3D workspace**, you can work with meshes, lights, and design
 levels for 3D games. Press F2 to access it.
 
-|image16|
+.. image:: img/editor_ui_intro_editor_05_3d_workspace.png
 
-Notice the text [perspective] under the toolbar, it is a button that opens a list of options related to the 3D viewport.
+Notice the perspective button under the toolbar, it opens a list of options
+related to the 3D viewport.
 
-|image20|
+.. image:: img/editor_ui_intro_editor_06_3d_workspace.png
 
 .. note:: Read :ref:`doc_introduction_to_3d` for more detail about **3D workspace**.
 
@@ -124,7 +136,7 @@ The **Script** workspace is a complete code editor with a debugger, rich
 auto-completion, and built-in code reference. Press F3 to access it, and
 F4 to search the reference.
 
-|image17|
+.. image:: img/editor_ui_intro_editor_06_script_workspace_expanded.png
 
 Finally the **AssetLib** is a library of Free add-ons, scripts and
 assets to use in your projects.
@@ -142,33 +154,12 @@ Move and resize docks
 Click and drag on the edge of any dock or panel to resize it
 horizontally or vertically.
 
-|image18|
+.. image:: img/editor_ui_intro_editor_07.png
 
 Click the three-dotted icon at the top of any dock to change its
 location.
 
-|image19|
+.. image:: img/editor_ui_intro_editor_08.png
 
 Go to the ``Editor`` menu and ``Editor Settings`` to fine-tune the look
 and feel of the editor.
-
-.. |image0| image:: ./img/editor_ui_intro_project_manager_01.png
-.. |image1| image:: ./img/editor_ui_intro_project_manager_02.png
-.. |image2| image:: ./img/editor_ui_intro_project_manager_03.png
-.. |image3| image:: ./img/editor_ui_intro_project_manager_04.png
-.. |image4| image:: ./img/editor_ui_intro_project_manager_05.png
-.. |image5| image:: ./img/editor_ui_intro_project_manager_06.png
-.. |image7| image:: ./img/editor_ui_intro_project_manager_08.png
-.. |image8| image:: ./img/editor_ui_intro_project_manager_09.png
-.. |image9| image:: ./img/editor_ui_intro_editor_01.png
-.. |image10| image:: ./img/editor_ui_intro_editor_interface_overview.png
-.. |image11| image:: ./img/editor_ui_intro_dock_filesystem.png
-.. |image12| image:: ./img/editor_ui_intro_dock_inspector.png
-.. |image13| image:: img/editor_ui_intro_editor_02_toolbar.png
-.. |image14| image:: ./img/editor_ui_intro_editor_03_animation_player.png
-.. |image15| image:: ./img/editor_ui_intro_editor_04_2d_workspace.png
-.. |image16| image:: ./img/editor_ui_intro_editor_05_3d_workspace.png
-.. |image17| image:: ./img/editor_ui_intro_editor_06_script_workspace_expanded.png
-.. |image18| image:: ./img/editor_ui_intro_editor_07.png
-.. |image19| image:: ./img/editor_ui_intro_editor_08.png
-.. |image20| image:: ./img/editor_ui_intro_editor_06_3d_workspace.png

getting_started/step_by_step/scenes_and_nodes.rst

@@ -73,34 +73,11 @@ Basically, the Godot editor is a **scene editor**. It has plenty of tools for
 editing 2D and 3D scenes as well as user interfaces, but the editor is based on
 the concept of editing a scene and the nodes that compose it.
 
-Creating a new project
-----------------------
-
-Let's make these abstract concepts more concrete with an example. Following a
-long tradition in tutorials, we'll start with a "Hello World" project.
-This will introduce us to using the editor.
-
-If you run the Godot executable outside of a project, the Project Manager
-appears. This helps developers manage their projects.
-
-.. image:: img/project_manager.png
-
-To create a new project, click the "New Project" option. Choose and create a
-path for the project and specify the project name.
-
-You can also select the rendering backend at this stage (OpenGL ES 3.0 or OpenGL
-ES 2.0). The advantages and disadvantages of each are listed to help you choose,
-and you can refer to :ref:`doc_gles2_gles3_differences` for more details. Note
-that you can change the backend from the project settings if you change your mind
-later on. For this tutorial either backend is fine.
-
-.. image:: img/create_new_project.png
-
 Editor
 ------
 
-Once you've created the "New Project", then open it. This will open the Godot
-editor:
+Open the project you made in :ref:`doc_intro_to_the_editor_interface`, or create a new one. This will
+open the Godot editor:
 
 .. image:: img/empty_editor.png