66
77 .. _doc_intro_to_the_editor_interface :
88
9- First look at Godot's editor
10- ============================
9+ First look at Godot's interface
10+ ===============================
1111
1212This page will give you a brief overview of Godot's interface. We're going to
1313look at the different main screens and docks to help you situate yourself.
1414
1515.. seealso :: For a comprehensive breakdown of the editor's interface and how to
16- use it, see the :ref: `Editor manual <toc-learn-editor >`.
16+ use it, see the :ref: `Editor manual <doc_editor_introduction >`.
1717
1818The Project Manager
1919-------------------
2020
2121When you launch Godot, the first window you see is the Project Manager. In the
22- default tab **Local Projects **, you can manage existing projects, import or create new
22+ default tab **Projects **, you can manage existing projects, import or create new
2323ones, and more.
2424
2525.. image :: img/editor_intro_project_manager.webp
2626
27- At the top of the window, there is another tab named " Asset Library Projects" . The first
28- time you go to this tab you'll see a "Go Online" button. For privacy reasons the Godot
27+ At the top of the window, there is another tab named ** Asset Library ** . The first
28+ time you go to this tab you'll see a "Go Online" button. For privacy reasons, the Godot
2929project manager does not access the internet by default. To change this click
30- the "Go Online button", if you want to change your network mode back to "offline" you
31- can do so from the project manager settings.
32-
33- Once your network mode is set to "online" you can search for demo projects in the open
34- source asset library, which includes many projects developed by the community.
30+ the "Go Online" button. You can change this option later in the settings.
3531
36- .. seealso :: To learn the Project Manager's ins and outs, read
37- :ref: ` doc_project_manager `.
32+ Once your network mode is set to "online", you can search for demo projects in the open
33+ source asset library, which includes many projects developed by the community:
3834
3935.. image :: img/editor_intro_project_templates.webp
4036
41- You can also change the editor 's language by going into the settings menu.
37+ The Project Manager 's settings can be opened using the ** Settings ** menu:
4238
4339.. image :: img/editor_intro_settings.webp
4440
45- From here use the language drop down menu to select your language. By default, it is in
46- English (EN).
41+ From here, you can change the editor's language (default is the system language), interface theme, display
42+ scale, network mode, and also the directory naming convention.
43+
44+ .. seealso :: To learn the Project Manager's ins and outs, read
45+ :ref: `doc_project_manager `.
4746
48- .. image :: img/editor_intro_language.webp
4947
5048First look at Godot's editor
5149----------------------------
5250
5351When you open a new or an existing project, the editor's interface appears.
54- Let's look at its main areas.
52+ Let's look at its main areas:
5553
5654.. image :: img/editor_intro_editor_empty.webp
5755
58- By default, it features **menus ** , **main screens **, and playtest buttons along
59- the window's top edge.
56+ By default, along the window's top edge, it features **main menu ** on the left , **workspace ** switching
57+ buttons in the center (active workspace is highlighted), and ** playtest ** buttons on the right:
6058
6159.. image :: img/editor_intro_top_menus.webp
6260
63- In the center is the **viewport ** with its **toolbar ** at the top, where you'll
64- find tools to move, scale, or lock the scene's nodes.
61+ Just below the workspace buttons, the opened :ref: `scenes <doc_key_concepts_overview_scenes >`
62+ as tabs are seen. The plus (+) button right next to the tabs will add a new scene to the project.
63+ With the button on the far right, distraction-free mode can be toggled, which maximizes or restores
64+ the **viewport **'s size by hiding **docks ** in the interface:
6565
66- .. image :: img/editor_intro_3d_viewport .webp
66+ .. image :: img/editor_intro_scene_selector .webp
6767
68- On either side of the viewport sit the **docks **. And at the bottom of the
69- window lies the ** bottom panel **.
68+ In the center, below the scene selector is the **viewport ** with its ** toolbar ** at the top, where you'll
69+ find different tools to move, scale, or lock the scene's nodes (currently the 3D workspace is active):
7070
71- The toolbar changes based on the context and selected node. Here is the 2D toolbar.
71+ .. image :: img/editor_intro_3d_viewport.webp
72+
73+ This toolbar changes based on the context and selected node. Here is the 2D toolbar:
7274
7375.. image :: img/editor_intro_toolbar_2d.webp
7476
75- Below is the 3D one.
77+ Below is the 3D one:
7678
7779.. image :: img/editor_intro_toolbar_3d.webp
7880
81+ .. seealso :: To learn more on workspaces, read :ref:`doc_intro_to_the_editor_interface_four_screens`.
82+
83+ .. seealso :: To learn more on the 3D viewport and 3D in general, read :ref:`doc_introduction_to_3d`.
84+
85+ On either side of the viewport sit the **docks **. And at the bottom of the
86+ window lies the **bottom panel **.
87+
7988Let's look at the docks. The **FileSystem ** dock lists your project files, including
80- scripts, images, audio samples, and more.
89+ scripts, images, audio samples, and more:
8190
8291.. image :: img/editor_intro_filesystem_dock.webp
8392
84- The **Scene ** dock lists the active scene's nodes.
93+ The **Scene ** dock lists the active scene's nodes:
8594
8695.. image :: img/editor_intro_scene_dock.webp
8796
88- The **Inspector ** allows you to edit the properties of a selected node.
97+ The **Inspector ** allows you to edit the properties of a selected node:
8998
9099.. image :: img/editor_intro_inspector_dock.webp
91100
101+ .. seealso :: To read more on inspector, see :ref:`doc_editor_inspector_dock`.
102+
103+ .. seealso :: Docks can be customized. Read more on :ref:`doc_customizing_editor_moving_docks`.
104+
92105The **bottom panel **, situated below the viewport, is the host for the debug
93106console, the animation editor, the audio mixer, and more. They can take precious
94- space, that's why they're folded by default.
107+ space, that's why they're folded by default:
95108
96109.. image :: img/editor_intro_bottom_panels.webp
97110
98- When you click on one, it expands vertically. Below, you can see the animation editor opened.
111+ When you click on one, it expands vertically. Below, you can see the animation editor opened:
99112
100113.. image :: img/editor_intro_bottom_panel_animation.webp
101114
115+ Bottom panels can also be shown or hidden using the shortcuts defined in
116+ **Editor Settings > Shortcuts **, under the **Bottom Panels ** category.
117+
118+ .. _doc_intro_to_the_editor_interface_four_screens :
119+
102120The four main screens
103121---------------------
104122
105123There are four main screen buttons centered at the top of the editor:
106- 2D, 3D, Script, and AssetLib .
124+ 2D, 3D, Script, and Asset Library .
107125
108126You'll use the **2D screen ** for all types of games. In addition to 2D games,
109127the 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
115133
116134.. image :: img/editor_intro_workspace_3d.webp
117135
118- Notice the perspective button under the toolbar. Clicking on it opens a list of
119- options related to the 3D view.
120-
121- .. image :: img/editor_intro_3d_viewport_perspective.webp
122-
123136.. note :: Read :ref:`doc_introduction_to_3d` for more detail about the **3D
124137 main screen**.
125138
@@ -128,7 +141,7 @@ auto-completion, and built-in code reference.
128141
129142.. image :: img/editor_intro_workspace_script.webp
130143
131- Finally, the **AssetLib ** is a library of free and open source add-ons, scripts,
144+ Finally, the **Asset Library ** is a library of free and open source add-ons, scripts,
132145and assets to use in your projects.
133146
134147.. image :: img/editor_intro_workspace_assetlib.webp
@@ -144,11 +157,12 @@ Godot comes with a built-in class reference.
144157You can search for information about a class, method, property, constant, or
145158signal by any one of the following methods:
146159
147- * Pressing :kbd: `F1 ` (or :kbd: `Opt + Space ` on macOS, or :kbd: `fn + F1 ` for laptops with a :kbd: `fn ` key) anywhere in the editor.
160+ * Pressing :kbd: `F1 ` (or :kbd: `Opt + Space ` on macOS, or :kbd: `Fn + F1 ` for laptops
161+ with a :kbd: `Fn ` key) anywhere in the editor.
148162* Clicking the "Search Help" button in the top-right of the Script main screen.
149163* Clicking on the Help menu and Search Help.
150- * :kbd: `Ctrl + Click ` (:kbd: `Cmd + Click ` on macOS) on a class name, function name, or built-in variable in the script editor.
151-
164+ * :kbd: `Ctrl + Click ` (:kbd: `Cmd + Click ` on macOS) on a class name, function name,
165+ or built-in variable in the script editor.
152166
153167.. image :: img/editor_intro_search_help_button.webp
154168
@@ -160,3 +174,11 @@ also use it to browse available objects and methods.
160174Double-click on an item to open the corresponding page in the script main screen.
161175
162176.. image :: img/editor_intro_help_class_animated_sprite.webp
177+
178+ Alternatively,
179+
180+ * Clicking while pressing the :kbd: `Ctrl ` key on a class name, function name,
181+ or built-in variable in the script editor.
182+ * Right-clicking on nodes and choosing **Open Documentation ** or choosing **Lookup Symbol **
183+ for elements in script editor will directly open their documentation.
184+
0 commit comments