|
@@ -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.
|
|
|
+
|