Browse Source

First look at editor's interface iteration

Volkan Gezer 1 year ago
parent
commit
b08d7fea84

+ 2 - 2
community/asset_library/what_is_assetlib.rst

@@ -31,10 +31,10 @@ Types of assets
 Be aware that there are, broadly, two different types of assets you can post.
 
 * Assets labeled as "Templates", "Projects", or "Demos" appear under
-  the "Asset Library Projects" tab in the Godot Project Manager. These assets are
+  the "Asset Library" tab in the Godot Project Manager. These assets are
   standalone Godot projects that can run by themselves.
 
-* Other assets show up inside of the Godot editor under the "AssetLib"
+* Other assets show up inside of the Godot editor under the "Asset Library"
   main screen tab, next to "2D", "3D", and "Script". These assets are
   meant to be downloaded and placed into an existing Godot project.
 

+ 64 - 42
getting_started/introduction/first_look_at_the_editor.rst

@@ -6,104 +6,122 @@
 
 .. _doc_intro_to_the_editor_interface:
 
-First look at Godot's editor
-============================
+First look at Godot's interface
+===============================
 
 This page will give you a brief overview of Godot's interface. We're going to
 look at the different main screens 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>`.
+             use it, see the :ref:`Editor manual <doc_editor_introduction>`.
 
 The Project Manager
 -------------------
 
 When you launch Godot, the first window you see is the Project Manager. In the
-default tab **Local Projects**, you can manage existing projects, import or create new
+default tab **Projects**, you can manage existing projects, import or create new
 ones, and more.
 
 .. image:: img/editor_intro_project_manager.webp
 
-At the top of the window, there is another tab named "Asset Library Projects". The first
-time you go to this tab you'll see a "Go Online" button. For privacy reasons the Godot
+At the top of the window, there is another tab named **Asset Library**. The first
+time you go to this tab you'll see a "Go Online" button. For privacy reasons, the Godot
 project manager does not access the internet by default. To change this click
-the "Go Online button", if you want to change your network mode back to "offline" you
-can do so from the project manager settings.
-
-Once your network mode is set to "online" you can search for demo projects in the open
-source asset library, which includes many projects developed by the community.
+the "Go Online" button. You can change this option later in the settings.
 
-.. seealso:: To learn the Project Manager's ins and outs, read
-             :ref:`doc_project_manager`.
+Once your network mode is set to "online", you can search for demo projects in the open
+source asset library, which includes many projects developed by the community:
 
 .. image:: img/editor_intro_project_templates.webp
 
-You can also change the editor's language by going into the settings menu.
+The Project Manager's settings can be opened using the **Settings** menu:
 
 .. image:: img/editor_intro_settings.webp
 
-From here use the language drop down menu to select your language. By default, it is in
-English (EN).
+From here, you can change the editor's language (default is the system language), interface theme, display 
+scale, network mode, and also the directory naming convention.
+
+.. seealso:: To learn the Project Manager's ins and outs, read
+             :ref:`doc_project_manager`.
 
-.. image:: img/editor_intro_language.webp
 
 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.
+Let's look at its main areas:
 
 .. image:: img/editor_intro_editor_empty.webp
 
-By default, it features **menus**, **main screens**, and playtest buttons along
-the window's top edge.
+By default, along the window's top edge, it features **main menu** on the left, **workspace** switching 
+buttons in the center (active workspace is highlighted), and **playtest** buttons on the right:
 
 .. image:: img/editor_intro_top_menus.webp
 
-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.
+Just below the workspace buttons, the opened :ref:`scenes <doc_key_concepts_overview_scenes>`
+as tabs are seen. The plus (+) button right next to the tabs will add a new scene to the project.
+With the button on the far right, distraction-free mode can be toggled, which maximizes or restores 
+the **viewport**'s size by hiding **docks** in the interface:
 
-.. image:: img/editor_intro_3d_viewport.webp
+.. image:: img/editor_intro_scene_selector.webp
 
-On either side of the viewport sit the **docks**. And at the bottom of the
-window lies the **bottom panel**.
+In the center, below the scene selector is the **viewport** with its **toolbar** at the top, where you'll
+find different tools to move, scale, or lock the scene's nodes (currently the 3D workspace is active):
 
-The toolbar changes based on the context and selected node. Here is the 2D toolbar.
+.. image:: img/editor_intro_3d_viewport.webp
+
+This toolbar changes based on the context and selected node. Here is the 2D toolbar:
 
 .. image:: img/editor_intro_toolbar_2d.webp
 
-Below is the 3D one.
+Below is the 3D one:
 
 .. image:: img/editor_intro_toolbar_3d.webp
 
+.. seealso:: To learn more on workspaces, read :ref:`doc_intro_to_the_editor_interface_four_screens`.
+
+.. seealso:: To learn more on the 3D viewport and 3D in general, read :ref:`doc_introduction_to_3d`.
+
+On either side of the viewport sit the **docks**. And at the bottom of the
+window lies the **bottom panel**.
+
 Let's look at the docks. The **FileSystem** dock lists your project files, including
-scripts, images, audio samples, and more.
+scripts, images, audio samples, and more:
 
 .. image:: img/editor_intro_filesystem_dock.webp
 
-The **Scene** dock lists the active scene's nodes.
+The **Scene** dock lists the active scene's nodes:
 
 .. image:: img/editor_intro_scene_dock.webp
 
-The **Inspector** allows you to edit the properties of a selected node.
+The **Inspector** allows you to edit the properties of a selected node:
 
 .. image:: img/editor_intro_inspector_dock.webp
 
+.. seealso:: To read more on inspector, see :ref:`doc_editor_inspector_dock`.
+
+.. seealso:: Docks can be customized. Read more on :ref:`doc_customizing_editor_moving_docks`.
+
 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.
+space, that's why they're folded by default:
 
 .. image:: img/editor_intro_bottom_panels.webp
 
-When you click on one, it expands vertically. Below, you can see the animation editor opened.
+When you click on one, it expands vertically. Below, you can see the animation editor opened:
 
 .. image:: img/editor_intro_bottom_panel_animation.webp
 
+Bottom panels can also be shown or hidden using the shortcuts defined in 
+**Editor Settings > Shortcuts**, under the **Bottom Panels** category.
+
+.. _doc_intro_to_the_editor_interface_four_screens:
+
 The four main screens
 ---------------------
 
 There are four main screen buttons centered at the top of the editor:
-2D, 3D, Script, and AssetLib.
+2D, 3D, Script, and Asset Library.
 
 You'll use the **2D screen** for all types of games. In addition to 2D games,
 the 2D screen is where you'll build your interfaces.
@@ -115,11 +133,6 @@ In the **3D screen**, you can work with meshes, lights, and design levels for
 
 .. image:: img/editor_intro_workspace_3d.webp
 
-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.webp
-
 .. note:: Read :ref:`doc_introduction_to_3d` for more detail about the **3D
           main screen**.
 
@@ -128,7 +141,7 @@ auto-completion, and built-in code reference.
 
 .. image:: img/editor_intro_workspace_script.webp
 
-Finally, the **AssetLib** is a library of free and open source add-ons, scripts,
+Finally, the **Asset Library** is a library of free and open source add-ons, scripts,
 and assets to use in your projects.
 
 .. image:: img/editor_intro_workspace_assetlib.webp
@@ -144,11 +157,12 @@ Godot comes with a built-in class reference.
 You can search for information about a class, method, property, constant, or
 signal by any one of the following methods:
 
-* Pressing :kbd:`F1` (or :kbd:`Opt + Space` on macOS, or :kbd:`fn + F1` for laptops with a :kbd:`fn` key) anywhere in the editor.
+* Pressing :kbd:`F1` (or :kbd:`Opt + Space` on macOS, or :kbd:`Fn + F1` for laptops 
+  with a :kbd:`Fn` key) anywhere in the editor.
 * Clicking the "Search Help" button in the top-right of the Script main screen.
 * Clicking on the Help menu and Search Help.
-* :kbd:`Ctrl + Click` (:kbd:`Cmd + Click` on macOS) on a class name, function name, or built-in variable in the script editor.
-
+* :kbd:`Ctrl + Click` (:kbd:`Cmd + Click` on macOS) on a class name, function name, 
+  or built-in variable in the script editor.
 
 .. image:: img/editor_intro_search_help_button.webp
 
@@ -160,3 +174,11 @@ also use it to browse available objects and methods.
 Double-click on an item to open the corresponding page in the script main screen.
 
 .. image:: img/editor_intro_help_class_animated_sprite.webp
+
+Alternatively,
+
+* Clicking while pressing the :kbd:`Ctrl` key on a class name, function name,
+  or built-in variable in the script editor.
+* Right-clicking on nodes and choosing **Open Documentation** or choosing **Lookup Symbol**
+  for elements in script editor will directly open their documentation.
+

BIN
getting_started/introduction/img/editor_intro_3d_viewport.webp


BIN
getting_started/introduction/img/editor_intro_3d_viewport_perspective.webp


BIN
getting_started/introduction/img/editor_intro_language.webp


BIN
getting_started/introduction/img/editor_intro_scene_selector.webp


+ 2 - 0
getting_started/introduction/key_concepts_overview.rst

@@ -16,6 +16,8 @@ These are the four concepts you will learn here. We're going to look at them
 briefly to give you a sense of how the engine works. In the getting started
 series, you will get to use them in practice.
 
+.. _doc_key_concepts_overview_scenes:
+
 Scenes
 ------
 

+ 2 - 0
tutorials/editor/customizing_editor.rst

@@ -7,6 +7,8 @@ Godot's interface lives in a single window by default. Since Godot 4.0, you can
 split several elements to separate windows to better make use of multi-monitor
 setups.
 
+.. _doc_customizing_editor_moving_docks:
+
 Moving and resizing docks
 -------------------------
 

BIN
tutorials/editor/img/editor_ui_intro_project_manager_05.webp


BIN
tutorials/editor/img/editor_ui_intro_project_manager_08.webp


BIN
tutorials/editor/img/editor_ui_intro_project_manager_10.webp


+ 57 - 22
tutorials/editor/project_manager.rst

@@ -4,16 +4,24 @@ Using the Project Manager
 =========================
 
 When you launch Godot, the first window you see is the Project Manager. It lets
-you create, remove, import, or play game projects.
+you create, remove, import, or play game projects:
 
 .. image:: img/editor_ui_intro_project_manager_01.webp
 
-To change the editors language click on the "Settings" Button in the top right
-corner. 
+To change the editors language click on the **Settings** Button in the top right
+corner:
 
 .. image:: img/editor_ui_intro_project_manager_02.webp
 
-Then on the settings page select the language you want from the dropdown menu.
+In Project Manager Settings, you can change the interface **language** from the language
+dropdown menu, which is the system default language by default.
+
+You can also change the **theme** of the editor, the **display scale** for different interface 
+element sizes, and the availability of online functionality using **network mode**.
+If network mode is online, Godot will also check and inform you about new versions of Godot.
+
+The **directory naming convention** can also be changed to replace spaces according to the chosen format 
+when creating folders automatically.
 
 .. image:: img/editor_ui_intro_project_manager_10.webp
 
@@ -24,24 +32,42 @@ Creating and importing projects
 
 To create a new project:
 
-1. Click the **New** button on the top-left of the window.
+1. Click the **Create** button on the top-left of the window.
 2. Give the project a name, choose an empty folder on your computer to save the
-   files, and select a rendering backend.
-3. Click the **Create & Edit** button to create the project folder and open it in the editor.
+   files. Alternatively, you can enable **Create Folder** option to automatically create 
+   a new sub-folder with the project name, following the directory naming convention
+   set in the settings. An empty folder will show a green tick on the right.
+3. Select one of the rendering backends (this can also be changed later).
+4. Click the **Create & Edit** button to create the project folder and open it in the editor.
 
 .. image:: img/editor_ui_intro_project_manager_04.webp
 
+.. note:: You can optionally choose a version control system. Currently, only 
+	`git <https://git-scm.com>`__ is supported and it needs the Godot Git Plugin to be installed, 
+	either manually or using the :ref:`Asset Library <doc_using_assetlib>`. To learn more about the Godot Git Plugin, see its `wiki <https://github.com/godotengine/godot-git-plugin/wiki>`__.
+
 Using the file browser
 ~~~~~~~~~~~~~~~~~~~~~~
 
-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.
+Click the **Browse** button to open Godot's file browser.
+You can pick a location or type the folder's path in the **Path** field, after choosing a drive.
 
-.. image:: img/editor_ui_intro_project_manager_05.webp
+Left of the path field on the top row contains arrows to navigate backward and forward through the last
+visited locations.
+The up arrow navigates to parent folder.
+On the right side of the path field, there are buttons to refresh the current folder's contents,
+favorite/unfavorite the current folder, and show/hide hidden folders.
+
+Next, the buttons to switch the display type of the folders and files between grid view and list view
+are seen.
+
+The last button on the right will create a new folder.
 
-When you see the green tick on the right, it means the engine detects an empty
-folder. You can also click the **Create Folder** button to create an empty
-folder based on your project's name.
+Favorited folders will be displayed on the left side under the **Favorites** section. You can sort the
+favorites using the up and down buttons in this section.
+Last chosen folders will be listed under the **Recent** list.
+
+.. image:: img/editor_ui_intro_project_manager_05.webp
 
 Opening and importing projects
 ------------------------------
@@ -57,6 +83,8 @@ edit it.
 
 .. image:: img/editor_ui_intro_project_manager_08.webp
 
+Alternatively, it is possible to choose a zip file to be automatically extracted by Godot.
+
 When the folder path is correct, you'll see a green checkmark.
 
 .. image:: img/editor_ui_intro_project_manager_09.webp
@@ -66,15 +94,15 @@ When the folder path is correct, you'll see a green checkmark.
 Downloading demos and templates
 -------------------------------
 
-From the **Asset Library Projects** tab you can download open source project
-templates and demos from the :ref:`Asset Library <doc_what_is_assetlib>` to help
+From the **Asset Library** tab you can download open source project
+templates and demos from the :ref:`Asset Library <toc-learn-features-assetlib>` to help
 you get started faster.
 
 The first time you open this tab you'll notice that it's asking you to go online.
 For privacy reasons the project manager, and Godot editor, can't access the internet
-by default. To enable accessing the internet click the "Go Online" button. This will
+by default. To enable accessing the internet click the **Go Online** button. This will
 also allow project manager to notify you about updates. If you wish to turn this off
-in the future go into project manager settings and change "Network Mode" to "Offline"
+in the future go into project manager settings and change **Network Mode** to "Offline"
 
 Now that Godot is connected to the internet you can download a demo or template, to
 do this:
@@ -91,7 +119,7 @@ Managing projects with tags
 
 For users with a lot of projects on one PC it can be a lot to keep track of. To aid
 in this Godot allows you to create project tags. To add a tag to a project click on the
-project in the project manager, then click on the "Manage Tags" button
+project in the project manager, then click on the **Manage Tags** button
 
 .. image:: img/editor_ui_intro_project_manager_11.webp
 
@@ -99,10 +127,17 @@ This will open up the manage project tags window. To add a tag click the plus bu
 
 .. image:: img/editor_ui_intro_project_manager_12.webp
 
-Type out the tag name, and click "ok". Your project will now have a tag added to it.
-These tags can be used for any other project in your project manager. In addition tags
-will stay with projects. So if you tag your project, send it to another machine and
-import it into the project manager you will see the tags you created.
+Type out the tag name, and click **OK**. Your project will now have a tag added to it.
+These tags can be used for any other project in your project manager.
+
+To show projects with a specific tag only, you can click on the tags or write ``tag:`` 
+and type the tag you would like to search for in the filter bar. To limit the results 
+using multiple tags, you can click on another tag or add ``tag:`` after 
+a space and type another tag in the filter bar.
+
+In addition, tags will stay with projects. So if you tag your project, send it to 
+another machine, and import it into the project manager you will see the tags
+you created.
 
 To remove a tag from your project manager it must be removed from all the projects it's
 used by. Once that's done close the project manager, open it up again, and the tag should