Overhaul intro to editor page for Godot 3.2

2026-09-08 20:29:03 +00:00 · 2020-01-20 09:41:39 -05:00
parent 10d10e68fa
commit 0b41fa6a69
24 changed files with 52 additions and 84 deletions
@@ -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.

-The next time you’ll open Godot, you’ll see your new project in the
+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 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
@@ -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