diff --git a/about/introduction.rst b/about/introduction.rst index bcfbbbdeb..aa3f8295f 100644 --- a/about/introduction.rst +++ b/about/introduction.rst @@ -50,8 +50,7 @@ if you need a quick writeup about Godot Engine. Freedom Conservancy `_ not-for-profit. For a more in-depth view of the engine, you are encouraged to read this -documentation further, especially the :ref:`Step by step -` tutorial. +documentation further, especially the :ref:`Getting Started ` series. About the documentation ----------------------- diff --git a/getting_started/introduction/first_look_at_the_editor.rst b/getting_started/introduction/first_look_at_the_editor.rst new file mode 100644 index 000000000..870a742bc --- /dev/null +++ b/getting_started/introduction/first_look_at_the_editor.rst @@ -0,0 +1,157 @@ +.. This page is only here to introduce the interface to the user broadly. To + cover individual areas in greater detail, write the corresponding pages in + the most appropriate section, and link them. E.g. the animation editor goes + to the animation section. General pages, for instance, about the project + manager, should go in the editor manual. + +.. _doc_intro_to_the_editor_interface: + +First look at Godot's editor +============================ + +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 `. + +The Project manager +------------------- + +When you launch Godot, the first window you see is the Project Manager. In the +default tab, "Projects," you can manage existing projects, import or create new +ones, and more. + +.. image:: img/editor_intro_project_manager.png + +At the top of the window, there is another tab named "Templates". You can search +for demo projects in the open-source asset library, which includes many projects +developed by the community. + +.. seealso:: To learn the project manager's ins and outs, read + :ref:`doc_project_manager`. + +.. image:: img/editor_intro_project_templates.png + +You can also change the editor's language using the drop-down menu to the right +of the engine's version in the window's top-right corner. By default, it is in +English (EN). + +.. image:: img/editor_intro_language.png + +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. + +.. image:: img/editor_intro_editor_empty.png + +By default, it features **menus**, **main screens**, and playtest buttons along +the window's top edge. + +.. image:: img/editor_intro_top_menus.png + +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. + +.. image:: img/editor_intro_3d_viewport.png + +On either side of the viewport sit the **docks**. And at the bottom of the +window lies the **bottom panel**. + +The toolbar changes based on the context and selected node. Here is the 2D toolbar. + +.. image:: img/editor_intro_toolbar_2d.png + +Below is the 3D one. + +.. image:: img/editor_intro_toolbar_3d.png + +Let's look at the docks. The **FileSystem** dock lists your project files, be it +scripts, images, audio samples, and more. + +.. image:: img/editor_intro_filesystem_dock.png + +The **Scene** dock lists the active scene's nodes. + +.. image:: img/editor_intro_scene_dock.png + +The **Inspector** allows you to edit the properties of a selected node. + +.. image:: img/editor_intro_inspector_dock.png + +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. + +.. image:: img/editor_intro_bottom_panels.png + +When you click on one, it expands vertically. Below, you can see the animation editor opened. + +.. image:: img/editor_intro_bottom_panel_animation.png + +The four main screens +--------------------- + +There are four main screen buttons centered at the top of the editor: +2D, 3D, Script, and AssetLib. + +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. Press :kbd:`F1` (or +:kbd:`Alt + 1` on macOS) to access it. + +.. image:: img/editor_intro_workspace_2d.png + +In the **3D screen**, you can work with meshes, lights, and design levels for +3D games. Press :kbd:`F2` (:kbd:`Alt + 2` on macOS) to access it. + +.. image:: img/editor_intro_workspace_3d.png + +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.png + +.. note:: Read :ref:`doc_introduction_to_3d` for more detail about the **3D + main screen**. + +The **Script screen** is a complete code editor with a debugger, rich +auto-completion, and built-in code reference. Press :kbd:`F3` (:kbd:`Alt + 3` +on macOS) to access it. + +.. image:: img/editor_intro_workspace_script.png + +Finally, the **AssetLib** is a library of free and open-source add-ons, scripts, +and assets to use in your projects. + +.. image:: img/editor_intro_workspace_assetlib.png + +.. seealso:: You can learn more about the asset library in + :ref:`doc_what_is_assetlib`. + +Integrated class reference +-------------------------- + +Godot comes with a built-in class reference. + +You can search for information about a class, method, property, constant, or +signal by: + +1. Pressing :kbd:`Shift + F1` anywhere in the editor. +2. Clicking the "Search Help" button in the top-right of the Script main screen. +3. Clicking on the Help menu and Search. +4. Clicking while pressing the :kbd:`Ctrl` key on a class name, + function name, or built-in variable in the script editor. + + +.. image:: img/editor_intro_search_help_button.png + +When you do any of these, a window pops up. Type to search for any item. You can +also use it to browse available objects and methods. + +.. image:: img/editor_intro_search_help.png + +Double-click on an item to open the corresponding page in the script main screen. + +.. image:: img/editor_intro_help_class_animated_sprite.png diff --git a/getting_started/introduction/img/editor_intro_3d_viewport.png b/getting_started/introduction/img/editor_intro_3d_viewport.png new file mode 100644 index 000000000..489d35fe9 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_3d_viewport.png differ diff --git a/getting_started/introduction/img/editor_intro_3d_viewport_perspective.png b/getting_started/introduction/img/editor_intro_3d_viewport_perspective.png new file mode 100644 index 000000000..9c9eeb6d1 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_3d_viewport_perspective.png differ diff --git a/getting_started/introduction/img/editor_intro_bottom_panel_animation.png b/getting_started/introduction/img/editor_intro_bottom_panel_animation.png new file mode 100644 index 000000000..1e8da6e0c Binary files /dev/null and b/getting_started/introduction/img/editor_intro_bottom_panel_animation.png differ diff --git a/getting_started/introduction/img/editor_intro_bottom_panels.png b/getting_started/introduction/img/editor_intro_bottom_panels.png new file mode 100644 index 000000000..570f967a2 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_bottom_panels.png differ diff --git a/getting_started/introduction/img/editor_intro_editor_empty.png b/getting_started/introduction/img/editor_intro_editor_empty.png new file mode 100644 index 000000000..55967e2ae Binary files /dev/null and b/getting_started/introduction/img/editor_intro_editor_empty.png differ diff --git a/getting_started/introduction/img/editor_intro_filesystem_dock.png b/getting_started/introduction/img/editor_intro_filesystem_dock.png new file mode 100644 index 000000000..482ce8711 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_filesystem_dock.png differ diff --git a/getting_started/introduction/img/editor_intro_help_class_animated_sprite.png b/getting_started/introduction/img/editor_intro_help_class_animated_sprite.png new file mode 100644 index 000000000..b2dccbc08 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_help_class_animated_sprite.png differ diff --git a/getting_started/introduction/img/editor_intro_inspector_dock.png b/getting_started/introduction/img/editor_intro_inspector_dock.png new file mode 100644 index 000000000..1374a143e Binary files /dev/null and b/getting_started/introduction/img/editor_intro_inspector_dock.png differ diff --git a/getting_started/introduction/img/editor_intro_language.png b/getting_started/introduction/img/editor_intro_language.png new file mode 100644 index 000000000..0be95157c Binary files /dev/null and b/getting_started/introduction/img/editor_intro_language.png differ diff --git a/getting_started/introduction/img/editor_intro_project_manager.png b/getting_started/introduction/img/editor_intro_project_manager.png new file mode 100644 index 000000000..9e4bd8059 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_project_manager.png differ diff --git a/getting_started/introduction/img/editor_intro_project_templates.png b/getting_started/introduction/img/editor_intro_project_templates.png new file mode 100644 index 000000000..00cde11e8 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_project_templates.png differ diff --git a/getting_started/introduction/img/editor_intro_scene_dock.png b/getting_started/introduction/img/editor_intro_scene_dock.png new file mode 100644 index 000000000..7412b23ac Binary files /dev/null and b/getting_started/introduction/img/editor_intro_scene_dock.png differ diff --git a/getting_started/introduction/img/editor_intro_search_help.png b/getting_started/introduction/img/editor_intro_search_help.png new file mode 100644 index 000000000..863efa911 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_search_help.png differ diff --git a/getting_started/introduction/img/editor_intro_search_help_button.png b/getting_started/introduction/img/editor_intro_search_help_button.png new file mode 100644 index 000000000..3f4627510 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_search_help_button.png differ diff --git a/getting_started/introduction/img/editor_intro_toolbar_2d.png b/getting_started/introduction/img/editor_intro_toolbar_2d.png new file mode 100644 index 000000000..103800b3c Binary files /dev/null and b/getting_started/introduction/img/editor_intro_toolbar_2d.png differ diff --git a/getting_started/introduction/img/editor_intro_toolbar_3d.png b/getting_started/introduction/img/editor_intro_toolbar_3d.png new file mode 100644 index 000000000..1700db534 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_toolbar_3d.png differ diff --git a/getting_started/introduction/img/editor_intro_top_menus.png b/getting_started/introduction/img/editor_intro_top_menus.png new file mode 100644 index 000000000..37c75a03e Binary files /dev/null and b/getting_started/introduction/img/editor_intro_top_menus.png differ diff --git a/getting_started/introduction/img/editor_intro_workspace_2d.png b/getting_started/introduction/img/editor_intro_workspace_2d.png new file mode 100644 index 000000000..7b9bca655 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_workspace_2d.png differ diff --git a/getting_started/introduction/img/editor_intro_workspace_3d.png b/getting_started/introduction/img/editor_intro_workspace_3d.png new file mode 100644 index 000000000..0c4e7da80 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_workspace_3d.png differ diff --git a/getting_started/introduction/img/editor_intro_workspace_assetlib.png b/getting_started/introduction/img/editor_intro_workspace_assetlib.png new file mode 100644 index 000000000..6febf011d Binary files /dev/null and b/getting_started/introduction/img/editor_intro_workspace_assetlib.png differ diff --git a/getting_started/introduction/img/editor_intro_workspace_script.png b/getting_started/introduction/img/editor_intro_workspace_script.png new file mode 100644 index 000000000..bdf6b8265 Binary files /dev/null and b/getting_started/introduction/img/editor_intro_workspace_script.png differ diff --git a/getting_started/introduction/img/introduction_editor.png b/getting_started/introduction/img/introduction_editor.png new file mode 100644 index 000000000..d166075e0 Binary files /dev/null and b/getting_started/introduction/img/introduction_editor.png differ diff --git a/getting_started/introduction/img/introduction_ex_zodiac.png b/getting_started/introduction/img/introduction_ex_zodiac.png new file mode 100644 index 000000000..994975daf Binary files /dev/null and b/getting_started/introduction/img/introduction_ex_zodiac.png differ diff --git a/getting_started/introduction/img/introduction_helms_of_fury.jpg b/getting_started/introduction/img/introduction_helms_of_fury.jpg new file mode 100644 index 000000000..7ea52ac52 Binary files /dev/null and b/getting_started/introduction/img/introduction_helms_of_fury.jpg differ diff --git a/getting_started/introduction/img/introduction_rpg_in_a_box.png b/getting_started/introduction/img/introduction_rpg_in_a_box.png new file mode 100644 index 000000000..bc046cde3 Binary files /dev/null and b/getting_started/introduction/img/introduction_rpg_in_a_box.png differ diff --git a/getting_started/introduction/img/introduction_vscode.png b/getting_started/introduction/img/introduction_vscode.png new file mode 100644 index 000000000..6fc0ff29d Binary files /dev/null and b/getting_started/introduction/img/introduction_vscode.png differ diff --git a/getting_started/introduction/img/key_concepts_character_nodes.png b/getting_started/introduction/img/key_concepts_character_nodes.png new file mode 100644 index 000000000..e0d7bc0a7 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_character_nodes.png differ diff --git a/getting_started/introduction/img/key_concepts_main_menu.png b/getting_started/introduction/img/key_concepts_main_menu.png new file mode 100644 index 000000000..446adb2e4 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_main_menu.png differ diff --git a/getting_started/introduction/img/key_concepts_node_menu.png b/getting_started/introduction/img/key_concepts_node_menu.png new file mode 100644 index 000000000..a4153eb64 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_node_menu.png differ diff --git a/getting_started/introduction/img/key_concepts_scene_example.png b/getting_started/introduction/img/key_concepts_scene_example.png new file mode 100644 index 000000000..e7bfb5830 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_scene_example.png differ diff --git a/getting_started/introduction/img/key_concepts_scene_tree.png b/getting_started/introduction/img/key_concepts_scene_tree.png new file mode 100644 index 000000000..aaa42fff1 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_scene_tree.png differ diff --git a/getting_started/introduction/img/key_concepts_signals.png b/getting_started/introduction/img/key_concepts_signals.png new file mode 100644 index 000000000..9b84c8f89 Binary files /dev/null and b/getting_started/introduction/img/key_concepts_signals.png differ diff --git a/getting_started/introduction/index.rst b/getting_started/introduction/index.rst index 12eeb7728..1afa629cf 100644 --- a/getting_started/introduction/index.rst +++ b/getting_started/introduction/index.rst @@ -1,3 +1,7 @@ +.. Intention: provide the necessary information to make the most of the getting + started series, answering questions like "do I want to learn Godot?", "how + does it look and feel?", "how does it work?", and "how do I best learn it?". + Introduction ============ @@ -5,12 +9,15 @@ This series will introduce you to Godot and give you an overview of its features. In the following pages, you will get answers to questions such as "Is Godot for -me?" or "What can I do with Godot?". We will then run you through the editor's -interface, introduce the engine's most essential concepts, and give you tips to +me?" or "What can I do with Godot?". We will then introduce the engine's most +essential concepts, run you through the editor's interface, and give you tips to make the most of your time learning it. .. toctree:: :maxdepth: 1 :name: toc-learn-introduction + introduction_to_godot + key_concepts_overview + first_look_at_the_editor learning_new_features diff --git a/getting_started/introduction/introduction_to_godot.rst b/getting_started/introduction/introduction_to_godot.rst new file mode 100644 index 000000000..4d4b8e140 --- /dev/null +++ b/getting_started/introduction/introduction_to_godot.rst @@ -0,0 +1,126 @@ +Introduction to Godot +===================== + +This article is here to help you figure out whether Godot might be a good fit +for you. We will introduce some broad features of the engine to give you a feel +for what you can achieve with it and answer questions such as "what do I need to +know to get started?". + +This is by no means an exhaustive overview. We will introduce many more features +in this getting started series. + +What is Godot? +-------------- + +Godot is a general-purpose 2D and 3D game engine designed to support all sorts +of projects. You can use it to create games or applications you can then release +on desktop or mobile, as well as on the web. + +You can also create console games with it, although you either need strong +programming skills or a developer to port the game for you. + +.. note:: The Godot team can't provide an open-source console export due to the + licensing terms imposed by console manufacturers. Regardless of the + engine you use, though, releasing games on consoles is always a lot of + work. You can read more on that here: :ref:`doc_consoles`. + +What can the engine do? +----------------------- + +Godot was initially developed in-house by an Argentinan game studio. Its +development started in 2001, and the engine was rewritten and improved +tremendously since its open-source release in 2014. + +Some examples of games created with Godot include Ex-Zodiac and Helms of Fury. + +.. image:: img/introduction_ex_zodiac.png + +.. image:: img/introduction_helms_of_fury.jpg + +As for applications, the open-source pixel art drawing program Pixelorama is +powered by Godot, and so is the voxel RPG creator RPG in a box. + +.. image:: img/introduction_rpg_in_a_box.png + +You can find many more examples in the official showcase videos: + +- `April 2020 desktop and console showcase`_ +- `April 2020 mobile showcase`_ + +How does it work and look? +-------------------------- + +Godot comes with a fully-fledged game editor with integrated tools to answer the +most common needs. It includes a code editor, an animation editor, a tilemap +editor, a shader editor, a debugger, a profiler, and more. + +.. image:: img/introduction_editor.png + +The team strives to offer a feature-rich game editor with a consistent user +experience. While there is always room for improvement, the user interface keeps +getting refined. + +Of course, if you prefer, you can work with external programs. We officially +support importing 3D scenes designed in Blender_ and maintain plugins to code in +VSCode_ and Emacs_ for GDScript and C#. We also support Visual Studio for C# on +Windows. + +.. image:: img/introduction_vscode.png + +Programming languages +--------------------- + +Let's talk about the available programming languages. + +You can code your games using :ref:`GDScript `, a +Godot-specific and tightly integrated language with a lightweight syntax, or +:ref:`C# `, which is popular in the games industry. +These are the two main scripting languages we support. + +Godot also supports a node-based visual programming language named +:ref:`VisualScript `. + +With the :ref:`GDNative ` technology, you can also write +gameplay or high-performance algorithms in C or C++ without recompiling the +engine. You can use this technology to integrate third-party libraries and other +Software Development Kits (SDK) in the engine. + +Of course, you can also directly add modules and features to the engine, as it's +completely free and open-source. + +.. seealso:: These are the five officially supported programming languages. The + community maintains support for many more. For more information, + see :ref:`GDNative third-party bindings + `. + +What do I need to know to use Godot? +------------------------------------ + +Godot is a feature-packed game engine. With its thousands of features, there is +a lot to learn. To make the most of it, you need good programming foundations. +While we try to make the engine accessible, you will benefit a lot from knowing +how to think like a programmer first. + +Godot relies on the object-oriented programming paradigm. Being comfortable with +concepts such as classes and objects will help you code efficiently in it. + +If you are entirely new to programming, we recommend following the `CS50 open +courseware`_ from Harvard University. It's a great free course that will teach +you everything you need to know to be off to a good start. It will save you +countless hours and hurdles learning any game engine afterward. + +.. note:: In CS50, you will learn multiple programming languages. Don't be + afraid of that: programming languages have many similarities. The + skills you learn with one language transfer well to others. + +We will provide you with more Godot-specific learning resources in +:ref:`doc_learning_new_features`. + +In the next part, you will get an overview of the engine's essential concepts. + +.. _Blender: https://www.blender.org/ +.. _VSCode: https://github.com/godotengine/godot-vscode-plugin +.. _Emacs: https://github.com/godotengine/emacs-gdscript-mode +.. _April 2020 desktop and console showcase: https://youtu.be/UEDEIksGEjQ +.. _April 2020 mobile showcase: https://youtu.be/AIapugketbs +.. _CS50 open courseware: https://cs50.harvard.edu/x/2020/ diff --git a/getting_started/introduction/key_concepts_overview.rst b/getting_started/introduction/key_concepts_overview.rst new file mode 100644 index 000000000..c97e8023d --- /dev/null +++ b/getting_started/introduction/key_concepts_overview.rst @@ -0,0 +1,100 @@ +.. Intention: introduce only a handful of key concepts and avoid a big cognitive + load. Readers will then be reminded of the concepts further in the getting + started series, reinforcing their learning. + +.. _doc_key_concepts_overview: + +Overview of Godot's key concepts +================================ + +Every game engine revolves around abstractions you use to build your +applications. In Godot, a game is a **tree** of **nodes** that you group +together into **scenes**. You can then wire these nodes so they can communicate +using **signals**. + +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. + +Scenes +------ + +In Godot, you break down your game in reusable scenes. A scene like a character, +a weapon, a menu in the user interface, a single house, an entire level, or +anything you can think of. Godot's scenes are flexible; they fill the role of +both prefabs and scenes in some other game engines. + +.. image:: img/key_concepts_main_menu.png + +You can also nest scenes. For example, you can put your character in a level, +and drag and drop a scene as a child of it. + +.. image:: img/key_concepts_scene_example.png + +Nodes +----- + +A scene is composed of one or more **nodes**. Nodes are your game's smallest +building block that you arrange into trees. Here's an example of a character's +nodes. + +.. image:: img/key_concepts_character_nodes.png + +It is made of a ``KinematicBody2D`` node named "Character", a ``Sprite2D``, a +``Camera2D``, and a ``CollisionShape2D``. + +.. note:: The node names end with "2D" because this is a 2D scene. Their 3D + counterpart have names that end with "3D". + +Notice how nodes and scenes look the same in the editor. When you save a tree of +nodes as a scene, it then shows as a single node, with its internal structure +hidden in the editor. + +Godot provides an extensive library of base node types you can combine and +extend to build more powerful ones. 2D, 3D, or user interface, you will do most +things with these nodes. + +.. image:: img/key_concepts_node_menu.png + +The scene tree +-------------- + +All your game's scenes come together in the **scene tree**, literally a tree of +scenes. And as scenes are trees of nodes, the scene tree also is a tree of +nodes. But it's easier to think of your game in terms of scenes as they can +represent characters, weapons, doors, or your user interface. + +.. image:: img/key_concepts_scene_tree.png + +Signals +------- + +Nodes emit signals when some event occurred. This feature allows you to make +nodes communicate without hard-wiring them in code. It gives you a lot of +flexibility in how you structure your scenes. + +.. image:: img/key_concepts_signals.png + +.. note:: Signals are Godot's version of the *observer* pattern. You can read + more about the observer pattern here: + https://gameprogrammingpatterns.com/observer.html + +For example, buttons emit a signal when pressed. You can connect to this signal +to run code in reaction to this event, like starting the game or opening a menu. + +Other built-in signals can tell you when two objects collided, when a character +or monster entered a given area, and much more. You can also define new signals +tailored to your game. + +Summary +------- + +Nodes, scenes, the scene tree, and signals are four core concepts in Godot that +you will manipulate all the time. + +Nodes are your game's smallest building block. You combine them to create scenes +that you then combine and nest into the scene tree. You can then use signals to +make nodes react to events in other nodes or different scene tree branches. + +After this short breakdown, you probably have many questions. Bear with us as +you will get many answers throughout the getting started series. diff --git a/getting_started/introduction/learning_new_features.rst b/getting_started/introduction/learning_new_features.rst index 4ec0cae50..8fcc8260f 100644 --- a/getting_started/introduction/learning_new_features.rst +++ b/getting_started/introduction/learning_new_features.rst @@ -1,3 +1,7 @@ +.. Keep this page short and sweet! We want users to read it to the end, so they + know where to find information, how to get help, and how to maximize chances + of getting answers. + .. _doc_learning_new_features: Learning new features diff --git a/getting_started/step_by_step/img/editor_ui_intro_dock_filesystem.png b/getting_started/step_by_step/img/editor_ui_intro_dock_filesystem.png deleted file mode 100644 index bdf409469..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_dock_filesystem.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png b/getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png deleted file mode 100644 index 902f1a18b..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png b/getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png deleted file mode 100644 index 0005769fc..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_03_animation_player.png b/getting_started/step_by_step/img/editor_ui_intro_editor_03_animation_player.png deleted file mode 100644 index 60ef080ab..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_03_animation_player.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_04_2d_workspace.png b/getting_started/step_by_step/img/editor_ui_intro_editor_04_2d_workspace.png deleted file mode 100644 index 0deae9729..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_04_2d_workspace.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_05_3d_workspace.png b/getting_started/step_by_step/img/editor_ui_intro_editor_05_3d_workspace.png deleted file mode 100644 index 4a07c7b13..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_05_3d_workspace.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_06_3d_workspace.png b/getting_started/step_by_step/img/editor_ui_intro_editor_06_3d_workspace.png deleted file mode 100644 index 0410960b4..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_06_3d_workspace.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_06_script_workspace_expanded.png b/getting_started/step_by_step/img/editor_ui_intro_editor_06_script_workspace_expanded.png deleted file mode 100644 index ee051fbe4..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_06_script_workspace_expanded.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_interface_overview.png b/getting_started/step_by_step/img/editor_ui_intro_editor_interface_overview.png deleted file mode 100644 index c0e87fa79..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_editor_interface_overview.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_script_class_documentation.png b/getting_started/step_by_step/img/editor_ui_intro_script_class_documentation.png deleted file mode 100644 index 1592cde02..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_script_class_documentation.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_script_search_documentation.png b/getting_started/step_by_step/img/editor_ui_intro_script_search_documentation.png deleted file mode 100644 index b5d19a172..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_script_search_documentation.png and /dev/null differ diff --git a/getting_started/step_by_step/img/editor_ui_intro_script_search_help_window.png b/getting_started/step_by_step/img/editor_ui_intro_script_search_help_window.png deleted file mode 100644 index c4a7a5c16..000000000 Binary files a/getting_started/step_by_step/img/editor_ui_intro_script_search_help_window.png and /dev/null differ diff --git a/getting_started/step_by_step/index.rst b/getting_started/step_by_step/index.rst index 654083987..918c975b6 100644 --- a/getting_started/step_by_step/index.rst +++ b/getting_started/step_by_step/index.rst @@ -5,7 +5,6 @@ Step by step :maxdepth: 1 :name: toc-learn-step_by_step - intro_to_the_editor_interface scenes_and_nodes instancing instancing_continued diff --git a/getting_started/step_by_step/intro_to_the_editor_interface.rst b/getting_started/step_by_step/intro_to_the_editor_interface.rst deleted file mode 100644 index a3148bea0..000000000 --- a/getting_started/step_by_step/intro_to_the_editor_interface.rst +++ /dev/null @@ -1,184 +0,0 @@ -.. _doc_intro_to_the_editor_interface: - -Introduction to Godot's editor -============================== - -This tutorial will run you through Godot's interface. We're going to -look at the **Project Manager, docks, workspaces** and everything you -need to know to get started with the engine. - -You can `download Godot Engine here `_. - -Project manager ---------------- - -When you launch Godot, the first window you'll see is the Project -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. - -.. 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. - -.. image:: img/editor_ui_intro_project_manager_02.png - -From the **Templates** tab you can download open source project templates and -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`. - -.. 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. Here -you give it a name, choose an empty folder on your computer to save it to, -and choose a renderer. - -.. 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. - -.. 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. 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 open the project manager, you'll see your new project in the -list. Double click on it to open it in the editor. - -.. 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. - -.. image:: img/editor_ui_intro_project_manager_08.png - -When the folder path is correct, you'll see a green checkmark. - -.. 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 menus along the top of the interface and docks along the far extremes of -the interface on either side of the viewport. - -.. 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**. - -The **FileSystem dock** is where you'll manage your project files and assets. - -.. image:: img/editor_ui_intro_dock_filesystem.png - -The **Scene dock** lists the active scene's content and the **Inspector** -allows for the management of the properties of a scene's content. - -.. 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. - -.. 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. - -.. image:: img/editor_ui_intro_editor_03_animation_player.png - -The workspaces --------------- - -You can see four workspace buttons at the top: 2D, 3D, Script and -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 :kbd:`F1` -(or :kbd:`Alt + 1` on macOS) to access it. - -.. 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 :kbd:`F2` (or :kbd:`Alt + 2` on macOS) to access it. - -.. image:: img/editor_ui_intro_editor_05_3d_workspace.png - -Notice the perspective button under the toolbar, it opens a list of options -related to the 3D viewport. - -.. image:: img/editor_ui_intro_editor_06_3d_workspace.png - -.. note:: Read :ref:`doc_introduction_to_3d` for more detail about **3D workspace**. - -The **Script** workspace is a complete code editor with a debugger, rich -auto-completion, and built-in code reference. Press :kbd:`F3` (or :kbd:`Alt + 3` on macOS) -to access it, and :kbd:`Shift + F1` to search the reference. - -.. image:: img/editor_ui_intro_editor_06_script_workspace_expanded.png - -To search for information about a class, method, property, constant, or signal -in the engine while you are writing a script, press the "Search Help" button at -the top right of the Script workspace. - -.. image:: img/editor_ui_intro_script_search_documentation.png - -A new window will pop up. Search for the item that you want to find information -about. - -.. image:: img/editor_ui_intro_script_search_help_window.png - -Click on the item you are looking for and press open. The documentation for the -item will be displayed in the script workspace. - -.. image:: img/editor_ui_intro_script_class_documentation.png - -Finally, the **AssetLib** is a library of free and open source add-ons, scripts -and assets to use in your projects. - -Modify the interface --------------------- - -Godot's interface lives in a single window. You cannot split it across -multiple screens although you can work with an external code editor like -Atom or Visual Studio Code for instance. - -Move and resize docks -~~~~~~~~~~~~~~~~~~~~~ - -Click and drag on the edge of any dock or panel to resize it -horizontally or vertically. - -.. image:: img/editor_ui_intro_editor_07.png - -Click the three-dotted icon at the top of any dock to change its -location. - -.. 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. diff --git a/tutorials/editor/customizing_editor.rst b/tutorials/editor/customizing_editor.rst new file mode 100644 index 000000000..87e80c0d4 --- /dev/null +++ b/tutorials/editor/customizing_editor.rst @@ -0,0 +1,29 @@ +.. _doc_customizing_editor: + +Customizing the interface +========================= + +Godot's interface lives in a single window. You cannot split it across multiple +screens although you can work with an external code editor like Atom or Visual +Studio Code for instance. + +Moving and resizing docks +~~~~~~~~~~~~~~~~~~~~~~~~~ + +Click and drag on the edge of any dock or panel to resize it horizontally or +vertically. + +.. image:: img/editor_ui_intro_editor_07.png + +Click the three-dotted icon at the top of any dock to change its location. + +.. 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. + +.. This page lacks information about: + + - Useful editor settings or sections of the settings window that are + relevant to customizing the interface. + - Layouts diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_07.png b/tutorials/editor/img/editor_ui_intro_editor_07.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_editor_07.png rename to tutorials/editor/img/editor_ui_intro_editor_07.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_editor_08.png b/tutorials/editor/img/editor_ui_intro_editor_08.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_editor_08.png rename to tutorials/editor/img/editor_ui_intro_editor_08.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_01.png b/tutorials/editor/img/editor_ui_intro_project_manager_01.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_01.png rename to tutorials/editor/img/editor_ui_intro_project_manager_01.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_02.png b/tutorials/editor/img/editor_ui_intro_project_manager_02.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_02.png rename to tutorials/editor/img/editor_ui_intro_project_manager_02.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_03.png b/tutorials/editor/img/editor_ui_intro_project_manager_03.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_03.png rename to tutorials/editor/img/editor_ui_intro_project_manager_03.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_04.png b/tutorials/editor/img/editor_ui_intro_project_manager_04.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_04.png rename to tutorials/editor/img/editor_ui_intro_project_manager_04.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_05.png b/tutorials/editor/img/editor_ui_intro_project_manager_05.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_05.png rename to tutorials/editor/img/editor_ui_intro_project_manager_05.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_06.png b/tutorials/editor/img/editor_ui_intro_project_manager_06.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_06.png rename to tutorials/editor/img/editor_ui_intro_project_manager_06.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_08.png b/tutorials/editor/img/editor_ui_intro_project_manager_08.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_08.png rename to tutorials/editor/img/editor_ui_intro_project_manager_08.png diff --git a/getting_started/step_by_step/img/editor_ui_intro_project_manager_09.png b/tutorials/editor/img/editor_ui_intro_project_manager_09.png similarity index 100% rename from getting_started/step_by_step/img/editor_ui_intro_project_manager_09.png rename to tutorials/editor/img/editor_ui_intro_project_manager_09.png diff --git a/tutorials/editor/index.rst b/tutorials/editor/index.rst index c80b88a90..e251461a3 100644 --- a/tutorials/editor/index.rst +++ b/tutorials/editor/index.rst @@ -2,14 +2,34 @@ Editor manual ============= In this section, we cover the Godot editor in general, from its interface to -using it with the command line. We cover some specific editors' interface in -other sections where appropriate. For example, the :ref:`animation editor +using it with the command line. + +The editor's interface +---------------------- + +The following pages explain how to use the various windows, workspaces, and +docks that make up the Godot editor. We cover some specific editors' interface +in other sections where appropriate. For example, the :ref:`animation editor `. +.. toctree:: + :maxdepth: 1 + :name: toc-editor-interface + + project_manager + default_key_mapping + customizing_editor + +For developers +-------------- + +The articles below focus on features for developers, like calling Godot from the +command lines and using an external text editor such as Visual Studio Code or +Emacs. + .. toctree:: :maxdepth: 1 :name: toc-learn-editor command_line_tutorial external_editor - default_key_mapping diff --git a/tutorials/editor/project_manager.rst b/tutorials/editor/project_manager.rst new file mode 100644 index 000000000..ecadee0c2 --- /dev/null +++ b/tutorials/editor/project_manager.rst @@ -0,0 +1,75 @@ +.. _doc_project_manager: + +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. + +.. image:: img/editor_ui_intro_project_manager_01.png + +In the window's top-right corner, a drop-down menu allows you to change the +editor's language. + +.. image:: img/editor_ui_intro_project_manager_02.png + +Creating and importing projects +------------------------------- + +To create a new project: + +1. Click the ``New Project`` button on the right 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. + +.. image:: img/editor_ui_intro_project_manager_04.png + +.. seealso:: For more information about rendering backends, see + :ref:`doc_gles2_gles3_differences`. + +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. + +.. 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. You can also click the ``Create Folder`` button to create an empty +folder based on your project's name. + +Opening and importing projects +------------------------------ + +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. + +.. image:: img/editor_ui_intro_project_manager_06.png + +You can similarly import existing projects using the Import button. Locate the +folder that contains the project or the ``project.godot`` file to import and +edit it. + +.. image:: img/editor_ui_intro_project_manager_08.png + +When the folder path is correct, you'll see a green checkmark. + +.. image:: img/editor_ui_intro_project_manager_09.png + +Downloading demos and templates +------------------------------- + +From the **Templates** tab you can download open source project templates and +demos from the :ref:`Asset Library ` to help you get +started faster. + +To download a demo or template: + +1. Click on its title. +2. On the page that opens, click the download button. +3. Once it finished downloading, click install and choose where you want to save + the project. + +.. image:: img/editor_ui_intro_project_manager_03.png