Write intro_to_the_editor_interface.rst

Closes #4167

getting_started/introduction/first_look_at_the_editor.rst

@@ -0,0 +1,155 @@
+.. This page is only here to introduce the interface to the user broadly. To
+   cover individual areas in greater detail, write the corresponding pages in
+   the most appropriate section, and link them. E.g. the animation editor goes
+   to the animation section. General pages, for instance, about the project
+   manager, should go in the editor manual.
+
+.. _doc_intro_to_the_editor_interface:
+
+First look at Godot's editor
+============================
+
+This page will give you a brief overview of Godot's interface. We're going to
+look at the different workspaces and docks to help you situate yourself.
+
+.. seealso:: For a comprehensive breakdown of the editor's interface and how to
+             use it, see the :ref:`Editor manual <toc-learn-editor>`.
+
+The Project manager
+-------------------
+
+When you launch Godot, the first window you see is the Project Manager. In the
+default tab, "Projects," you can manage existing projects, import or create new
+ones, and more.
+
+.. image:: img/editor_intro_project_manager.png
+
+At the top of the window, there is another tab named "Templates". You can search
+for demo projects in the open-source asset library, which includes many projects
+developed by the community.
+
+.. seealso:: To learn the project manager's ins and outs, read
+             :ref:`doc_project_manager`.
+
+.. image:: img/editor_intro_project_templates.png
+
+You can also change the editor's language using the drop-down menu to the right
+of the engine's version in the window's top-right corner. By default, it is in
+English (EN).
+
+.. image:: img/editor_intro_language.png
+
+First look at Godot's editor
+----------------------------
+
+When you open a new or an existing project, the editor's interface appears.
+Let's look at its main areas.
+
+.. image:: img/editor_intro_editor_empty.png
+
+By default, it features **menus**, **workspaces**, and playtest buttons along
+the window's top edge.
+
+.. image:: img/editor_intro_top_menus.png
+
+In the center is the **viewport** with its **toolbar** at the top, where you'll
+find tools to move, scale, or lock the scene's nodes.
+
+.. image:: img/editor_intro_3d_viewport.png
+
+On either side of the viewport sit the **docks**. And at the bottom of the
+window lies the **bottom panel**.
+
+The toolbar changes based on the context and selected node. Here is the 2D toolbar.
+
+.. image:: img/editor_intro_toolbar_2d.png
+
+Below is the 3D one.
+
+.. image:: img/editor_intro_toolbar_3d.png
+
+Let's look at the docks. The **FileSystem** dock lists your project files, be it
+scripts, images, audio samples, and more.
+
+.. image:: img/editor_intro_filesystem_dock.png
+
+The **Scene** dock lists the active scene's nodes.
+
+.. image:: img/editor_intro_scene_dock.png
+
+The **Inspector** allows you to edit the properties of a selected node.
+
+.. image:: img/editor_intro_inspector_dock.png
+
+The **bottom panel**, situated below the viewport, is the host for the debug
+console, the animation editor, the audio mixer, and more. They can take precious
+space, that's why they're folded by default.
+
+.. image:: img/editor_intro_bottom_panels.png
+
+When you click on one, it expands vertically. Below, you can see the animation editor opened.
+
+.. image:: img/editor_intro_bottom_panel_animation.png
+
+The four workspaces
+-------------------
+
+There are four workspace buttons centered at the editor's top: 2D, 3D, Script,
+and 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 :kbd:`F1` (or
+:kbd:`Alt + 1` on macOS) to access it.
+
+.. image:: img/editor_intro_workspace_2d.png
+
+In the **3D workspace**, you can work with meshes, lights, and design levels for
+3D games. Press :kbd:`F2` (:kbd:`Alt + 2` on macOS) to access it.
+
+.. image:: img/editor_intro_workspace_3d.png
+
+Notice the perspective button under the toolbar. Clicking on it opens a list of
+options related to the 3D view.
+
+.. image:: img/editor_intro_3d_viewport_perspective.png
+
+.. note:: Read :ref:`doc_introduction_to_3d` for more detail about the **3D
+          workspace**.
+
+The **Script** workspace is a complete code editor with a debugger, rich
+auto-completion, and built-in code reference. Press :kbd:`F3` (:kbd:`Alt + 3`
+on macOS) to access it.
+
+.. image:: img/editor_intro_workspace_script.png
+
+Finally, the **AssetLib** is a library of free and open-source add-ons, scripts,
+and assets to use in your projects.
+
+.. image:: img/editor_intro_workspace_assetlib.png
+
+.. seealso:: You can learn more about the asset library in
+             :ref:`doc_what_is_assetlib`.
+
+Integrated class reference
+--------------------------
+
+Godot comes with a built-in class reference.
+
+You can search for information about a class, method, property, constant, or
+signal by:
+
+1. Pressing :kbd:`Shift + F1` anywhere in the editor.
+2. Clicking the "Search Help" button in the top-right of the Script workspace.
+3. Clicking on the Help menu and Search.
+
+
+.. image:: img/editor_intro_search_help_button.png
+
+When you do any of these, a window pops up. Type to search for any item. You can
+also use it to browse available objects and methods.
+
+.. image:: img/editor_intro_search_help.png
+
+Double-click on an item to open the corresponding page in the script workspace.
+
+.. image:: img/editor_intro_help_class_animated_sprite.png

getting_started/introduction/index.rst

@@ -9,8 +9,8 @@ This series will introduce you to Godot and give you an overview of its
 features.
 
 In the following pages, you will get answers to questions such as "Is Godot for
-me?" or "What can I do with Godot?". We will then run you through the editor's
-interface, introduce the engine's most essential concepts, and give you tips to
+me?" or "What can I do with Godot?". We will then introduce the engine's most
+essential concepts, run you through the editor's interface, and give you tips to
 make the most of your time learning it.
 
 .. toctree::
@@ -19,4 +19,5 @@ make the most of your time learning it.
 
    introduction_to_godot
    key_concepts_overview
+   first_look_at_the_editor
    learning_new_features

getting_started/step_by_step/index.rst

@@ -5,7 +5,6 @@ Step by step
    :maxdepth: 1
    :name: toc-learn-step_by_step
 
-   intro_to_the_editor_interface
    scenes_and_nodes
    instancing
    instancing_continued

getting_started/step_by_step/intro_to_the_editor_interface.rst

@@ -1,115 +0,0 @@
-.. _doc_intro_to_the_editor_interface:
-
-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.
-
-You can `download Godot Engine here <https://godotengine.org/download/>`_.
-
-Your first look at Godot's editor
----------------------------------
-
-Welcome to Godot! With your project open, you should see the editor's interface
-with menus along the top of the interface and docks along the far extremes of
-the interface on either side of the viewport.
-
-.. 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**.
-
-The **FileSystem dock** is where you'll manage your project files and assets.
-
-.. image:: img/editor_ui_intro_dock_filesystem.png
-
-The **Scene dock** lists the active scene's content and the **Inspector**
-allows for the management of the properties of a scene's content.
-
-.. 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.
-
-.. 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.
-
-.. image:: img/editor_ui_intro_editor_03_animation_player.png
-
-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. In addition to 2D games,
-the 2D workspace is where you'll build your interfaces. Press :kbd:`F1`
-(or :kbd:`Alt + 1` on macOS) to access it.
-
-.. 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 :kbd:`F2` (or :kbd:`Alt + 2` on macOS) to access it.
-
-.. image:: img/editor_ui_intro_editor_05_3d_workspace.png
-
-Notice the perspective button under the toolbar, it opens a list of options
-related to the 3D viewport.
-
-.. image:: img/editor_ui_intro_editor_06_3d_workspace.png
-
-.. note:: Read :ref:`doc_introduction_to_3d` for more detail about **3D workspace**.
-
-The **Script** workspace is a complete code editor with a debugger, rich
-auto-completion, and built-in code reference. Press :kbd:`F3` (or :kbd:`Alt + 3` on macOS)
-to access it, and :kbd:`Shift + F1` to search the reference.
-
-.. image:: img/editor_ui_intro_editor_06_script_workspace_expanded.png
-
-To search for information about a class, method, property, constant, or signal
-in the engine while you are writing a script, press the "Search Help" button at
-the top right of the Script workspace.
-
-.. image:: img/editor_ui_intro_script_search_documentation.png
-
-A new window will pop up. Search for the item that you want to find information
-about.
-
-.. image:: img/editor_ui_intro_script_search_help_window.png
-
-Click on the item you are looking for and press open. The documentation for the
-item will be displayed in the script workspace.
-
-.. image:: img/editor_ui_intro_script_class_documentation.png
-
-Finally, the **AssetLib** is a library of free and open source 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 Code for instance.
-
-Move and resize docks
-~~~~~~~~~~~~~~~~~~~~~
-
-Click and drag on the edge of any dock or panel to resize it
-horizontally or vertically.
-
-.. image:: img/editor_ui_intro_editor_07.png
-
-Click the three-dotted icon at the top of any dock to change its
-location.
-
-.. 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.

tutorials/editor/customizing_editor.rst

@@ -0,0 +1,29 @@
+.. _doc_customizing_editor:
+
+Customizing 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 Code for instance.
+
+Moving and resizing docks
+~~~~~~~~~~~~~~~~~~~~~~~~~
+
+Click and drag on the edge of any dock or panel to resize it horizontally or
+vertically.
+
+.. image:: img/editor_ui_intro_editor_07.png
+
+Click the three-dotted icon at the top of any dock to change its location.
+
+.. 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.
+
+.. This page lacks information about:
+
+    - Useful editor settings or sections of the settings window that are
+      relevant to customizing the interface.
+    - Layouts

tutorials/editor/index.rst

@@ -18,6 +18,7 @@ in other sections where appropriate. For example, the :ref:`animation editor
 
    project_manager
    default_key_mapping
+   customizing_editor
 
 For developers
 --------------