Merge pull request #997 from GDquest/intro_to_the_editor_interface

Add introduction to the editor's interface

learning/step_by_step/index.rst

@@ -10,6 +10,7 @@ Step by step
    instancing_continued
    scripting
    scripting_continued
+   intro_to_the_editor_interface
    your_first_game
    ui_introduction_to_the_ui_system
    ui_main_menu

learning/step_by_step/intro_to_the_editor_interface.rst

@@ -0,0 +1,162 @@
+Introduction to Godot’s editor
+==============================
+
+This tutorial will run you through Godot’s interface. We’re going to
+look at the **Project Manager, docks, workspaces** and everything you
+need to know to get started with the engine.
+
+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.
+
+|image0|
+
+In the top-right corner you’ll find a drop-down menu to change the
+editor’s language.
+
+|image1|
+
+From the **Templates** tab you can download open source project templates and
+demos to help you get started faster.
+
+|image2|
+
+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.
+
+|image3|
+
+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|
+
+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.
+
+The next time you’ll open Godot, you’ll see your new project in the
+list. Double click on it to open it in the editor.
+
+|image5|
+
+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|
+
+When the folder path is correct you'll see a green checkmark.
+
+|image8|
+
+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.
+
+|image9|
+
+Now you should see this interface, with empty docks on the right side.
+
+|image10|
+
+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.
+
+|image11|
+
+On the right side you’ll find the **Scene dock** that lists the active
+scene’s content and the **Inspector** in the bottom right corner.
+
+|image12|
+
+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|
+
+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|
+
+The workspaces
+--------------
+
+You can see four workspace buttons at the top: 2D, 3D, Script and
+AssetLib.
+
+You’ll use the **2D workspace** for all types of games. On top of 2D
+games that is where you’ll build your interfaces. Press F1 to access it.
+|image15|
+
+In the **3D workspace**, you can work with meshes, lights, and design
+levels for 3D games. Press F2 to access it.
+
+|image16|
+
+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|
+
+Finally the **AssetLib** is a library of Free add-ons, scripts and
+assets to use in your projects.
+
+Modify the interface
+--------------------
+
+Godot’s interface lives in a single window. You cannot split it across
+multiple screens although you can work with an external code editor like
+Atom or Visual Studio for instance.
+
+Move and resize docks
+~~~~~~~~~~~~~~~~~~~~~
+
+Click and drag on the edge of any dock or panel to resize it
+horizontally or vertically.
+
+|image18|
+
+Click the three-dotted icon at the top of any dock to change its
+location.
+
+|image19|
+
+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