Merge pull request #4302 from NathanLovato/content/getting-started

Rewrite of the getting started introduction

about/introduction.rst

@@ -50,8 +50,7 @@ if you need a quick writeup about Godot Engine.
     Freedom Conservancy <https://sfconservancy.org>`_ 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
-<toc-learn-step_by_step>` tutorial.
+documentation further, especially the :ref:`Getting Started <sec-learn>` series.
 
 About the documentation
 -----------------------

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 <toc-learn-editor>`.
+
+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

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

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 <toc-learn-scripting-gdscript>`, a
+Godot-specific and tightly integrated language with a lightweight syntax, or
+:ref:`C# <toc-learn-scripting-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 <toc-learn-scripting-visual_script>`.
+
+With the :ref:`GDNative <toc-tutorials-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
+             <doc_what_is_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/

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.

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

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

getting_started/step_by_step/intro_to_the_editor_interface.rst

@@ -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 <https://godotengine.org/download/>`_.
-
-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.

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

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
 <doc_introduction_animation>`.
 
+.. 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

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 <doc_what_is_assetlib>` 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