Browse Source

Overhaul intro to editor page for Godot 3.2

skyace65 5 years ago
parent
commit
0b41fa6a69
24 changed files with 52 additions and 84 deletions
  1. BIN
      getting_started/step_by_step/img/create_new_project.png
  2. BIN
      getting_started/step_by_step/img/editor_ui_intro_dock_filesystem.png
  3. BIN
      getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png
  4. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_01.png
  5. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png
  6. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_03_animation_player.png
  7. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_04_2d_workspace.png
  8. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_05_3d_workspace.png
  9. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_06_3d_workspace.png
  10. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_06_script_workspace_expanded.png
  11. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_08.png
  12. BIN
      getting_started/step_by_step/img/editor_ui_intro_editor_interface_overview.png
  13. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_01.png
  14. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_02.png
  15. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_03.png
  16. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_04.png
  17. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_05.png
  18. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_06.png
  19. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_08.png
  20. BIN
      getting_started/step_by_step/img/editor_ui_intro_project_manager_09.png
  21. BIN
      getting_started/step_by_step/img/project_manager.png
  22. BIN
      getting_started/step_by_step/img/project_manager_first_open.png
  23. 50 59
      getting_started/step_by_step/intro_to_the_editor_interface.rst
  24. 2 25
      getting_started/step_by_step/scenes_and_nodes.rst

BIN
getting_started/step_by_step/img/create_new_project.png


BIN
getting_started/step_by_step/img/editor_ui_intro_dock_filesystem.png


BIN
getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_01.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_03_animation_player.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_04_2d_workspace.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_05_3d_workspace.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_06_3d_workspace.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_06_script_workspace_expanded.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_08.png


BIN
getting_started/step_by_step/img/editor_ui_intro_editor_interface_overview.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_01.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_02.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_03.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_04.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_05.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_06.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_08.png


BIN
getting_started/step_by_step/img/editor_ui_intro_project_manager_09.png


BIN
getting_started/step_by_step/img/project_manager.png


BIN
getting_started/step_by_step/img/project_manager_first_open.png


+ 50 - 59
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
 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
 In the top-right corner you’ll find a drop-down menu to change the
 editor’s language.
 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
 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
 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
 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.
 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
 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.
 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
 You can import existing projects in a similar way, using the Import
 button. Locate the folder that contains the project or the
 button. Locate the folder that contains the project or the
 ``project.godot`` file to import and edit it.
 ``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.
 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
 Your first look at Godot’s editor
 ---------------------------------
 ---------------------------------
 
 
 Welcome to Godot! With your project open, you should see the editor’s
 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
 At the top, from left to right, you can see the **main menus**, the
 **workspaces**, and the **playtest buttons**.
 **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
 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.
 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
 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
 tools to move, scale or lock your scene’s objects. It changes as you
 jump to different workspaces.
 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
 The **Bottom Panel** is the host for the debug console, the animation
 editor, the audio mixer… They are wide and can take precious space.
 editor, the audio mixer… They are wide and can take precious space.
 That’s why they’re folded by default.
 That’s why they’re folded by default.
 
 
-|image14|
+.. image:: img/editor_ui_intro_editor_03_animation_player.png
 
 
 The workspaces
 The workspaces
 --------------
 --------------
@@ -107,16 +118,17 @@ AssetLib.
 You’ll use the **2D workspace** for all types of games. In addition to 2D games,
 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.
 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
 In the **3D workspace**, you can work with meshes, lights, and design
 levels for 3D games. Press F2 to access it.
 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**.
 .. 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
 auto-completion, and built-in code reference. Press F3 to access it, and
 F4 to search the reference.
 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
 Finally the **AssetLib** is a library of Free add-ons, scripts and
 assets to use in your projects.
 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
 Click and drag on the edge of any dock or panel to resize it
 horizontally or vertically.
 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
 Click the three-dotted icon at the top of any dock to change its
 location.
 location.
 
 
-|image19|
+.. image:: img/editor_ui_intro_editor_08.png
 
 
 Go to the ``Editor`` menu and ``Editor Settings`` to fine-tune the look
 Go to the ``Editor`` menu and ``Editor Settings`` to fine-tune the look
 and feel of the editor.
 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

+ 2 - 25
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
 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.
 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
 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
 .. image:: img/empty_editor.png