Relintai/pandemonium_engine_docs
1
0
Fork 0
mirror of https://github.com/Relintai/pandemonium_engine_docs.git synced 2025-01-21 15:07:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Markdown image syntax.

Browse Source
This commit is contained in:
Relintai 2023-01-12 20:16:00 +01:00
parent 8a5415960b
commit 5da30da277
196 changed files with 1299 additions and 1299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -49,7 +49,7 @@ Sphinx uses specific reST comments to do specific operations, like defining the
To add images, please put them in an `img/` folder next to the .rst file with a meaningful name and include them in your page with: To add images, please put them in an `img/` folder next to the .rst file with a meaningful name and include them in your page with:
```rst ```rst
.. image:: img/image_name.png ![](img/image_name.png)
``` ```
Similarly, you can include attachments (like assets as support material for a tutorial) by placing them into a `files/` folder next to the .rst file, and using this inline markup: Similarly, you can include attachments (like assets as support material for a tutorial) by placing them into a `files/` folder next to the .rst file, and using this inline markup:

8
about/release_policy.md
View File

@ -116,10 +116,10 @@ on GitHub.
| Godot 1.0 | December 2014 | |eol| No longer supported. | | Godot 1.0 | December 2014 | |eol| No longer supported. |
+-------------+----------------------+--------------------------------------------------------------------------+ +-------------+----------------------+--------------------------------------------------------------------------+
.. |supported| image:: img/supported.png .. |supported| image:: img/supported.png)
.. |partial| image:: img/partial.png .. |partial| image:: img/partial.png)
.. |eol| image:: img/eol.png .. |eol| image:: img/eol.png)
.. |unstable| image:: img/unstable.png .. |unstable| image:: img/unstable.png)
**Legend:** **Legend:**
|supported| Full support – |supported| Full support –

16
community/contributing/best_practices_for_engine_contributors.md
View File

@ -38,7 +38,7 @@ abstract data structures, creating nice user interfaces, or simply love
programming. Whatever the case may be, they come up with cool ideas, which may programming. Whatever the case may be, they come up with cool ideas, which may
or may not be solving any real problems. or may not be solving any real problems.
.. image:: img/best_practices1.png ![](img/best_practices1.png)
These are usually called *Solutions in search of a problem*. In an ideal world, These are usually called *Solutions in search of a problem*. In an ideal world,
they would not be harmful but, in reality, code takes time to write, takes space they would not be harmful but, in reality, code takes time to write, takes space
@ -52,7 +52,7 @@ software development.
This is a variation of the previous practice. Adding anything unnecessary is not This is a variation of the previous practice. Adding anything unnecessary is not
a good idea, but what constitutes what is necessary and what isn't? a good idea, but what constitutes what is necessary and what isn't?
.. image:: img/best_practices2.png ![](img/best_practices2.png)
The answer to this question is that the problem needs to *exist* before it can The answer to this question is that the problem needs to *exist* before it can
be actually solved. It must not be speculation or a belief. The user must be be actually solved. It must not be speculation or a belief. The user must be
@ -80,7 +80,7 @@ problem that exists under the sun*. As a game engine, Godot will solve problems
for you, so it helps you to make games better and faster, but it won't make the for you, so it helps you to make games better and faster, but it won't make the
*entire game* for you. A line must be drawn somewhere. *entire game* for you. A line must be drawn somewhere.
.. image:: img/best_practices3.png ![](img/best_practices3.png)
Whether a problem is worth solving is determined by the difficulty the user has Whether a problem is worth solving is determined by the difficulty the user has
to work around it. This difficulty can be expressed as: to work around it. This difficulty can be expressed as:
@ -112,7 +112,7 @@ Because of this, user proposed solutions don't always contemplate other use
cases that developers are often aware of, so they are often biased towards their cases that developers are often aware of, so they are often biased towards their
own requirements. own requirements.
.. image:: img/best_practices4.png ![](img/best_practices4.png)
For developers, the perspective is different. They may find the user's problem For developers, the perspective is different. They may find the user's problem
too unique to justify a solution (instead of a user workaround), or maybe they too unique to justify a solution (instead of a user workaround), or maybe they
@ -145,7 +145,7 @@ The situation will often take a turn for the worse when, in order to make this
solution appear even more fantastic and flexible, the pure speculation-based solution appear even more fantastic and flexible, the pure speculation-based
problems (as described in #2) also make their appearance on stage. problems (as described in #2) also make their appearance on stage.
.. image:: img/best_practices5.png ![](img/best_practices5.png)
The main problem is that, in reality, it rarely works this way. Most of the The main problem is that, in reality, it rarely works this way. Most of the
time, writing an individual solution to each problem results in code that time, writing an individual solution to each problem results in code that
@ -180,7 +180,7 @@ The question is then, how to design software that gives users what *we know they
need*, but that is flexible enough to allow them to do *what we don't know they need*, but that is flexible enough to allow them to do *what we don't know they
might need* in the future? might need* in the future?
.. image:: img/best_practices6.png ![](img/best_practices6.png)
The answer to this question is that, to ensure users still can do what they want The answer to this question is that, to ensure users still can do what they want
to do, we need to give them access to a *low level API* that they can use to to do, we need to give them access to a *low level API* that they can use to
@ -208,7 +208,7 @@ importance given how much code relies on it, and because it's key for new
contributors as a starting point to learning the codebase. contributors as a starting point to learning the codebase.
.. image:: img/best_practices7.png ![](img/best_practices7.png)
The common reasoning for wanting to do this is that it's usually less code to The common reasoning for wanting to do this is that it's usually less code to
@ -228,7 +228,7 @@ use a third party library to solve the problem.
As Godot requires to be shipped in a large amount of platforms, we can't As Godot requires to be shipped in a large amount of platforms, we can't
link libraries dynamically. Instead, we bundle them in our source tree. link libraries dynamically. Instead, we bundle them in our source tree.
.. image:: img/best_practices8.png ![](img/best_practices8.png)
As a result, we are very picky with what goes in, and we tend to prefer smaller As a result, we are very picky with what goes in, and we tend to prefer smaller
libraries (in fact, single header ones are our favorite). Only in cases where libraries (in fact, single header ones are our favorite). Only in cases where

2
community/contributing/contributing_to_the_documentation.md
View File

@ -165,7 +165,7 @@ a meaningful name and include them in your page with:
.. code:: rst .. code:: rst
.. image:: img/image_name.png ![](img/image_name.png)
Similarly, you can include attachments, like assets as support material for a Similarly, you can include attachments, like assets as support material for a
tutorial, by placing them into a `files/` folder next to the `.rst` file, and tutorial, by placing them into a `files/` folder next to the `.rst` file, and

2
community/contributing/docs_writing_guidelines.md
View File

@ -461,7 +461,7 @@ interface. They're used in the sources, in the documentation, and you
should always use them instead of synonyms, so the users know what should always use them instead of synonyms, so the users know what
you're talking about. you're talking about.
.. figure:: img/editor-vocabulary-overview.png .. figure:: img/editor-vocabulary-overview.png)
:alt: Overview of the interface and common vocabulary :alt: Overview of the interface and common vocabulary
Overview of the interface and common vocabulary Overview of the interface and common vocabulary

2
community/contributing/documentation_guidelines.md
View File

@ -120,7 +120,7 @@ Translating existing pages
You can help to translate the official Godot documentation on our `Hosted Weblate <https://hosted.weblate.org/engage/godot-engine/>`_. You can help to translate the official Godot documentation on our `Hosted Weblate <https://hosted.weblate.org/engage/godot-engine/>`_.
.. image:: https://hosted.weblate.org/widgets/godot-engine/-/godot-docs/287x66-white.png ![](https://hosted.weblate.org/widgets/godot-engine/-/godot-docs/287x66-white.png)
:alt: Translation state :alt: Translation state
:align: center :align: center
:target: https://hosted.weblate.org/engage/godot-engine/?utm_source=widget :target: https://hosted.weblate.org/engage/godot-engine/?utm_source=widget

26
community/contributing/editor_and_docs_localization.md
View File

@ -52,7 +52,7 @@ Once signed in, browse to the Godot resource which you want to contribute to (in
this page we will use the `editor translation <https://hosted.weblate.org/projects/godot-engine/godot/>`__ this page we will use the `editor translation <https://hosted.weblate.org/projects/godot-engine/godot/>`__
as an example) to find the list of all languages: as an example) to find the list of all languages:
.. image:: img/l10n_01_language_list.png ![](img/l10n_01_language_list.png)
.. seealso:: .. seealso::
@ -70,7 +70,7 @@ If your language is not listed, scroll to the bottom of the list of languages
and click the "Start new translation" button, and select the language you want and click the "Start new translation" button, and select the language you want
to translate to: to translate to:
.. image:: img/l10n_02_new_translation.png ![](img/l10n_02_new_translation.png)
.. important:: .. important::
@ -102,12 +102,12 @@ can be clicked and used to browse through the corresponding list. You can also
click the "Translate" button to get started on the list of strings needing click the "Translate" button to get started on the list of strings needing
action. action.
.. image:: img/l10n_03_translation_overview.png ![](img/l10n_03_translation_overview.png)
After selecting a list of clicking "Translate", you will see the main After selecting a list of clicking "Translate", you will see the main
translation interface where all the work happens: translation interface where all the work happens:
.. image:: img/l10n_04_translation_interface.png ![](img/l10n_04_translation_interface.png)
On that page, you have: On that page, you have:
@ -186,9 +186,9 @@ A handy tool to locate specific pages/classes is to use Weblate's advanced
search feature, and especially the "Location strings" query (which can also be search feature, and especially the "Location strings" query (which can also be
used with the `location:` token, e.g. `location:nodes_and_scenes.rst`): used with the `location:` token, e.g. `location:nodes_and_scenes.rst`):
.. image:: img/l10n_05_search_location.png ![](img/l10n_05_search_location.png)
.. image:: img/l10n_06_browse_by_location.png ![](img/l10n_06_browse_by_location.png)
.. note:: .. note::
@ -342,7 +342,7 @@ preferred PO editing application, such as `Poedit <https://poedit.net/>`__ or
To download the PO file locally, browse to the translation overview for your To download the PO file locally, browse to the translation overview for your
language, and select the first item in the "Files" menu: language, and select the first item in the "Files" menu:
.. image:: img/l10n_07_download_po_file.png ![](img/l10n_07_download_po_file.png)
Once you are done with a series of edits, use the "Upload translation" item in Once you are done with a series of edits, use the "Upload translation" item in
that same menu and select your file. Choose "Add as translation" for the file that same menu and select your file. Choose "Add as translation" for the file
@ -389,14 +389,14 @@ documentation. To do so, browse the relevant page in the docs, e.g.
`doc_intro_to_the_editor_interface`. Click the "Edit on GitHub" link in the `doc_intro_to_the_editor_interface`. Click the "Edit on GitHub" link in the
top right corner: top right corner:
.. image:: img/l10n_08_edit_on_github.png ![](img/l10n_08_edit_on_github.png)
On GitHub, click on the image you want to translate. If relevant, click on On GitHub, click on the image you want to translate. If relevant, click on
"Download" to download it locally and edit it with an image edition tool. "Download" to download it locally and edit it with an image edition tool.
Note the full path to the image as it will be needed further down (here Note the full path to the image as it will be needed further down (here
`getting_started/step_by_step/img/project_manager_first_open.png`). `getting_started/step_by_step/img/project_manager_first_open.png)`).
.. image:: img/l10n_09_path_to_image.png ![](img/l10n_09_path_to_image.png)
Create your localized version of the image, either by editing the English one, Create your localized version of the image, either by editing the English one,
or by taking a screenshot of the editor with your language, if it's an editor or by taking a screenshot of the editor with your language, if it's an editor
@ -404,13 +404,13 @@ screenshot. Some images may also have source files available in SVG format, so
you can browse the `img/` folder which contains them to check for that. you can browse the `img/` folder which contains them to check for that.
Name your localized image like the original one, but with the language code Name your localized image like the original one, but with the language code
added before the extension, e.g. `project_manager_first_open.png` would become added before the extension, e.g. `project_manager_first_open.png)` would become
`project_manager_first_open.fr.png` for the French localization. `project_manager_first_open.fr.png)` for the French localization.
Finally, on godot-docs-l10n_, recreate the same folder structure as for the Finally, on godot-docs-l10n_, recreate the same folder structure as for the
original image in the `images` subfolder original image in the `images` subfolder
(`GitHub <https://github.com/godotengine/godot-docs-l10n/tree/master/images>`_), (`GitHub <https://github.com/godotengine/godot-docs-l10n/tree/master/images>`_),
and place your translated image there. In our example, the end result should be and place your translated image there. In our example, the end result should be
`images/getting_started/step_by_step/img/project_manager_first_open.fr.png`. `images/getting_started/step_by_step/img/project_manager_first_open.fr.png)`.
Repeat this for other images and `make a Pull Request <doc_pr_workflow>`. Repeat this for other images and `make a Pull Request <doc_pr_workflow>`.

6
community/contributing/pr_workflow.md
View File

@ -76,12 +76,12 @@ repository on GitHub. To do so, you will need to have a GitHub account and to
be logged in. In the top right corner of the repository's GitHub page, you be logged in. In the top right corner of the repository's GitHub page, you
should see the "Fork" button as shown below: should see the "Fork" button as shown below:
.. image:: img/github_fork_button.png ![](img/github_fork_button.png)
Click it, and after a while you should be redirected to your own fork of the Click it, and after a while you should be redirected to your own fork of the
Godot repo, with your GitHub username as namespace: Godot repo, with your GitHub username as namespace:
.. image:: img/github_fork_url.png ![](img/github_fork_url.png)
You can then *clone* your fork, i.e. create a local copy of the online You can then *clone* your fork, i.e. create a local copy of the online
repository (in Git speak, the *origin remote*). If you haven't already, repository (in Git speak, the *origin remote*). If you haven't already,
@ -359,7 +359,7 @@ When you load your fork's branch on GitHub, you should see a line saying
commits behind, if your `master` branch was out of sync with the upstream commits behind, if your `master` branch was out of sync with the upstream
`master` branch). `master` branch).
.. image:: img/github_fork_make_pr.png ![](img/github_fork_make_pr.png)
On that line, there is a "Pull request" link. Clicking it will open a form On that line, there is a "Pull request" link. Clicking it will open a form
that will let you issue a pull request on the `godotengine/godot` upstream that will let you issue a pull request on the `godotengine/godot` upstream

14
community/contributing/testing_pull_requests.md
View File

@ -31,18 +31,18 @@ If you have a GitHub account
- Open the pull request page. Click the **Checks** tab near the top of the page: - Open the pull request page. Click the **Checks** tab near the top of the page:
.. image:: img/testing_pull_requests_access_checks.png ![](img/testing_pull_requests_access_checks.png)
- In the list of platforms that appears on the left, select your platform by clicking - In the list of platforms that appears on the left, select your platform by clicking
it then choose the type of build you need (editor or export template). it then choose the type of build you need (editor or export template).
If in doubt, select an editor build: If in doubt, select an editor build:
.. image:: img/testing_pull_requests_checks_platforms.png ![](img/testing_pull_requests_checks_platforms.png)
- Click the **Artifacts** dropdown on the right of the page then click the artifact's - Click the **Artifacts** dropdown on the right of the page then click the artifact's
name to download it: name to download it:
.. image:: img/testing_pull_requests_checks_artifacts.png ![](img/testing_pull_requests_checks_artifacts.png)
- Extract the ZIP archive then run the executable. - Extract the ZIP archive then run the executable.
Note that Windows and macOS binaries are not code signed. Note that Windows and macOS binaries are not code signed.
@ -59,7 +59,7 @@ to generate a universal download link.
- Open the pull request page. Click the *fork*'s branch name near the top of the page: - Open the pull request page. Click the *fork*'s branch name near the top of the page:
.. image:: img/testing_pull_requests_access_fork.png ![](img/testing_pull_requests_access_fork.png)
- Now that you are on the fork's branch page, click the `.github` folder at the top of the file list. - Now that you are on the fork's branch page, click the `.github` folder at the top of the file list.
Then, click on the `workflows` folder (whicb is inside the `.github` folder). Then, click on the `workflows` folder (whicb is inside the `.github` folder).
@ -72,7 +72,7 @@ to generate a universal download link.
If the the format of the URL you pasted is correct, you should be presented If the the format of the URL you pasted is correct, you should be presented
with a page like this: with a page like this:
.. image:: img/testing_pull_requests_nightly_link.png ![](img/testing_pull_requests_nightly_link.png)
- Click the URL of the artifact you wish to download. - Click the URL of the artifact you wish to download.
@ -93,12 +93,12 @@ by Godot's GitHub Actions setup.
- Open the pull request page. Click the *fork*'s branch name near the top of the page: - Open the pull request page. Click the *fork*'s branch name near the top of the page:
.. image:: img/testing_pull_requests_access_fork.png ![](img/testing_pull_requests_access_fork.png)
- Now that you are on the fork's branch page, click the green **Code** button on the right of the page - Now that you are on the fork's branch page, click the green **Code** button on the right of the page
then choose **Download ZIP** in the dropdown: then choose **Download ZIP** in the dropdown:
.. image:: img/testing_pull_requests_fork_zip.png ![](img/testing_pull_requests_fork_zip.png)
- Extract the ZIP archive and follow the `compiling <toc-devel-compiling>` instructions - Extract the ZIP archive and follow the `compiling <toc-devel-compiling>` instructions
for your operating system. for your operating system.

2
development/compiling/compiling_for_android.md
View File

@ -193,7 +193,7 @@ However, if you are writing your custom modules or custom C++ code, you
might instead want to configure your APKs as custom export templates might instead want to configure your APKs as custom export templates
here: here:
.. image:: img/andtemplates.png ![](img/andtemplates.png)
You don't even need to copy them, you can just reference the resulting You don't even need to copy them, you can just reference the resulting
file in the `bin\` directory of your Godot source folder, so that the file in the `bin\` directory of your Godot source folder, so that the

2
development/compiling/compiling_for_windows.md
View File

@ -290,7 +290,7 @@ However, if you are using custom modules or custom engine code, you
may instead want to configure your binaries as custom export templates may instead want to configure your binaries as custom export templates
here: here:
.. image:: img/wintemplates.png ![](img/wintemplates.png)
You don't need to copy them in this case, just reference the resulting You don't need to copy them in this case, just reference the resulting
files in the `bin\` directory of your Godot source folder, so the next files in the `bin\` directory of your Godot source folder, so the next

2
development/compiling/compiling_for_x11.md
View File

@ -210,7 +210,7 @@ However, if you are writing your custom modules or custom C++ code, you
might instead want to configure your binaries as custom export templates might instead want to configure your binaries as custom export templates
here: here:
.. image:: img/lintemplates.png ![](img/lintemplates.png)
You don't even need to copy them, you can just reference the resulting You don't even need to copy them, you can just reference the resulting
files in the `bin/` directory of your Godot source folder, so the next files in the `bin/` directory of your Godot source folder, so the next

2
development/compiling/compiling_with_script_encryption_key.md
View File

@ -65,7 +65,7 @@ bat Windows (PowerShell)
4. Set the encryption key in the **Script** tab of the export preset: 4. Set the encryption key in the **Script** tab of the export preset:
.. image:: img/script_encryption_key.png ![](img/script_encryption_key.png)
5. Export the project. The game should run with encrypted scripts now. 5. Export the project. The game should run with encrypted scripts now.

2
development/cpp/configuring_an_ide/android_studio.md
View File

@ -14,7 +14,7 @@ Importing the project
- From the Android Studio's welcome window select **Open an existing - From the Android Studio's welcome window select **Open an existing
Android Studio project**. Android Studio project**.
.. figure:: img/android_studio_setup_project_1.png .. figure:: img/android_studio_setup_project_1.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

10
development/cpp/configuring_an_ide/clion.md
View File

@ -21,20 +21,20 @@ which can also be used by CLion.
`CMakeLists.txt` file is located there) and select it (but *not* the `CMakeLists.txt` file is located there) and select it (but *not* the
`CMakeLists.txt` file itself), then click **OK**. `CMakeLists.txt` file itself), then click **OK**.
.. figure:: img/clion_1_open.png .. figure:: img/clion_1_open.png)
:align: center :align: center
The folder containing the `CMakeLists.txt` file. The folder containing the `CMakeLists.txt` file.
- If this popup window appears, select **This Window** to open the project: - If this popup window appears, select **This Window** to open the project:
.. figure:: img/clion_2_this_window.png .. figure:: img/clion_2_this_window.png)
:align: center :align: center
- Choose **Tools > CMake > Change Project Root** from the top menu and select - Choose **Tools > CMake > Change Project Root** from the top menu and select
the Godot root folder. the Godot root folder.
.. figure:: img/clion_3_change_project_root.png .. figure:: img/clion_3_change_project_root.png)
:align: center :align: center
- You should be now be able to see all the project files. Autocomplete should - You should be now be able to see all the project files. Autocomplete should
@ -55,12 +55,12 @@ You will first need to `compile godot yourself <https://docs.godotengine.org/en/
- In CLion, go to **Run > Attach to Process...** - In CLion, go to **Run > Attach to Process...**
.. figure:: img/clion_4_select_attach_to_process.png .. figure:: img/clion_4_select_attach_to_process.png)
:align: center :align: center
- Find and Select godot in the list (or type the binary name/Process ID) - Find and Select godot in the list (or type the binary name/Process ID)
.. figure:: img/clion_5_select_godot_process.png .. figure:: img/clion_5_select_godot_process.png)
:align: center :align: center
You can now use the debugging tools from CLion. You can now use the debugging tools from CLion.

32
development/cpp/configuring_an_ide/code_blocks.md
View File

@ -10,19 +10,19 @@ Creating a new project
From Code::Blocks' main screen, click **Create a new project** or select **File > New > Project...**. From Code::Blocks' main screen, click **Create a new project** or select **File > New > Project...**.
.. figure:: img/code_blocks_file_new_project.png .. figure:: img/code_blocks_file_new_project.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
In the **New from template** window, from **Projects**, select **Empty project**, and click **Go**. In the **New from template** window, from **Projects**, select **Empty project**, and click **Go**.
.. figure:: img/code_blocks_new_empty_project.png .. figure:: img/code_blocks_new_empty_project.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
Click Next, to pass the welcome to the new empty project wizard. Click Next, to pass the welcome to the new empty project wizard.
.. figure:: img/code_blocks_wizard_welcome.png .. figure:: img/code_blocks_wizard_welcome.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -30,13 +30,13 @@ The project file should be created in the root of the cloned project folder. To
Second, ensure that the **Folder to create project in** is the folder you ran the Git clone command from, not the `godot` project folder. Confirm that the **Resulting filename** field will create the project file in the root of the cloned project folder. Second, ensure that the **Folder to create project in** is the folder you ran the Git clone command from, not the `godot` project folder. Confirm that the **Resulting filename** field will create the project file in the root of the cloned project folder.
.. figure:: img/code_blocks_project_title_and_location.png .. figure:: img/code_blocks_project_title_and_location.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
The compiler and configuration settings are managed through **SCons** and will be configured later. However, it's worth deselecting the **Create "Release" configuration** option; so only a single build target is created before clicking **Finish**. The compiler and configuration settings are managed through **SCons** and will be configured later. However, it's worth deselecting the **Create "Release" configuration** option; so only a single build target is created before clicking **Finish**.
.. figure:: img/code_blocks_compiler_and_configuration.png .. figure:: img/code_blocks_compiler_and_configuration.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -45,19 +45,19 @@ Configuring the build
The first step is to change the project properties. Right-click on the new project and select **Properties...**. The first step is to change the project properties. Right-click on the new project and select **Properties...**.
.. figure:: img/code_blocks_open_properties.png .. figure:: img/code_blocks_open_properties.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
Check the **This is a custom Makefile** property. Click OK to save the changes. Check the **This is a custom Makefile** property. Click OK to save the changes.
.. figure:: img/code_blocks_project_properties.png .. figure:: img/code_blocks_project_properties.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
The next step is to change the build options. Right-click on the new project and select **Build Options...**. The next step is to change the build options. Right-click on the new project and select **Build Options...**.
.. figure:: img/code_blocks_open_build_options.png .. figure:: img/code_blocks_open_build_options.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -65,17 +65,17 @@ Select the **"Make" commands** tab and remove all the existing commands for all
If you're using Windows, all the commands need to be preceded with `cmd /c` to iniitalize the command interpreter. If you're using Windows, all the commands need to be preceded with `cmd /c` to iniitalize the command interpreter.
.. figure:: img/code_blocks_scons_minimum.png .. figure:: img/code_blocks_scons_minimum.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
.. figure:: img/code_blocks_scons_clean.png .. figure:: img/code_blocks_scons_clean.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
Windows example: Windows example:
.. figure:: img/code_blocks_scons_windows.png .. figure:: img/code_blocks_scons_windows.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -88,7 +88,7 @@ Once **SCons** has successfully built the desired target, reopen the project **P
Deselect the **Auto-generate filename prefix** and **Auto-generate filename extension** options. Deselect the **Auto-generate filename prefix** and **Auto-generate filename extension** options.
.. figure:: img/code_blocks_build_targets.png .. figure:: img/code_blocks_build_targets.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -101,13 +101,13 @@ Adding files to the project
To add all the Godot code files to the project, right-click on the new project and select **Add files recursively...**. To add all the Godot code files to the project, right-click on the new project and select **Add files recursively...**.
.. figure:: img/code_blocks_add_files_recursively.png .. figure:: img/code_blocks_add_files_recursively.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
It should automatically select the project folder; so simply click **Open**. By default, all code files are included, so simply click **OK**. It should automatically select the project folder; so simply click **Open**. By default, all code files are included, so simply click **OK**.
.. figure:: img/code_blocks_select_files.png .. figure:: img/code_blocks_select_files.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -116,13 +116,13 @@ Code style configuration
Before editing any files, remember that all code needs to comply with the `doc_code_style_guidelines`. One important difference with Godot is the use of tabs for indents. Therefore, the key default editor setting that needs to be changed in Code::Blocks is to enable tabs for indents. This setting can be found by selecting **Settings > Editor**. Before editing any files, remember that all code needs to comply with the `doc_code_style_guidelines`. One important difference with Godot is the use of tabs for indents. Therefore, the key default editor setting that needs to be changed in Code::Blocks is to enable tabs for indents. This setting can be found by selecting **Settings > Editor**.
.. figure:: img/code_blocks_update_editor_settings.png .. figure:: img/code_blocks_update_editor_settings.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
Under **General Settings**, on the **Editor Settings** tab, under **Tab Options** check **Use TAB character**. Under **General Settings**, on the **Editor Settings** tab, under **Tab Options** check **Use TAB character**.
.. figure:: img/code_block_use_tab_character.png .. figure:: img/code_block_use_tab_character.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

14
development/cpp/configuring_an_ide/kdevelop.md
View File

@ -10,7 +10,7 @@ Importing the project
- From the KDevelop's main screen select **Open Project**. - From the KDevelop's main screen select **Open Project**.
.. figure:: img/kdevelop_newproject.png .. figure:: img/kdevelop_newproject.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -19,14 +19,14 @@ Importing the project
- Navigate to the Godot root folder and select it. - Navigate to the Godot root folder and select it.
- On the next screen, choose **Custom Build System** for the **Project Manager**. - On the next screen, choose **Custom Build System** for the **Project Manager**.
.. figure:: img/kdevelop_custombuild.png .. figure:: img/kdevelop_custombuild.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- After the project has been imported, open the project configuration by right-clicking - After the project has been imported, open the project configuration by right-clicking
on it in the **Projects** panel and selecting **Open Configuration..** option. on it in the **Projects** panel and selecting **Open Configuration..** option.
.. figure:: img/kdevelop_openconfig.png .. figure:: img/kdevelop_openconfig.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -42,7 +42,7 @@ Importing the project
platform/<your_platform>/ // Replace <your_platform> with a folder platform/<your_platform>/ // Replace <your_platform> with a folder
corresponding to your current platform corresponding to your current platform
.. figure:: img/kdevelop_addincludes.png .. figure:: img/kdevelop_addincludes.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -59,7 +59,7 @@ Importing the project
| Arguments | See `doc_introduction_to_the_buildsystem` for a full list of arguments. | | Arguments | See `doc_introduction_to_the_buildsystem` for a full list of arguments. |
+-----------------+------------------------------------------------------------------------------+ +-----------------+------------------------------------------------------------------------------+
.. figure:: img/kdevelop_buildconfig.png .. figure:: img/kdevelop_buildconfig.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -70,7 +70,7 @@ Debugging the project
- Select **Run > Configure Launches...** from the top menu. - Select **Run > Configure Launches...** from the top menu.
.. figure:: img/kdevelop_configlaunches.png .. figure:: img/kdevelop_configlaunches.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -79,7 +79,7 @@ Debugging the project
the `<Godot root directory>/bin` folder. The name depends on your build configuration, the `<Godot root directory>/bin` folder. The name depends on your build configuration,
e.g. `godot.x11.tools.64` for 64-bit X11 platform with `tools` enabled. e.g. `godot.x11.tools.64` for 64-bit X11 platform with `tools` enabled.
.. figure:: img/kdevelop_configlaunches2.png .. figure:: img/kdevelop_configlaunches2.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

20
development/cpp/configuring_an_ide/qt_creator.md
View File

@ -10,13 +10,13 @@ Importing the project
- From the Qt Creator's main screen select **New Project > Import Project > Import Existing Project**. - From the Qt Creator's main screen select **New Project > Import Project > Import Existing Project**.
.. figure:: img/qtcreator-new-project.png .. figure:: img/qtcreator-new-project.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- Under **Location** select the Godot root folder. - Under **Location** select the Godot root folder.
.. figure:: img/qtcreator-set-project-path.png .. figure:: img/qtcreator-set-project-path.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -25,14 +25,14 @@ Importing the project
`*.glsl` for shader files, `*.py` for buildsystem files, `*.glsl` for shader files, `*.py` for buildsystem files,
`*.java` for Android platform development, `*.mm` for macOS platform development. `*.java` for Android platform development, `*.mm` for macOS platform development.
.. figure:: img/qtcreator-apply-import-filter.png .. figure:: img/qtcreator-apply-import-filter.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
.. note:: You can change this configuration later by right-clicking on your project .. note:: You can change this configuration later by right-clicking on your project
and selecting the **Edit Files...** option. and selecting the **Edit Files...** option.
.. figure:: img/qtcreator-edit-files-menu.png .. figure:: img/qtcreator-edit-files-menu.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -41,14 +41,14 @@ Importing the project
- Open the `project_name.includes` file and add a line containing `.` to it - Open the `project_name.includes` file and add a line containing `.` to it
to correctly enable the code completion. to correctly enable the code completion.
.. figure:: img/qtcreator-project-name-includes.png .. figure:: img/qtcreator-project-name-includes.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- From the left-side menu select **Projects** and open the **Build** tab. - From the left-side menu select **Projects** and open the **Build** tab.
- Delete the predefined `make` build step. - Delete the predefined `make` build step.
.. figure:: img/qtcreator-projects-build.png .. figure:: img/qtcreator-projects-build.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -61,7 +61,7 @@ Importing the project
| Arguments | See `doc_introduction_to_the_buildsystem` for a full list of arguments. | | Arguments | See `doc_introduction_to_the_buildsystem` for a full list of arguments. |
+-----------+------------------------------------------------------------------------------+ +-----------+------------------------------------------------------------------------------+
.. figure:: img/qtcreator-set-scons-command.png .. figure:: img/qtcreator-set-scons-command.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -80,7 +80,7 @@ Debugging the project
- If you want to run a specific project, specify its root folder under **Working directory**. - If you want to run a specific project, specify its root folder under **Working directory**.
- If you want to run the editor, add `-e` to the **Command line arguments** field. - If you want to run the editor, add `-e` to the **Command line arguments** field.
.. figure:: img/qtcreator-run-command.png .. figure:: img/qtcreator-run-command.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -95,7 +95,7 @@ and the IDE should help them follow it. By default, Qt Creator uses spaces
for indentation which doesn't match the Godot code style guidelines. You can for indentation which doesn't match the Godot code style guidelines. You can
change this behavior by changing the **Code Style** in **Tools > Options > C++**. change this behavior by changing the **Code Style** in **Tools > Options > C++**.
.. figure:: img/qtcreator-options-cpp.png .. figure:: img/qtcreator-options-cpp.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -103,7 +103,7 @@ Click on **Edit** to change the current settings, then click on
**Copy Built-in Code Style** button to set a new code style. Set a name for it **Copy Built-in Code Style** button to set a new code style. Set a name for it
(e.g. Godot) and change the Tab policy to be **Tabs Only**. (e.g. Godot) and change the Tab policy to be **Tabs Only**.
.. figure:: img/qtcreator-edit-codestyle.png .. figure:: img/qtcreator-edit-codestyle.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

8
development/cpp/configuring_an_ide/visual_studio.md
View File

@ -23,7 +23,7 @@ with the solution file, it can be generated using SCons.
.. warning:: Visual Studio must be configured with the C++ package. It can be selected .. warning:: Visual Studio must be configured with the C++ package. It can be selected
in the intaller: in the intaller:
.. figure:: img/vs_1_install_cpp_package.png .. figure:: img/vs_1_install_cpp_package.png)
:align: center :align: center
Debugging the project Debugging the project
@ -41,7 +41,7 @@ project manager opens a project, the initial process is terminated and the debug
- To configure the launch options to use with the debugger use **Project > Properties** - To configure the launch options to use with the debugger use **Project > Properties**
from the top menu: from the top menu:
.. figure:: img/vs_2_project_properties.png .. figure:: img/vs_2_project_properties.png)
:align: center :align: center
- Open the **Debugging** section and under **Command Arguments** add two new arguments: - Open the **Debugging** section and under **Command Arguments** add two new arguments:
@ -49,7 +49,7 @@ project manager opens a project, the initial process is terminated and the debug
tells the executable to open the specified project (must be provided as an *absolute* path tells the executable to open the specified project (must be provided as an *absolute* path
to the project root, not the `project.godot` file). to the project root, not the `project.godot` file).
.. figure:: img/vs_3_debug_command_line.png .. figure:: img/vs_3_debug_command_line.png)
:align: center :align: center
To learn more about command line arguments, refer to the To learn more about command line arguments, refer to the
@ -61,7 +61,7 @@ process using **Debug > Attach to Process...** menu.
To check that everything is working, put a breakpoint in `main.cpp` and press :kbd:`F5` to To check that everything is working, put a breakpoint in `main.cpp` and press :kbd:`F5` to
start debugging. start debugging.
.. figure:: img/vs_4_debugging_main.png .. figure:: img/vs_4_debugging_main.png)
:align: center :align: center
If you run into any issues, ask for help in one of If you run into any issues, ask for help in one of

12
development/cpp/configuring_an_ide/visual_studio_code.md
View File

@ -18,17 +18,17 @@ Importing the project
**File > Open Folder...**. **File > Open Folder...**.
- Press :kbd:`Ctrl + Shift + P` to open the command prompt window and enter *Configure Task*. - Press :kbd:`Ctrl + Shift + P` to open the command prompt window and enter *Configure Task*.
.. figure:: img/vscode_configure_task.png .. figure:: img/vscode_configure_task.png)
:align: center :align: center
- Select the **Create tasks.json file from template** option. - Select the **Create tasks.json file from template** option.
.. figure:: img/vscode_create_tasksjson.png .. figure:: img/vscode_create_tasksjson.png)
:align: center :align: center
- Then select **Others**. - Then select **Others**.
.. figure:: img/vscode_create_tasksjson_others.png .. figure:: img/vscode_create_tasksjson_others.png)
:align: center :align: center
- Within the `tasks.json` file find the `"tasks"` array and add a new section to it: - Within the `tasks.json` file find the `"tasks"` array and add a new section to it:
@ -66,7 +66,7 @@ js Windows
} }
``` ```
.. figure:: img/vscode_3_tasks.json.png .. figure:: img/vscode_3_tasks.json.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -83,7 +83,7 @@ To run and debug the project you need to create a new configuration in the `laun
- Press :kbd:`Ctrl + Shift + D` to open the Run panel. - Press :kbd:`Ctrl + Shift + D` to open the Run panel.
- If `launch.json` file is missing you will be prompted to create a new one. - If `launch.json` file is missing you will be prompted to create a new one.
.. figure:: img/vscode_1_create_launch.json.png .. figure:: img/vscode_1_create_launch.json.png)
:align: center :align: center
- Select **C++ (GDB/LLDB)**. There may be another platform specific option here. If selected, - Select **C++ (GDB/LLDB)**. There may be another platform specific option here. If selected,
@ -159,7 +159,7 @@ js Windows
} }
``` ```
.. figure:: img/vscode_2_launch.json.png .. figure:: img/vscode_2_launch.json.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

16
development/cpp/configuring_an_ide/xcode.md
View File

@ -11,7 +11,7 @@ Importing the project
- From Xcode's main screen create a new project using the **Other > External Build System** template. - From Xcode's main screen create a new project using the **Other > External Build System** template.
.. figure:: img/xcode_1_create_external_build_project.png .. figure:: img/xcode_1_create_external_build_project.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -26,20 +26,20 @@ Importing the project
| Directory | A full path to the Godot root folder | | Directory | A full path to the Godot root folder |
+------------+------------------------------------------------------------------------------+ +------------+------------------------------------------------------------------------------+
.. figure:: img/xcode_2_configure_scons.png .. figure:: img/xcode_2_configure_scons.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- Add a Command Line Tool target which will be used for indexing the project by - Add a Command Line Tool target which will be used for indexing the project by
choosing **File > New > Target...**. choosing **File > New > Target...**.
.. figure:: img/xcode_3_add_new_target.png .. figure:: img/xcode_3_add_new_target.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- Select **OS X > Application > Command Line Tool**. - Select **OS X > Application > Command Line Tool**.
.. figure:: img/xcode_4_select_command_line_target.png .. figure:: img/xcode_4_select_command_line_target.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -53,14 +53,14 @@ Importing the project
- Add the Godot source to the project by dragging and dropping it into the project file browser. - Add the Godot source to the project by dragging and dropping it into the project file browser.
- Uncheck **Create external build system project**. - Uncheck **Create external build system project**.
.. figure:: img/xcode_5_after_add_godot_source_to_project.png .. figure:: img/xcode_5_after_add_godot_source_to_project.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
- Next select **Create groups** for the **Added folders** option and check *only* - Next select **Create groups** for the **Added folders** option and check *only*
your command line indexing target in the **Add to targets** section. your command line indexing target in the **Add to targets** section.
.. figure:: img/xcode_6_after_add_godot_source_to_project_2.png .. figure:: img/xcode_6_after_add_godot_source_to_project_2.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -84,7 +84,7 @@ To enable debugging support you need to edit the external build target's build a
ln -f ${PROJECT_DIR}/godot/bin/godot.osx.tools.64 ${PROJECT_DIR}/godot/bin/godot ln -f ${PROJECT_DIR}/godot/bin/godot.osx.tools.64 ${PROJECT_DIR}/godot/bin/godot
.. figure:: img/xcode_7_setup_build_post_action.png .. figure:: img/xcode_7_setup_build_post_action.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
@ -92,7 +92,7 @@ To enable debugging support you need to edit the external build target's build a
- Open the scheme editor again and select **Run**. - Open the scheme editor again and select **Run**.
.. figure:: img/xcode_8_setup_run_scheme.png .. figure:: img/xcode_8_setup_run_scheme.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center

10
development/cpp/inheritance_class_tree.md
View File

@ -4,26 +4,26 @@ Inheritance class tree
Object Object
------ ------
.. image:: img/Object.png ![](img/Object.png)
Reference Reference
--------- ---------
.. image:: img/Reference.png ![](img/Reference.png)
Control Control
------- -------
.. image:: img/Control.png ![](img/Control.png)
Node2D Node2D
------ ------
.. image:: img/Node2D.png ![](img/Node2D.png)
Spatial Spatial
------- -------
.. image:: img/Spatial.png ![](img/Spatial.png)
Source files: :download:`tree.zip <files/class_tree.zip>`. Source files: :download:`tree.zip <files/class_tree.zip>`.

2
development/cpp/introduction_to_godot_development.md
View File

@ -14,7 +14,7 @@ The following diagram describes the architecture used by Godot, from the
core components down to the abstracted drivers, via the scene core components down to the abstracted drivers, via the scene
structure and the servers. structure and the servers.
.. image:: img/architecture_diagram.jpg ![](img/architecture_diagram.jpg
Debugging the editor with gdb Debugging the editor with gdb
----------------------------- -----------------------------

20
development/cpp/using_cpp_profilers.md
View File

@ -72,7 +72,7 @@ VerySleepy
will spawn a child process for every project edited or run. will spawn a child process for every project edited or run.
- Open VerySleepy and select the Godot executable in the list of processes on the left: - Open VerySleepy and select the Godot executable in the list of processes on the left:
.. image:: img/cpp_profiler_verysleepy_select_process.png ![](img/cpp_profiler_verysleepy_select_process.png)
- Click the **Profile All** button on the right to start profiling. - Click the **Profile All** button on the right to start profiling.
- Perform the actions you wish to profile in the editor or project. When you're done, click **Stop** (*not* Abort). - Perform the actions you wish to profile in the editor or project. When you're done, click **Stop** (*not* Abort).
@ -83,14 +83,14 @@ VerySleepy
**Filter Module to <Godot executable name>** in the dropdown that appears. **Filter Module to <Godot executable name>** in the dropdown that appears.
- Your results window should now look something like this: - Your results window should now look something like this:
.. image:: img/cpp_profiler_verysleepy_results_filtered.png ![](img/cpp_profiler_verysleepy_results_filtered.png)
HotSpot HotSpot
^^^^^^^ ^^^^^^^
- Open HotSpot. Click **Record Data**: - Open HotSpot. Click **Record Data**:
.. image:: img/cpp_profiler_hotspot_welcome.png ![](img/cpp_profiler_hotspot_welcome.png)
- In the next window, specify the path to the Godot binary that includes debug symbols. - In the next window, specify the path to the Godot binary that includes debug symbols.
- Specify command line arguments to run a specific project, with or without the editor. - Specify command line arguments to run a specific project, with or without the editor.
@ -102,7 +102,7 @@ HotSpot
Otherwise, some events may be missing in the capture. Otherwise, some events may be missing in the capture.
Your settings should now look something like this: Your settings should now look something like this:
.. image:: img/cpp_profiler_hotspot_record.png ![](img/cpp_profiler_hotspot_record.png)
- Click **Start Recording** and perform the actions you wish to profile in the editor/project. - Click **Start Recording** and perform the actions you wish to profile in the editor/project.
- Quit the editor/project normally or use the **Stop Profiling** button in HotSpot - Quit the editor/project normally or use the **Stop Profiling** button in HotSpot
@ -110,7 +110,7 @@ HotSpot
if you're not interested in the engine's quit procedure. if you're not interested in the engine's quit procedure.
- Click **View Results** and wait for the profiling visualization to be generated: - Click **View Results** and wait for the profiling visualization to be generated:
.. image:: img/cpp_profiler_hotspot_view_results.png ![](img/cpp_profiler_hotspot_view_results.png)
- Use the tabs at the top to navigate between the different views. These views - Use the tabs at the top to navigate between the different views. These views
show the same data, but in different ways. The **Flame Graph** tab is a good show the same data, but in different ways. The **Flame Graph** tab is a good
@ -121,7 +121,7 @@ HotSpot
started by the engine among with the CPU utilization for each thread. started by the engine among with the CPU utilization for each thread.
This lets you see threads that can be a bottleneck at a given point in time. This lets you see threads that can be a bottleneck at a given point in time.
.. image:: img/cpp_profiler_hotspot_flame_graph.png ![](img/cpp_profiler_hotspot_flame_graph.png)
.. note:: .. note::
@ -138,20 +138,20 @@ Xcode Instruments
- Open Xcode. Select **Open Developer Tool** - **Instruments** from the **Xcode** app menu: - Open Xcode. Select **Open Developer Tool** - **Instruments** from the **Xcode** app menu:
- Double-click on **Time Profiler** in the **Instruments** window: - Double-click on **Time Profiler** in the **Instruments** window:
.. image:: img/cpp_profiler_xcode_menu.png ![](img/cpp_profiler_xcode_menu.png)
- In the Time Profiler window, click on the **Target** menu, select **Choose target...** - In the Time Profiler window, click on the **Target** menu, select **Choose target...**
and specify the path to the Godot binary, command line arguments and environment variables and specify the path to the Godot binary, command line arguments and environment variables
in the next window. in the next window.
.. image:: img/cpp_profiler_time_profiler.png ![](img/cpp_profiler_time_profiler.png)
- You can also attach the Time Profiler to a running process by selecting it from the **Target** - You can also attach the Time Profiler to a running process by selecting it from the **Target**
menu. menu.
- Click the **Start an immediate mode recording** button to start profiling. - Click the **Start an immediate mode recording** button to start profiling.
.. image:: img/cpp_profiler_time_profiler_record.png ![](img/cpp_profiler_time_profiler_record.png)
- Perform the actions you wish to profile in the editor or project. When you're done, - Perform the actions you wish to profile in the editor or project. When you're done,
click the **Stop** button. click the **Stop** button.
@ -163,4 +163,4 @@ Xcode Instruments
remove external modules. remove external modules.
- You can use the timeline at the top of the window to display details for the specific time period. - You can use the timeline at the top of the window to display details for the specific time period.
.. image:: img/cpp_profiler_time_profiler_result.png ![](img/cpp_profiler_time_profiler_result.png)

10
getting_started/first_2d_game/01.project_setup.md
View File

@ -7,7 +7,7 @@ In this short first part, we'll set up and organize the project.
Launch Godot and create a new project. Launch Godot and create a new project.
.. image:: img/new-project-button.png ![](img/new-project-button.png)
GDScript GDScript
@ -20,20 +20,20 @@ GDScript
Your project folder should look like this. Your project folder should look like this.
.. image:: img/folder-content.png ![](img/folder-content.png)
This game is designed for portrait mode, so we need to adjust the size of the This game is designed for portrait mode, so we need to adjust the size of the
game window. Click on *Project -> Project Settings* to open the project settings game window. Click on *Project -> Project Settings* to open the project settings
window and in the left column, open the *Display -> Window* tab. There, set window and in the left column, open the *Display -> Window* tab. There, set
"Width" to `480` and "Height" to `720`. "Width" to `480` and "Height" to `720`.
.. image:: img/setting-project-width-and-height.png ![](img/setting-project-width-and-height.png)
Also, scroll down to the bottom of the section and, under the "Stretch" options, Also, scroll down to the bottom of the section and, under the "Stretch" options,
set `Mode` to "2d" and `Aspect` to "keep". This ensures that the game scales set `Mode` to "2d" and `Aspect` to "keep". This ensures that the game scales
consistently on different sized screens. consistently on different sized screens.
.. image:: img/setting-stretch-mode.png ![](img/setting-stretch-mode.png)
Organizing the project Organizing the project
~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~
@ -46,6 +46,6 @@ scenes and their scripts, but for this relatively small game, you can save your
scenes and scripts in the project's root folder, identified by `res://`. You scenes and scripts in the project's root folder, identified by `res://`. You
can see your project folders in the FileSystem dock in the lower left corner: can see your project folders in the FileSystem dock in the lower left corner:
.. image:: img/filesystem_dock.png ![](img/filesystem_dock.png)
With the project in place, we're ready to design the player scene in the next lesson. With the project in place, we're ready to design the player scene in the next lesson.

14
getting_started/first_2d_game/02.player_scene.md
View File

@ -18,7 +18,7 @@ rule, a scene's root node should reflect the object's desired functionality -
what the object *is*. Click the "Other Node" button and add an `Area2D what the object *is*. Click the "Other Node" button and add an `Area2D
<class_Area2D>` node to the scene. <class_Area2D>` node to the scene.
.. image:: img/add_node.png ![](img/add_node.png)
Godot will display a warning icon next to the node in the scene tree. You can Godot will display a warning icon next to the node in the scene tree. You can
ignore it for now. We will address it later. ignore it for now. We will address it later.
@ -33,7 +33,7 @@ accidentally move or resize them by clicking on them. Select the node and click
the icon to the right of the lock; its tooltip says "Makes sure the object's the icon to the right of the lock; its tooltip says "Makes sure the object's
children are not selectable." children are not selectable."
.. image:: img/lock_children.png ![](img/lock_children.png)
Save the scene. Click Scene -> Save, or press :kbd:`Ctrl + S` on Windows/Linux Save the scene. Click Scene -> Save, or press :kbd:`Ctrl + S` on Windows/Linux
or :kbd:`Cmd + S` on macOS. or :kbd:`Cmd + S` on macOS.
@ -61,7 +61,7 @@ next to the node. An `AnimatedSprite` requires a `SpriteFrames
display. To create one, find the `Frames` property in the Inspector and click display. To create one, find the `Frames` property in the Inspector and click
"[empty]" -> "New SpriteFrames". Click again to open the "SpriteFrames" panel: "[empty]" -> "New SpriteFrames". Click again to open the "SpriteFrames" panel:
.. image:: img/spriteframes_panel.png ![](img/spriteframes_panel.png)
On the left is a list of animations. Click the "default" one and rename it to On the left is a list of animations. Click the "default" one and rename it to
@ -71,14 +71,14 @@ folder you unzipped earlier. Drag the two images for each animation, named
`playerGrey_up[1/2]` and `playerGrey_walk[1/2]`, into the "Animation Frames" `playerGrey_up[1/2]` and `playerGrey_walk[1/2]`, into the "Animation Frames"
side of the panel for the corresponding animation: side of the panel for the corresponding animation:
.. image:: img/spriteframes_panel2.png ![](img/spriteframes_panel2.png)
The player images are a bit too large for the game window, so we need to scale The player images are a bit too large for the game window, so we need to scale
them down. Click on the `AnimatedSprite` node and set the `Scale` property them down. Click on the `AnimatedSprite` node and set the `Scale` property
to `(0.5, 0.5)`. You can find it in the Inspector under the `Node2D` to `(0.5, 0.5)`. You can find it in the Inspector under the `Node2D`
heading. heading.
.. image:: img/player_scale.png ![](img/player_scale.png)
Finally, add a `CollisionShape2D` as a child of Finally, add a `CollisionShape2D` as a child of
`Player`. This will determine the player's "hitbox", or the bounds of its `Player`. This will determine the player's "hitbox", or the bounds of its
@ -87,11 +87,11 @@ fit, so next to "Shape" in the Inspector, click "[empty]"" -> "New
CapsuleShape2D". Using the two size handles, resize the shape to cover the CapsuleShape2D". Using the two size handles, resize the shape to cover the
sprite: sprite:
.. image:: img/player_coll_shape.png ![](img/player_coll_shape.png)
When you're finished, your `Player` scene should look like this: When you're finished, your `Player` scene should look like this:
.. image:: img/player_scene_nodes.png ![](img/player_scene_nodes.png)
Make sure to save the scene again after these changes. Make sure to save the scene again after these changes.

16
getting_started/first_2d_game/03.coding_the_player.md
View File

@ -10,7 +10,7 @@ To do so, we need to add some functionality that we can't get from a built-in
node, so we'll add a script. Click the `Player` node and click the "Attach node, so we'll add a script. Click the `Player` node and click the "Attach
Script" button: Script" button:
.. image:: img/add_script_button.png ![](img/add_script_button.png)
In the script settings window, you can leave the default settings alone. Just In the script settings window, you can leave the default settings alone. Just
click "Create": click "Create":
@ -18,7 +18,7 @@ click "Create":
.. note:: If you're creating a C# script or other languages, select the language .. note:: If you're creating a C# script or other languages, select the language
from the `language` drop down menu before hitting create. from the `language` drop down menu before hitting create.
.. image:: img/attach_node_window.png ![](img/attach_node_window.png)
.. note:: If this is your first time encountering GDScript, please read .. note:: If this is your first time encountering GDScript, please read
`doc_scripting` before continuing. `doc_scripting` before continuing.
@ -41,7 +41,7 @@ node and you'll see the property now appears in the "Script Variables" section
of the Inspector. Remember, if you change the value here, it will override the of the Inspector. Remember, if you change the value here, it will override the
value written in the script. value written in the script.
.. image:: img/export_variable.png ![](img/export_variable.png)
The `_ready()` function is called when a node enters the scene tree, which is The `_ready()` function is called when a node enters the scene tree, which is
a good time to find the size of the game window: a good time to find the size of the game window:
@ -70,13 +70,13 @@ Click on *Project -> Project Settings* to open the project settings window and
click on the *Input Map* tab at the top. Type "move_right" in the top bar and click on the *Input Map* tab at the top. Type "move_right" in the top bar and
click the "Add" button to add the `move_right` action. click the "Add" button to add the `move_right` action.
.. image:: img/input-mapping-add-action.png ![](img/input-mapping-add-action.png)
We need to assign a key to this action. Click the "+" icon on the right, then We need to assign a key to this action. Click the "+" icon on the right, then
click the "Key" option in the drop-down menu. A dialog asks you to type in the click the "Key" option in the drop-down menu. A dialog asks you to type in the
desired key. Press the right arrow on your keyboard and click "Ok". desired key. Press the right arrow on your keyboard and click "Ok".
.. image:: img/input-mapping-add-key.png ![](img/input-mapping-add-key.png)
Repeat these steps to add three more mappings: Repeat these steps to add three more mappings:
@ -86,7 +86,7 @@ Repeat these steps to add three more mappings:
Your input map tab should look like this: Your input map tab should look like this:
.. image:: img/input-mapping-completed.png ![](img/input-mapping-completed.png)
Click the "Close" button to close the project settings. Click the "Close" button to close the project settings.
@ -249,7 +249,7 @@ This defines a custom signal called "hit" that we will have our player emit
collision. Select the `Player` node and click the "Node" tab next to the collision. Select the `Player` node and click the "Node" tab next to the
Inspector tab to see the list of signals the player can emit: Inspector tab to see the list of signals the player can emit:
.. image:: img/player_signals.png ![](img/player_signals.png)
Notice our custom "hit" signal is there as well! Since our enemies are going to Notice our custom "hit" signal is there as well! Since our enemies are going to
be `RigidBody2D` nodes, we want the `body_entered(body: Node)` signal. This be `RigidBody2D` nodes, we want the `body_entered(body: Node)` signal. This
@ -258,7 +258,7 @@ the "Connect a Signal" window appears. We don't need to change any of these
settings so click "Connect" again. Godot will automatically create a function in settings so click "Connect" again. Godot will automatically create a function in
your player's script. your player's script.
.. image:: img/player_signal_connection.png ![](img/player_signal_connection.png)
Note the green icon indicating that a signal is connected to this function. Add Note the green icon indicating that a signal is connected to this function. Add
this code to the function: this code to the function:

4
getting_started/first_2d_game/04.creating_the_enemy.md
View File

@ -29,7 +29,7 @@ to `0`, so the mob will not fall downward. In addition, under the
`CollisionObject2D` section, click the `Mask` property and uncheck the first `CollisionObject2D` section, click the `Mask` property and uncheck the first
box. This will ensure the mobs do not collide with each other. box. This will ensure the mobs do not collide with each other.
.. image:: img/set_collision_mask.png ![](img/set_collision_mask.png)
Set up the `AnimatedSprite` like you did for the Set up the `AnimatedSprite` like you did for the
player. This time, we have 3 animations: `fly`, `swim`, and `walk`. There player. This time, we have 3 animations: `fly`, `swim`, and `walk`. There
@ -37,7 +37,7 @@ are two images for each animation in the art folder.
Adjust the "Speed (FPS)" to `3` for all animations. Adjust the "Speed (FPS)" to `3` for all animations.
.. image:: img/mob_animations.gif ![](img/mob_animations.gif)
Set the `Playing` property in the Inspector to "On". Set the `Playing` property in the Inspector to "On".

10
getting_started/first_2d_game/05.the_main_game_scene.md
View File

@ -12,7 +12,7 @@ be a container for handling game logic. It does not require 2D functionality its
Click the **Instance** button (represented by a chain link icon) and select your saved Click the **Instance** button (represented by a chain link icon) and select your saved
`Player.tscn`. `Player.tscn`.
.. image:: img/instance_scene.png ![](img/instance_scene.png)
Now, add the following nodes as children of `Main`, and name them as shown Now, add the following nodes as children of `Main`, and name them as shown
(values are in seconds): (values are in seconds):
@ -43,7 +43,7 @@ location on the edge of the screen. Add a `Path2D` node
named `MobPath` as a child of `Main`. When you select `Path2D`, you will named `MobPath` as a child of `Main`. When you select `Path2D`, you will
see some new buttons at the top of the editor: see some new buttons at the top of the editor:
.. image:: img/path2d_buttons.png ![](img/path2d_buttons.png)
Select the middle one ("Add Point") and draw the path by clicking to add the Select the middle one ("Add Point") and draw the path by clicking to add the
points at the corners shown. To have the points snap to the grid, make sure "Use points at the corners shown. To have the points snap to the grid, make sure "Use
@ -51,12 +51,12 @@ Grid Snap" and "Use Snap" are both selected. These options can be found to the
left of the "Lock" button, appearing as a magnet next to some dots and left of the "Lock" button, appearing as a magnet next to some dots and
intersecting lines, respectively. intersecting lines, respectively.
.. image:: img/grid_snap_button.png ![](img/grid_snap_button.png)
.. important:: Draw the path in *clockwise* order, or your mobs will spawn .. important:: Draw the path in *clockwise* order, or your mobs will spawn
pointing *outwards* instead of *inwards*! pointing *outwards* instead of *inwards*!
.. image:: img/draw_path2d.gif ![](img/draw_path2d.gif)
After placing point `4` in the image, click the "Close Curve" button and your After placing point `4` in the image, click the "Close Curve" button and your
curve will be complete. curve will be complete.
@ -68,7 +68,7 @@ a random position and direction along the path.
Your scene should look like this: Your scene should look like this:
.. image:: img/main_scene_nodes.png ![](img/main_scene_nodes.png)
Main script Main script
~~~~~~~~~~~ ~~~~~~~~~~~

12
getting_started/first_2d_game/06.heads_up_display.md
View File

@ -38,16 +38,16 @@ well. There is a font file included in the game assets called
1. Under **Theme overrides > Fonts** click on the empty box and select "New DynamicFont" 1. Under **Theme overrides > Fonts** click on the empty box and select "New DynamicFont"
.. image:: img/custom_font1.png ![](img/custom_font1.png)
2. Click on the "DynamicFont" you added, and under **Font > FontData**, 2. Click on the "DynamicFont" you added, and under **Font > FontData**,
choose "Load" and select the "Xolonium-Regular.ttf" file. choose "Load" and select the "Xolonium-Regular.ttf" file.
.. image:: img/custom_font2.png ![](img/custom_font2.png)
Set the "Size" property under `Settings`, `64` works well. Set the "Size" property under `Settings`, `64` works well.
.. image:: img/custom_font3.png ![](img/custom_font3.png)
Once you've done this on the `ScoreLabel`, you can click the down arrow next Once you've done this on the `ScoreLabel`, you can click the down arrow next
to the Font property and choose "Copy", then "Paste" it in the same place to the Font property and choose "Copy", then "Paste" it in the same place
@ -62,7 +62,7 @@ on the other two Control nodes.
Arrange the nodes as shown below. Click the "Layout" button to set a Control Arrange the nodes as shown below. Click the "Layout" button to set a Control
node's layout: node's layout:
.. image:: img/ui_anchor.png ![](img/ui_anchor.png)
You can drag the nodes to place them manually, or for more precise placement, You can drag the nodes to place them manually, or for more precise placement,
use the following settings: use the following settings:
@ -174,7 +174,7 @@ Now that we're done creating the `HUD` scene, go back to `Main`. Instance
the `HUD` scene in `Main` like you did the `Player` scene. The scene tree the `HUD` scene in `Main` like you did the `Player` scene. The scene tree
should look like this, so make sure you didn't miss anything: should look like this, so make sure you didn't miss anything:
.. image:: img/completed_main_scene.png ![](img/completed_main_scene.png)
Now we need to connect the `HUD` functionality to our `Main` script. This Now we need to connect the `HUD` functionality to our `Main` script. This
requires a few additions to the `Main` scene: requires a few additions to the `Main` scene:
@ -225,7 +225,7 @@ In the `Mob` scene, select the root node and click the "Node" tab next to the
Inspector (the same place where you find the node's signals). Next to "Signals", Inspector (the same place where you find the node's signals). Next to "Signals",
click "Groups" and you can type a new group name and click "Add". click "Groups" and you can type a new group name and click "Add".
.. image:: img/group_tab.png ![](img/group_tab.png)
Now all mobs will be in the "mobs" group. We can then add the following line to Now all mobs will be in the "mobs" group. We can then add the following line to
the `new_game()` function in `Main`: the `new_game()` function in `Main`:

4
getting_started/first_2d_game/07.finishing-up.md
View File

@ -59,14 +59,14 @@ item. A second *Shortcut* property will appear. Select "New InputEventAction"
and click the new "InputEventAction". Finally, in the *Action* property, type and click the new "InputEventAction". Finally, in the *Action* property, type
the name `start_game`. the name `start_game`.
.. image:: img/start_button_shortcut.png ![](img/start_button_shortcut.png)
Now when the start button appears, you can either click it or press :kbd:`Enter` Now when the start button appears, you can either click it or press :kbd:`Enter`
to start the game. to start the game.
And with that, you completed your first 2D game in Godot. And with that, you completed your first 2D game in Godot.
.. image:: img/dodge_preview.gif ![](img/dodge_preview.gif)
You got to make a player-controlled character, enemies that spawn randomly You got to make a player-controlled character, enemies that spawn randomly
around the game board, count the score, implement a game over and replay, user around the game board, count the score, implement a game over and replay, user

2
getting_started/first_2d_game/index.md
View File

@ -73,4 +73,4 @@ Contents
06.heads_up_display 06.heads_up_display
07.finishing-up 07.finishing-up
.. |image0| image:: img/dodge_preview.gif .. |image0| image:: img/dodge_preview.gif)

34
getting_started/first_3d_game/01.game_setup.md
View File

@ -145,20 +145,20 @@ At this point, your project should look like this.
That's our starting point. In the next part, we will work on the player scene That's our starting point. In the next part, we will work on the player scene
and base movement. and base movement.
.. |image1| image:: img/01.game_setup/01.import_button.png .. |image1| image:: img/01.game_setup/01.import_button.png)
.. |image2| image:: img/01.game_setup/02.browse_to_project_folder.png .. |image2| image:: img/01.game_setup/02.browse_to_project_folder.png)
.. |image3| image:: img/01.game_setup/03.import_and_edit.png .. |image3| image:: img/01.game_setup/03.import_and_edit.png)
.. |image4| image:: img/01.game_setup/04.start_assets.png .. |image4| image:: img/01.game_setup/04.start_assets.png)
.. |image5| image:: img/01.game_setup/05.main_node.png .. |image5| image:: img/01.game_setup/05.main_node.png)
.. |image6| image:: img/01.game_setup/06.staticbody_node.png .. |image6| image:: img/01.game_setup/06.staticbody_node.png)
.. |image7| image:: img/01.game_setup/07.collision_shape_warning.png .. |image7| image:: img/01.game_setup/07.collision_shape_warning.png)
.. |image8| image:: img/01.game_setup/08.create_box_shape.png .. |image8| image:: img/01.game_setup/08.create_box_shape.png)
.. |image9| image:: img/01.game_setup/09.box_extents.png .. |image9| image:: img/01.game_setup/09.box_extents.png)
.. |image10| image:: img/01.game_setup/10.mesh_instance.png .. |image10| image:: img/01.game_setup/10.mesh_instance.png)
.. |image11| image:: img/01.game_setup/11.cube_mesh.png .. |image11| image:: img/01.game_setup/11.cube_mesh.png)
.. |image12| image:: img/01.game_setup/12.cube_resized.png .. |image12| image:: img/01.game_setup/12.cube_resized.png)
.. |image13| image:: img/01.game_setup/13.move_gizmo_y_axis.png .. |image13| image:: img/01.game_setup/13.move_gizmo_y_axis.png)
.. |image14| image:: img/01.game_setup/14.select_mode_icon.png .. |image14| image:: img/01.game_setup/14.select_mode_icon.png)
.. |image15| image:: img/01.game_setup/15.translation_amount.png .. |image15| image:: img/01.game_setup/15.translation_amount.png)
.. |image16| image:: img/01.game_setup/16.turn_on_shadows.png .. |image16| image:: img/01.game_setup/16.turn_on_shadows.png)
.. |image17| image:: img/01.game_setup/17.project_with_light.png .. |image17| image:: img/01.game_setup/17.project_with_light.png)

40
getting_started/first_3d_game/02.player_input.md
View File

@ -8,7 +8,7 @@ actions, and code player movement. By the end, you'll have a playable character
that moves in eight directions. that moves in eight directions.
.. TODO: add player animated gif? .. TODO: add player animated gif?
.. player_movement.gif .. player_movement.gif)
Create a new scene by going to the Scene menu in the top-left and clicking *New Create a new scene by going to the Scene menu in the top-left and clicking *New
Scene*. Create a *KinematicBody* node as the root and name it *Player*. Scene*. Create a *KinematicBody* node as the root and name it *Player*.
@ -156,22 +156,22 @@ groups of keys and buttons in your projects.
In the next part, we'll code and test the player's movement. In the next part, we'll code and test the player's movement.
.. |image0| image:: img/02.player_input/01.new_scene.png .. |image0| image:: img/02.player_input/01.new_scene.png)
.. |image1| image:: img/02.player_input/02.instantiating_the_model.png .. |image1| image:: img/02.player_input/02.instantiating_the_model.png)
.. |image2| image:: img/02.player_input/03.scene_structure.png .. |image2| image:: img/02.player_input/03.scene_structure.png)
.. |image3| image:: img/02.player_input/04.sphere_shape.png .. |image3| image:: img/02.player_input/04.sphere_shape.png)
.. |image4| image:: img/02.player_input/05.moving_the_sphere_up.png .. |image4| image:: img/02.player_input/05.moving_the_sphere_up.png)
.. |image5| image:: img/02.player_input/06.toggling_visibility.png .. |image5| image:: img/02.player_input/06.toggling_visibility.png)
.. |image6| image:: img/02.player_input/07.project_settings.png .. |image6| image:: img/02.player_input/07.project_settings.png)
.. |image7| image:: img/02.player_input/07.input_map_tab.png .. |image7| image:: img/02.player_input/07.input_map_tab.png)
.. |image8| image:: img/02.player_input/07.adding_action.png .. |image8| image:: img/02.player_input/07.adding_action.png)
.. |image9| image:: img/02.player_input/08.actions_list_empty.png .. |image9| image:: img/02.player_input/08.actions_list_empty.png)
.. |image10| image:: img/02.player_input/08.create_key_action.png .. |image10| image:: img/02.player_input/08.create_key_action.png)
.. |image11| image:: img/02.player_input/09.keyboard_key_popup.png .. |image11| image:: img/02.player_input/09.keyboard_key_popup.png)
.. |image12| image:: img/02.player_input/09.keyboard_keys.png .. |image12| image:: img/02.player_input/09.keyboard_keys.png)
.. |image13| image:: img/02.player_input/10.joy_axis_option.png .. |image13| image:: img/02.player_input/10.joy_axis_option.png)
.. |image14| image:: img/02.player_input/11.joy_axis_popup.png .. |image14| image:: img/02.player_input/11.joy_axis_popup.png)
.. |image15| image:: img/02.player_input/12.move_inputs_mapped.png .. |image15| image:: img/02.player_input/12.move_inputs_mapped.png)
.. |image16| image:: img/02.player_input/13.joy_button_option.png .. |image16| image:: img/02.player_input/13.joy_button_option.png)
.. |image17| image:: img/02.player_input/14.add_jump_button.png .. |image17| image:: img/02.player_input/14.add_jump_button.png)
.. |image18| image:: img/02.player_input/14.jump_input_action.png .. |image18| image:: img/02.player_input/14.jump_input_action.png)

22
getting_started/first_3d_game/03.player_movement_code.md
View File

@ -279,14 +279,14 @@ the ground should fill the background.
With that, we have both player movement and the view in place. Next, we will With that, we have both player movement and the view in place. Next, we will
work on the monsters. work on the monsters.
.. |image0| image:: img/03.player_movement_code/01.attach_script_to_player.png .. |image0| image:: img/03.player_movement_code/01.attach_script_to_player.png)
.. |image1| image:: img/03.player_movement_code/02.clicking_main_tab.png .. |image1| image:: img/03.player_movement_code/02.clicking_main_tab.png)
.. |image2| image:: img/03.player_movement_code/03.instance_child_scene.png .. |image2| image:: img/03.player_movement_code/03.instance_child_scene.png)
.. |image3| image:: img/03.player_movement_code/04.scene_tree_with_camera.png .. |image3| image:: img/03.player_movement_code/04.scene_tree_with_camera.png)
.. |image4| image:: img/03.player_movement_code/05.camera_preview_checkbox.png .. |image4| image:: img/03.player_movement_code/05.camera_preview_checkbox.png)
.. |image5| image:: img/03.player_movement_code/06.two_viewports.png .. |image5| image:: img/03.player_movement_code/06.two_viewports.png)
.. |image6| image:: img/03.player_movement_code/07.camera_preview_checkbox.png .. |image6| image:: img/03.player_movement_code/07.camera_preview_checkbox.png)
.. |image7| image:: img/03.player_movement_code/08.camera_moved.png .. |image7| image:: img/03.player_movement_code/08.camera_moved.png)
.. |image8| image:: img/03.player_movement_code/09.camera_rotated.png .. |image8| image:: img/03.player_movement_code/09.camera_rotated.png)
.. |image9| image:: img/03.player_movement_code/10.camera_perspective.png .. |image9| image:: img/03.player_movement_code/10.camera_perspective.png)
.. |image10| image:: img/03.player_movement_code/11.camera_orthographic.png .. |image10| image:: img/03.player_movement_code/11.camera_orthographic.png)

22
getting_started/first_3d_game/04.mob_scene.md
View File

@ -236,14 +236,14 @@ gdscript GDScript
queue_free() queue_free()
``` ```
.. |image0| image:: img/04.mob_scene/01.initial_three_nodes.png .. |image0| image:: img/04.mob_scene/01.initial_three_nodes.png)
.. |image1| image:: img/04.mob_scene/02.add_child_node.png .. |image1| image:: img/04.mob_scene/02.add_child_node.png)
.. |image2| image:: img/04.mob_scene/03.scene_with_collision_shape.png .. |image2| image:: img/04.mob_scene/03.scene_with_collision_shape.png)
.. |image3| image:: img/04.mob_scene/04.create_box_shape.png .. |image3| image:: img/04.mob_scene/04.create_box_shape.png)
.. |image4| image:: img/04.mob_scene/05.box_final_size.png .. |image4| image:: img/04.mob_scene/05.box_final_size.png)
.. |image5| image:: img/04.mob_scene/06.visibility_notifier.png .. |image5| image:: img/04.mob_scene/06.visibility_notifier.png)
.. |image6| image:: img/04.mob_scene/07.visibility_notifier_bbox_resized.png .. |image6| image:: img/04.mob_scene/07.visibility_notifier_bbox_resized.png)
.. |image7| image:: img/04.mob_scene/08.mob_attach_script.png .. |image7| image:: img/04.mob_scene/08.mob_attach_script.png)
.. |image8| image:: img/04.mob_scene/09.switch_to_3d_workspace.png .. |image8| image:: img/04.mob_scene/09.switch_to_3d_workspace.png)
.. |image9| image:: img/04.mob_scene/10.node_dock.png .. |image9| image:: img/04.mob_scene/10.node_dock.png)
.. |image10| image:: img/04.mob_scene/11.connect_signal.png .. |image10| image:: img/04.mob_scene/11.connect_signal.png)

52
getting_started/first_3d_game/05.spawning_mobs.md
View File

@ -268,29 +268,29 @@ move in a straight line.
For now, they bump and slide against one another when their paths cross. We'll For now, they bump and slide against one another when their paths cross. We'll
address this in the next part. address this in the next part.
.. |image0| image:: img/05.spawning_mobs/01.monsters_path_preview.png .. |image0| image:: img/05.spawning_mobs/01.monsters_path_preview.png)
.. |image1| image:: img/05.spawning_mobs/02.project_settings.png .. |image1| image:: img/05.spawning_mobs/02.project_settings.png)
.. |image2| image:: img/05.spawning_mobs/03.window_settings.png .. |image2| image:: img/05.spawning_mobs/03.window_settings.png)
.. |image3| image:: img/05.spawning_mobs/04.camera_preview.png .. |image3| image:: img/05.spawning_mobs/04.camera_preview.png)
.. |image4| image:: img/05.spawning_mobs/05.cylinders_node.png .. |image4| image:: img/05.spawning_mobs/05.cylinders_node.png)
.. |image5| image:: img/05.spawning_mobs/06.cylinder_mesh.png .. |image5| image:: img/05.spawning_mobs/06.cylinder_mesh.png)
.. |image6| image:: img/05.spawning_mobs/07.top_view.png .. |image6| image:: img/05.spawning_mobs/07.top_view.png)
.. |image7| image:: img/05.spawning_mobs/08.toggle_view_grid.png .. |image7| image:: img/05.spawning_mobs/08.toggle_view_grid.png)
.. |image8| image:: img/05.spawning_mobs/09.toggle_grid_snap.png .. |image8| image:: img/05.spawning_mobs/09.toggle_grid_snap.png)
.. |image9| image:: img/05.spawning_mobs/10.place_first_cylinder.png .. |image9| image:: img/05.spawning_mobs/10.place_first_cylinder.png)
.. |image10| image:: img/05.spawning_mobs/11.both_cylinders_selected.png .. |image10| image:: img/05.spawning_mobs/11.both_cylinders_selected.png)
.. |image11| image:: img/05.spawning_mobs/12.four_cylinders.png .. |image11| image:: img/05.spawning_mobs/12.four_cylinders.png)
.. |image12| image:: img/05.spawning_mobs/13.selecting_all_cylinders.png .. |image12| image:: img/05.spawning_mobs/13.selecting_all_cylinders.png)
.. |image13| image:: img/05.spawning_mobs/14.spatial_material.png .. |image13| image:: img/05.spawning_mobs/14.spatial_material.png)
.. |image14| image:: img/05.spawning_mobs/15.bright-cylinders.png .. |image14| image:: img/05.spawning_mobs/15.bright-cylinders.png)
.. |image15| image:: img/05.spawning_mobs/16.cylinders_fold.png .. |image15| image:: img/05.spawning_mobs/16.cylinders_fold.png)
.. |image16| image:: img/05.spawning_mobs/17.points_options.png .. |image16| image:: img/05.spawning_mobs/17.points_options.png)
.. |image17| image:: img/05.spawning_mobs/18.close_path.png .. |image17| image:: img/05.spawning_mobs/18.close_path.png)
.. |image18| image:: img/05.spawning_mobs/19.path_result.png .. |image18| image:: img/05.spawning_mobs/19.path_result.png)
.. |image19| image:: img/05.spawning_mobs/20.spawn_nodes.png .. |image19| image:: img/05.spawning_mobs/20.spawn_nodes.png)
.. |image20| image:: img/05.spawning_mobs/20.mob_scene_property.png .. |image20| image:: img/05.spawning_mobs/20.mob_scene_property.png)
.. |image21| image:: img/05.spawning_mobs/21.mob_timer.png .. |image21| image:: img/05.spawning_mobs/21.mob_timer.png)
.. |image22| image:: img/05.spawning_mobs/22.mob_timer_properties.png .. |image22| image:: img/05.spawning_mobs/22.mob_timer_properties.png)
.. |image23| image:: img/05.spawning_mobs/23.timeout_signal.png .. |image23| image:: img/05.spawning_mobs/23.timeout_signal.png)
.. |image24| image:: img/05.spawning_mobs/24.connect_timer_to_main.png .. |image24| image:: img/05.spawning_mobs/24.connect_timer_to_main.png)
.. |image25| image:: img/05.spawning_mobs/25.spawn_result.png .. |image25| image:: img/05.spawning_mobs/25.spawn_result.png)

18
getting_started/first_3d_game/06.jump_and_squash.md
View File

@ -275,12 +275,12 @@ With that, you should be able to kill monsters by jumping on them. You can press
However, the player won't die yet. We'll work on that in the next part. However, the player won't die yet. We'll work on that in the next part.
.. |image0| image:: img/06.jump_and_squash/02.project_settings.png .. |image0| image:: img/06.jump_and_squash/02.project_settings.png)
.. |image1| image:: img/06.jump_and_squash/03.physics_layers.png .. |image1| image:: img/06.jump_and_squash/03.physics_layers.png)
.. |image2| image:: img/06.jump_and_squash/04.default_physics_properties.png .. |image2| image:: img/06.jump_and_squash/04.default_physics_properties.png)
.. |image3| image:: img/06.jump_and_squash/05.toggle_layer_and_mask.png .. |image3| image:: img/06.jump_and_squash/05.toggle_layer_and_mask.png)
.. |image4| image:: img/06.jump_and_squash/06.named_checkboxes.png .. |image4| image:: img/06.jump_and_squash/06.named_checkboxes.png)
.. |image5| image:: img/06.jump_and_squash/07.player_physics_mask.png .. |image5| image:: img/06.jump_and_squash/07.player_physics_mask.png)
.. |image6| image:: img/06.jump_and_squash/08.mob_physics_mask.png .. |image6| image:: img/06.jump_and_squash/08.mob_physics_mask.png)
.. |image7| image:: img/06.jump_and_squash/09.groups_tab.png .. |image7| image:: img/06.jump_and_squash/09.groups_tab.png)
.. |image8| image:: img/06.jump_and_squash/10.group_scene_icon.png .. |image8| image:: img/06.jump_and_squash/10.group_scene_icon.png)

12
getting_started/first_3d_game/07.killing_player.md
View File

@ -265,9 +265,9 @@ gdscript GDScript
See you in the next lesson to add the score and the retry option. See you in the next lesson to add the score and the retry option.
.. |image0| image:: img/07.killing_player/01.adding_area_node.png .. |image0| image:: img/07.killing_player/01.adding_area_node.png)
.. |image1| image:: img/07.killing_player/02.cylinder_shape.png .. |image1| image:: img/07.killing_player/02.cylinder_shape.png)
.. |image2| image:: img/07.killing_player/03.cylinder_in_editor.png .. |image2| image:: img/07.killing_player/03.cylinder_in_editor.png)
.. |image3| image:: img/07.killing_player/04.mob_detector_properties.png .. |image3| image:: img/07.killing_player/04.mob_detector_properties.png)
.. |image4| image:: img/07.killing_player/05.body_entered_signal.png .. |image4| image:: img/07.killing_player/05.body_entered_signal.png)
.. |image5| image:: img/07.killing_player/06.player_hit_signal.png .. |image5| image:: img/07.killing_player/06.player_hit_signal.png)

48
getting_started/first_3d_game/08.score_and_replay.md
View File

@ -366,27 +366,27 @@ gdscript GDScript
$UserInterface/Retry.show() $UserInterface/Retry.show()
``` ```
.. |image0| image:: img/08.score_and_replay/01.label_node.png .. |image0| image:: img/08.score_and_replay/01.label_node.png)
.. |image1| image:: img/08.score_and_replay/02.score_placeholder.png .. |image1| image:: img/08.score_and_replay/02.score_placeholder.png)
.. |image2| image:: img/08.score_and_replay/02.score_custom_color.png .. |image2| image:: img/08.score_and_replay/02.score_custom_color.png)
.. |image3| image:: img/08.score_and_replay/02.score_color_picker.png .. |image3| image:: img/08.score_and_replay/02.score_color_picker.png)
.. |image4| image:: img/08.score_and_replay/02.score_label_moved.png .. |image4| image:: img/08.score_and_replay/02.score_label_moved.png)
.. |image5| image:: img/08.score_and_replay/03.creating_theme.png .. |image5| image:: img/08.score_and_replay/03.creating_theme.png)
.. |image6| image:: img/08.score_and_replay/04.theme_preview.png .. |image6| image:: img/08.score_and_replay/04.theme_preview.png)
.. |image7| image:: img/08.score_and_replay/05.dynamic_font.png .. |image7| image:: img/08.score_and_replay/05.dynamic_font.png)
.. |image8| image:: img/08.score_and_replay/06.font_data.png .. |image8| image:: img/08.score_and_replay/06.font_data.png)
.. |image9| image:: img/08.score_and_replay/07.font_size.png .. |image9| image:: img/08.score_and_replay/07.font_size.png)
.. |image10| image:: img/08.score_and_replay/08.open_main_script.png .. |image10| image:: img/08.score_and_replay/08.open_main_script.png)
.. |image11| image:: img/08.score_and_replay/09.score_in_game.png .. |image11| image:: img/08.score_and_replay/09.score_in_game.png)
.. |image12| image:: img/08.score_and_replay/10.layout_icon.png .. |image12| image:: img/08.score_and_replay/10.layout_icon.png)
.. |image13| image:: img/08.score_and_replay/11.full_rect_option.png .. |image13| image:: img/08.score_and_replay/11.full_rect_option.png)
.. |image14| image:: img/08.score_and_replay/12.anchors_updated.png .. |image14| image:: img/08.score_and_replay/12.anchors_updated.png)
.. |image15| image:: img/08.score_and_replay/13.retry_color_picker.png .. |image15| image:: img/08.score_and_replay/13.retry_color_picker.png)
.. |image16| image:: img/08.score_and_replay/14.retry_node.png .. |image16| image:: img/08.score_and_replay/14.retry_node.png)
.. |image17| image:: img/08.score_and_replay/15.layout_center.png .. |image17| image:: img/08.score_and_replay/15.layout_center.png)
.. |image18| image:: img/08.score_and_replay/16.new_scene.png .. |image18| image:: img/08.score_and_replay/16.new_scene.png)
.. |image19| image:: img/08.score_and_replay/17.music_player_node.png .. |image19| image:: img/08.score_and_replay/17.music_player_node.png)
.. |image20| image:: img/08.score_and_replay/18.music_node_properties.png .. |image20| image:: img/08.score_and_replay/18.music_node_properties.png)
.. |image21| image:: img/08.score_and_replay/19.register_autoload.png .. |image21| image:: img/08.score_and_replay/19.register_autoload.png)
.. |image22| image:: img/08.score_and_replay/20.scene_dock_tabs.png .. |image22| image:: img/08.score_and_replay/20.scene_dock_tabs.png)
.. |image23| image:: img/08.score_and_replay/21.remote_scene_tree.png .. |image23| image:: img/08.score_and_replay/21.remote_scene_tree.png)

46
getting_started/first_3d_game/09.adding_animations.md
View File

@ -360,26 +360,26 @@ gdscript GDScript
queue_free() queue_free()
``` ```
.. |image0| image:: img/squash-the-creeps-final.gif .. |image0| image:: img/squash-the-creeps-final.gif)
.. |image1| image:: img/09.adding_animations/01.animation_player_dock.png .. |image1| image:: img/09.adding_animations/01.animation_player_dock.png)
.. |image2| image:: img/09.adding_animations/02.new_animation.png .. |image2| image:: img/09.adding_animations/02.new_animation.png)
.. |image3| image:: img/09.adding_animations/03.float_name.png .. |image3| image:: img/09.adding_animations/03.float_name.png)
.. |image4| image:: img/09.adding_animations/03.timeline.png .. |image4| image:: img/09.adding_animations/03.timeline.png)
.. |image5| image:: img/09.adding_animations/04.autoplay_and_loop.png .. |image5| image:: img/09.adding_animations/04.autoplay_and_loop.png)
.. |image6| image:: img/09.adding_animations/05.pin_icon.png .. |image6| image:: img/09.adding_animations/05.pin_icon.png)
.. |image7| image:: img/09.adding_animations/06.animation_duration.png .. |image7| image:: img/09.adding_animations/06.animation_duration.png)
.. |image8| image:: img/09.adding_animations/07.editable_timeline.png .. |image8| image:: img/09.adding_animations/07.editable_timeline.png)
.. |image9| image:: img/09.adding_animations/08.zoom_slider.png .. |image9| image:: img/09.adding_animations/08.zoom_slider.png)
.. |image10| image:: img/09.adding_animations/09.creating_first_keyframe.png .. |image10| image:: img/09.adding_animations/09.creating_first_keyframe.png)
.. |image11| image:: img/09.adding_animations/10.initial_keys.png .. |image11| image:: img/09.adding_animations/10.initial_keys.png)
.. |image12| image:: img/09.adding_animations/11.moving_keys.png .. |image12| image:: img/09.adding_animations/11.moving_keys.png)
.. |image13| image:: img/09.adding_animations/12.second_keys_values.png .. |image13| image:: img/09.adding_animations/12.second_keys_values.png)
.. |image14| image:: img/09.adding_animations/13.second_keys.png .. |image14| image:: img/09.adding_animations/13.second_keys.png)
.. |image15| image:: img/09.adding_animations/14.play_button.png .. |image15| image:: img/09.adding_animations/14.play_button.png)
.. |image16| image:: img/09.adding_animations/15.box_select.png .. |image16| image:: img/09.adding_animations/15.box_select.png)
.. |image17| image:: img/09.adding_animations/16.easing_property.png .. |image17| image:: img/09.adding_animations/16.easing_property.png)
.. |image18| image:: img/09.adding_animations/17.ease_out.png .. |image18| image:: img/09.adding_animations/17.ease_out.png)
.. |image19| image:: img/09.adding_animations/18.ease_out_second_rotation_key.png .. |image19| image:: img/09.adding_animations/18.ease_out_second_rotation_key.png)
.. |image20| image:: img/09.adding_animations/19.ease_in_second_translation_key.png .. |image20| image:: img/09.adding_animations/19.ease_in_second_translation_key.png)
.. |image21| image:: img/09.adding_animations/20.float_animation.gif .. |image21| image:: img/09.adding_animations/20.float_animation.gif)
.. |image22| image:: img/09.adding_animations/21.script_icon.png .. |image22| image:: img/09.adding_animations/21.script_icon.png)

2
getting_started/first_3d_game/index.md
View File

@ -67,4 +67,4 @@ Contents
09.adding_animations 09.adding_animations
going_further going_further
.. |image0| image:: img/squash-the-creeps-final.gif .. |image0| image:: img/squash-the-creeps-final.gif)

42
getting_started/introduction/first_look_at_the_editor.md
View File

@ -22,19 +22,19 @@ 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 default tab, "Projects," you can manage existing projects, import or create new
ones, and more. ones, and more.
.. image:: img/editor_intro_project_manager.png ![](img/editor_intro_project_manager.png)
At the top of the window, there is another tab named "Asset Library Projects". At the top of the window, there is another tab named "Asset Library Projects".
In the open-source asset library you can search for demo projects, templates, In the open-source asset library you can search for demo projects, templates,
and completed projects, including many that are developed by the community. and completed projects, including many that are developed by the community.
.. image:: img/editor_intro_project_templates.png ![](img/editor_intro_project_templates.png)
You can also change the editor's language using the drop-down menu to the right 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 of the engine's version in the window's top-right corner. By default, it is in
English (EN). English (EN).
.. image:: img/editor_intro_language.png ![](img/editor_intro_language.png)
First look at Godot's editor First look at Godot's editor
---------------------------- ----------------------------
@ -42,51 +42,51 @@ First look at Godot's editor
When you open a new or an existing project, the editor's interface appears. 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.png ![](img/editor_intro_editor_empty.png)
By default, it features **menus**, **main screens**, and playtest buttons along By default, it features **menus**, **main screens**, and playtest buttons along
the window's top edge. the window's top edge.
.. image:: img/editor_intro_top_menus.png ![](img/editor_intro_top_menus.png)
In the center is the **viewport** with its **toolbar** at the top, where you'll 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. find tools to move, scale, or lock the scene's nodes.
.. image:: img/editor_intro_3d_viewport.png ![](img/editor_intro_3d_viewport.png)
On either side of the viewport sit the **docks**. And at the bottom of the On either side of the viewport sit the **docks**. And at the bottom of the
window lies the **bottom panel**. window lies the **bottom panel**.
The toolbar changes based on the context and selected node. Here is the 2D toolbar. The toolbar changes based on the context and selected node. Here is the 2D toolbar.
.. image:: img/editor_intro_toolbar_2d.png ![](img/editor_intro_toolbar_2d.png)
Below is the 3D one. Below is the 3D one.
.. image:: img/editor_intro_toolbar_3d.png ![](img/editor_intro_toolbar_3d.png)
Let's look at the docks. The **FileSystem** dock lists your project files, be it Let's look at the docks. The **FileSystem** dock lists your project files, be it
scripts, images, audio samples, and more. scripts, images, audio samples, and more.
.. image:: img/editor_intro_filesystem_dock.png ![](img/editor_intro_filesystem_dock.png)
The **Scene** dock lists the active scene's nodes. The **Scene** dock lists the active scene's nodes.
.. image:: img/editor_intro_scene_dock.png ![](img/editor_intro_scene_dock.png)
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.png ![](img/editor_intro_inspector_dock.png)
The **bottom panel**, situated below the viewport, is the host for the debug 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 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.png ![](img/editor_intro_bottom_panels.png)
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.png ![](img/editor_intro_bottom_panel_animation.png)
The four main screens The four main screens
--------------------- ---------------------
@ -97,17 +97,17 @@ There are four main screen buttons centered at the top of the editor:
You'll use the **2D screen** for all types of games. In addition to 2D games, 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. the 2D screen is where you'll build your interfaces.
.. image:: img/editor_intro_workspace_2d.png ![](img/editor_intro_workspace_2d.png)
In the **3D screen**, you can work with meshes, lights, and design levels for In the **3D screen**, you can work with meshes, lights, and design levels for
3D games. 3D games.
.. image:: img/editor_intro_workspace_3d.png ![](img/editor_intro_workspace_3d.png)
Notice the perspective button under the toolbar. Clicking on it opens a list of Notice the perspective button under the toolbar. Clicking on it opens a list of
options related to the 3D view. options related to the 3D view.
.. image:: img/editor_intro_3d_viewport_perspective.png ![](img/editor_intro_3d_viewport_perspective.png)
.. note:: Read `doc_introduction_to_3d` for more detail about the **3D .. note:: Read `doc_introduction_to_3d` for more detail about the **3D
main screen**. main screen**.
@ -115,12 +115,12 @@ options related to the 3D view.
The **Script screen** is a complete code editor with a debugger, rich The **Script screen** is a complete code editor with a debugger, rich
auto-completion, and built-in code reference. auto-completion, and built-in code reference.
.. image:: img/editor_intro_workspace_script.png ![](img/editor_intro_workspace_script.png)
Finally, the **AssetLib** is a library of free and open-source add-ons, scripts, Finally, the **AssetLib** is a library of free and open-source add-ons, scripts,
and assets to use in your projects. and assets to use in your projects.
.. image:: img/editor_intro_workspace_assetlib.png ![](img/editor_intro_workspace_assetlib.png)
.. seealso:: You can learn more about the asset library in .. seealso:: You can learn more about the asset library in
`doc_what_is_assetlib`. `doc_what_is_assetlib`.
@ -140,13 +140,13 @@ signal by any one of the following methods:
or built-in variable in the script editor. or built-in variable in the script editor.
.. image:: img/editor_intro_search_help_button.png ![](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 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. also use it to browse available objects and methods.
.. image:: img/editor_intro_search_help.png ![](img/editor_intro_search_help.png)
Double-click on an item to open the corresponding page in the script main screen. Double-click on an item to open the corresponding page in the script main screen.
.. image:: img/editor_intro_help_class_animated_sprite.png ![](img/editor_intro_help_class_animated_sprite.png)

12
getting_started/introduction/godot_design_philosophy.md
View File

@ -191,9 +191,9 @@ base unit for 2D scenes is pixels.** Even though the engines are
separate, you can render 2D in 3D, 3D in 2D, and overlay 2D sprites and separate, you can render 2D in 3D, 3D in 2D, and overlay 2D sprites and
interfaces over your 3D world. interfaces over your 3D world.
.. |image0| image:: img/engine_design_01.png .. |image0| image:: img/engine_design_01.png)
.. |image1| image:: img/engine_design_02.png .. |image1| image:: img/engine_design_02.png)
.. |image2| image:: img/engine_design_03.png .. |image2| image:: img/engine_design_03.png)
.. |image3| image:: img/engine_design_visual_script.png .. |image3| image:: img/engine_design_visual_script.png)
.. |image4| image:: img/engine_design_fsm_plugin.png .. |image4| image:: img/engine_design_fsm_plugin.png)
.. |image5| image:: img/engine_design_rpg_in_a_box.png .. |image5| image:: img/engine_design_rpg_in_a_box.png)

10
getting_started/introduction/introduction_to_godot.md
View File

@ -35,14 +35,14 @@ tremendously since its open-source release in 2014.
Some examples of games created with Godot include Ex-Zodiac and Helms of Fury. Some examples of games created with Godot include Ex-Zodiac and Helms of Fury.
.. image:: img/introduction_ex_zodiac.png ![](img/introduction_ex_zodiac.png)
.. image:: img/introduction_helms_of_fury.jpg ![](img/introduction_helms_of_fury.jpg
As for applications, the open-source pixel art drawing program Pixelorama is 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. powered by Godot, and so is the voxel RPG creator RPG in a box.
.. image:: img/introduction_rpg_in_a_box.png ![](img/introduction_rpg_in_a_box.png)
You can find many more examples in the `official showcase videos`_. You can find many more examples in the `official showcase videos`_.
@ -53,7 +53,7 @@ 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 most common needs. It includes a code editor, an animation editor, a tilemap
editor, a shader editor, a debugger, a profiler, and more. editor, a shader editor, a debugger, a profiler, and more.
.. image:: img/introduction_editor.png ![](img/introduction_editor.png)
The team strives to offer a feature-rich game editor with a consistent user 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 experience. While there is always room for improvement, the user interface keeps
@ -64,7 +64,7 @@ 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 VSCode_ and Emacs_ for GDScript and C#. We also support Visual Studio for C# on
Windows. Windows.
.. image:: img/introduction_vscode.png ![](img/introduction_vscode.png)
Programming languages Programming languages
--------------------- ---------------------

12
getting_started/introduction/key_concepts_overview.md
View File

@ -24,12 +24,12 @@ 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 anything you can think of. Godot's scenes are flexible; they fill the role of
both prefabs and scenes in some other game engines. both prefabs and scenes in some other game engines.
.. image:: img/key_concepts_main_menu.png ![](img/key_concepts_main_menu.png)
You can also nest scenes. For example, you can put your character in a level, 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. and drag and drop a scene as a child of it.
.. image:: img/key_concepts_scene_example.png ![](img/key_concepts_scene_example.png)
Nodes Nodes
----- -----
@ -38,7 +38,7 @@ A scene is composed of one or more **nodes**. Nodes are your game's smallest
building blocks that you arrange into trees. Here's an example of a character's building blocks that you arrange into trees. Here's an example of a character's
nodes. nodes.
.. image:: img/key_concepts_character_nodes.png ![](img/key_concepts_character_nodes.png)
It is made of a `KinematicBody2D` node named "Character", a `Sprite`, a It is made of a `KinematicBody2D` node named "Character", a `Sprite`, a
`Camera2D`, and a `CollisionShape2D`. `Camera2D`, and a `CollisionShape2D`.
@ -54,7 +54,7 @@ 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 extend to build more powerful ones. 2D, 3D, or user interface, you will do most
things with these nodes. things with these nodes.
.. image:: img/key_concepts_node_menu.png ![](img/key_concepts_node_menu.png)
The scene tree The scene tree
-------------- --------------
@ -64,7 +64,7 @@ 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 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. represent characters, weapons, doors, or your user interface.
.. image:: img/key_concepts_scene_tree.png ![](img/key_concepts_scene_tree.png)
Signals Signals
------- -------
@ -73,7 +73,7 @@ Nodes emit signals when some event occurs. This feature allows you to make
nodes communicate without hard-wiring them in code. It gives you a lot of nodes communicate without hard-wiring them in code. It gives you a lot of
flexibility in how you structure your scenes. flexibility in how you structure your scenes.
.. image:: img/key_concepts_signals.png ![](img/key_concepts_signals.png)
.. note:: Signals are Godot's version of the *observer* pattern. You can read .. note:: Signals are Godot's version of the *observer* pattern. You can read
more about it here: more about it here:

8
getting_started/introduction/learning_new_features.md
View File

@ -21,7 +21,7 @@ explore broad topics while the search bar will help you find more specific
pages. If a page exists for a given theme, it will often link to more related pages. If a page exists for a given theme, it will often link to more related
content. content.
.. image:: img/manual_search.png ![](img/manual_search.png)
The manual has a companion class reference that explains each Godot class's The manual has a companion class reference that explains each Godot class's
available functions and properties when programming. While the manual covers available functions and properties when programming. While the manual covers
@ -31,7 +31,7 @@ access it both online and offline. We recommend browsing the reference offline,
from within the Godot editor. To do so, go to Help -> Search or press from within the Godot editor. To do so, go to Help -> Search or press
:kbd:`F1`. :kbd:`F1`.
.. image:: img/manual_class_reference_search.png ![](img/manual_class_reference_search.png)
To browse it online, head to the manual's `Class Reference <toc-class-ref>` To browse it online, head to the manual's `Class Reference <toc-class-ref>`
section. section.
@ -42,7 +42,7 @@ A class reference's page tells you:
links to jump to parent classes and see the properties and methods a type links to jump to parent classes and see the properties and methods a type
inherits. inherits.
.. image:: img/manual_class_reference_inheritance.png ![](img/manual_class_reference_inheritance.png)
2. A summary of the class's role and use cases. 2. A summary of the class's role and use cases.
@ -116,7 +116,7 @@ information:
the code you write affects nodes in your scenes. As a result, you should the code you write affects nodes in your scenes. As a result, you should
think of those scenes as part of your source code. think of those scenes as part of your source code.
.. image:: img/key_concepts_scene_tree.png ![](img/key_concepts_scene_tree.png)
Also, please don't take a picture with your phone, the low quality and screen Also, please don't take a picture with your phone, the low quality and screen
reflections can make it hard to understand the image. Your operating system reflections can make it hard to understand the image. Your operating system

40
getting_started/step_by_step/instancing.md
View File

@ -18,13 +18,13 @@ Here's an example of a ball. It's composed of a `RigidBody2D
and bounce on walls, a `Sprite` node, and a and bounce on walls, a `Sprite` node, and a
`CollisionShape2D`. `CollisionShape2D`.
.. image:: img/instancing_ball_scene.png ![](img/instancing_ball_scene.png)
Once you saved a scene, it works as a blueprint: you can reproduce it in other Once you saved a scene, it works as a blueprint: you can reproduce it in other
scenes as many times as you'd like. Replicating an object from a template like scenes as many times as you'd like. Replicating an object from a template like
this is called **instancing**. this is called **instancing**.
.. image:: img/instancing_ball_instances_example.png ![](img/instancing_ball_instances_example.png)
As we mentioned in the previous part, instanced scenes behave like a node: the As we mentioned in the previous part, instanced scenes behave like a node: the
editor hides their content by default. When you instance the Ball, you only see editor hides their content by default. When you instance the Ball, you only see
@ -45,44 +45,44 @@ you to download the ball's sample project we prepared for you:
Extract the archive on your computer. Then, open Godot, and in the project Extract the archive on your computer. Then, open Godot, and in the project
manager, click the Import button to import the project. manager, click the Import button to import the project.
.. image:: img/instancing_import_button.png ![](img/instancing_import_button.png)
In the pop-up that appears, click the browse button and navigate to the folder In the pop-up that appears, click the browse button and navigate to the folder
you extracted. you extracted.
.. image:: img/instancing_import_browse.png ![](img/instancing_import_browse.png)
Double-click the `project.godot` file to open it. Double-click the `project.godot` file to open it.
.. image:: img/instancing_import_project_file.png ![](img/instancing_import_project_file.png)
Finally, click the Import & Edit button. Finally, click the Import & Edit button.
.. image:: img/instancing_import_and_edit_button.png ![](img/instancing_import_and_edit_button.png)
The project contains two packed scenes: `Main.tscn`, containing walls against The project contains two packed scenes: `Main.tscn`, containing walls against
which the ball collides, and `Ball.tscn`. The Main scene should open which the ball collides, and `Ball.tscn`. The Main scene should open
automatically. automatically.
.. image:: img/instancing_main_scene.png ![](img/instancing_main_scene.png)
Let's add a ball as a child of the Main node. In the Scene dock, select the Main Let's add a ball as a child of the Main node. In the Scene dock, select the Main
node. Then, click the link icon at the top of the scene dock. This button allows node. Then, click the link icon at the top of the scene dock. This button allows
you to add an instance of a scene as a child of the currently selected node. you to add an instance of a scene as a child of the currently selected node.
.. image:: img/instancing_scene_link_button.png ![](img/instancing_scene_link_button.png)
Double-click the ball scene to instance it. Double-click the ball scene to instance it.
.. image:: img/instancing_instance_child_window.png ![](img/instancing_instance_child_window.png)
The ball appears in the top-left corner of the viewport. The ball appears in the top-left corner of the viewport.
.. image:: img/instancing_ball_instanced.png ![](img/instancing_ball_instanced.png)
Click on it and drag it towards the center of the view. Click on it and drag it towards the center of the view.
.. image:: img/instancing_ball_moved.png ![](img/instancing_ball_moved.png)
Play the game by pressing F5. You should see it fall. Play the game by pressing F5. You should see it fall.
@ -90,11 +90,11 @@ Now, we want to create more instances of the Ball node. With the ball still
selected, press :kbd:`Ctrl-D` (:kbd:`Cmd-D` on macOS) to call the duplicate selected, press :kbd:`Ctrl-D` (:kbd:`Cmd-D` on macOS) to call the duplicate
command. Click and drag to move the new ball to a different location. command. Click and drag to move the new ball to a different location.
.. image:: img/instancing_ball_duplicated.png ![](img/instancing_ball_duplicated.png)
You can repeat this process until you have several in the scene. You can repeat this process until you have several in the scene.
.. image:: img/instancing_main_scene_with_balls.png ![](img/instancing_main_scene_with_balls.png)
Play the game again. You should now see every ball fall independently from one Play the game again. You should now see every ball fall independently from one
another. This is what instances do. Each is an independent reproduction of a another. This is what instances do. Each is an independent reproduction of a
@ -117,12 +117,12 @@ There is more to instances. With this feature, you can:
Let's try this. Open `Ball.tscn` and select the Ball node. In the Inspector on Let's try this. Open `Ball.tscn` and select the Ball node. In the Inspector on
the right, click on the PhysicsMaterial property to expand it. the right, click on the PhysicsMaterial property to expand it.
.. image:: img/instancing_physics_material_expand.png ![](img/instancing_physics_material_expand.png)
Set its Bounce property to `2` by clicking on the number field, typing `2`, Set its Bounce property to `2` by clicking on the number field, typing `2`,
and pressing :kbd:`Enter`. and pressing :kbd:`Enter`.
.. image:: img/instancing_property_bounce_updated.png ![](img/instancing_property_bounce_updated.png)
Play the game by pressing :kbd:`F5` and notice how all balls now bounce a lot Play the game by pressing :kbd:`F5` and notice how all balls now bounce a lot
more. As the Ball scene is a template for all instances, modifying it and saving more. As the Ball scene is a template for all instances, modifying it and saving
@ -131,16 +131,16 @@ causes all instances to update accordingly.
Let's now adjust an individual instance. Head back to the Main scene by clicking Let's now adjust an individual instance. Head back to the Main scene by clicking
on the corresponding tab above the viewport. on the corresponding tab above the viewport.
.. image:: img/instancing_scene_tabs.png ![](img/instancing_scene_tabs.png)
Select one of the instanced Ball nodes and, in the Inspector, set its Gravity Select one of the instanced Ball nodes and, in the Inspector, set its Gravity
Scale value to `10`. Scale value to `10`.
.. image:: img/instancing_property_gravity_scale.png ![](img/instancing_property_gravity_scale.png)
A grey "revert" button appears next to the adjusted property. A grey "revert" button appears next to the adjusted property.
.. image:: img/instancing_property_revert_icon.png ![](img/instancing_property_revert_icon.png)
This icon indicates you are overriding a value from the source packed scene. This icon indicates you are overriding a value from the source packed scene.
Even if you modify the property in the original scene, the value override will Even if you modify the property in the original scene, the value override will
@ -172,7 +172,7 @@ and structure your code around them.
For example, you could break down a shooter game like so: For example, you could break down a shooter game like so:
.. image:: img/instancing_diagram_shooter.png ![](img/instancing_diagram_shooter.png)
You can come up with a diagram like this for almost any type of game. Each You can come up with a diagram like this for almost any type of game. Each
rectangle represents an entity that's visible in the game from the player's rectangle represents an entity that's visible in the game from the player's
@ -191,7 +191,7 @@ scene instantiation means you need little other architectural code.
Here's the example of a scene diagram for an open-world game with tons of assets Here's the example of a scene diagram for an open-world game with tons of assets
and nested elements: and nested elements:
.. image:: img/instancing_diagram_open_world.png ![](img/instancing_diagram_open_world.png)
Imagine we started by creating the room. We could make a couple of different Imagine we started by creating the room. We could make a couple of different
room scenes, with unique arrangements of furniture in them. Later, we could make room scenes, with unique arrangements of furniture in them. Later, we could make

36
getting_started/step_by_step/nodes_and_scenes.md
View File

@ -16,7 +16,7 @@ Nodes
ingredients in a recipe. There are dozens of kinds that can display an image, ingredients in a recipe. There are dozens of kinds that can display an image,
play a sound, represent a camera, and much more. play a sound, represent a camera, and much more.
.. image:: img/nodes_and_scenes_nodes.png ![](img/nodes_and_scenes_nodes.png)
All nodes have the following attributes: All nodes have the following attributes:
@ -32,7 +32,7 @@ combining them produces more complex behavior. As we saw before, you can build a
playable character the camera follows using a kinematic body node named playable character the camera follows using a kinematic body node named
"Character", a sprite node, a camera node, and a collision shape node. "Character", a sprite node, a camera node, and a collision shape node.
.. image:: img/nodes_and_scenes_character_nodes.png ![](img/nodes_and_scenes_character_nodes.png)
Scenes Scenes
------ ------
@ -46,7 +46,7 @@ Scenes allow you to structure your game's code however you want. You can
**compose nodes** to create custom and complex node types, like a game character **compose nodes** to create custom and complex node types, like a game character
that runs and jumps, a life bar, a chest with which you can interact, and more. that runs and jumps, a life bar, a chest with which you can interact, and more.
.. image:: img/nodes_and_scenes_3d_scene_example.png ![](img/nodes_and_scenes_3d_scene_example.png)
The Godot editor essentially is a **scene editor**. It has plenty of tools for The Godot editor essentially is a **scene editor**. It has plenty of tools for
editing 2D and 3D scenes, as well as user interfaces. A Godot project can editing 2D and 3D scenes, as well as user interfaces. A Godot project can
@ -68,7 +68,7 @@ Let's create our first scene with a single node. To do so, you will need to
create a new project first. After opening the project, you should see an empty create a new project first. After opening the project, you should see an empty
editor. editor.
.. image:: img/nodes_and_scenes_01_empty_editor.png ![](img/nodes_and_scenes_01_empty_editor.png)
In an empty scene, the Scene dock on the left shows several options to add a In an empty scene, the Scene dock on the left shows several options to add a
root node quickly. "2D Scene" adds a Node2D node, "3D Scene" adds a Spatial root node quickly. "2D Scene" adds a Node2D node, "3D Scene" adds a Spatial
@ -83,20 +83,20 @@ text on the screen.
Press the "Add Child Node" button or "Other Node" to create a root node. Press the "Add Child Node" button or "Other Node" to create a root node.
.. image:: img/nodes_and_scenes_02_scene_dock.png ![](img/nodes_and_scenes_02_scene_dock.png)
The Create Node dialog opens, showing the long list of available nodes. The Create Node dialog opens, showing the long list of available nodes.
.. image:: img/nodes_and_scenes_03_create_node_window.png ![](img/nodes_and_scenes_03_create_node_window.png)
Select the Label node. You can type its name to filter down the list. Select the Label node. You can type its name to filter down the list.
.. image:: img/nodes_and_scenes_04_create_label_window.png ![](img/nodes_and_scenes_04_create_label_window.png)
Click on the Label node to select it and click the Create button at the bottom Click on the Label node to select it and click the Create button at the bottom
of the window. of the window.
.. image:: img/nodes_and_scenes_05_editor_with_label.png ![](img/nodes_and_scenes_05_editor_with_label.png)
A lot happens when you add a scene's first node. The scene changes to the 2D A lot happens when you add a scene's first node. The scene changes to the 2D
workspace because Label is a 2D node type. The Label appears, selected, in the workspace because Label is a 2D node type. The Label appears, selected, in the
@ -112,19 +112,19 @@ The next step is to change the Label's "Text" property. Let's change it to
Head to the Inspector dock on the right of the viewport. Click inside the field Head to the Inspector dock on the right of the viewport. Click inside the field
below the Text property and type "Hello World". below the Text property and type "Hello World".
.. image:: img/nodes_and_scenes_06_label_text.png ![](img/nodes_and_scenes_06_label_text.png)
You will see the text draw in the viewport as you type. You will see the text draw in the viewport as you type.
You can move your Label node in the viewport by selecting the move tool in the You can move your Label node in the viewport by selecting the move tool in the
toolbar. toolbar.
.. image:: img/nodes_and_scenes_07_move_tool.png ![](img/nodes_and_scenes_07_move_tool.png)
With the Label selected, click and drag anywhere in the viewport to With the Label selected, click and drag anywhere in the viewport to
move it to the center of the view delimited by the rectangle. move it to the center of the view delimited by the rectangle.
.. image:: img/nodes_and_scenes_08_hello_world_text.png ![](img/nodes_and_scenes_08_hello_world_text.png)
Running the scene Running the scene
----------------- -----------------
@ -132,16 +132,16 @@ Running the scene
Everything's ready to run the scene! Press the Play Scene button in the Everything's ready to run the scene! Press the Play Scene button in the
top-right of the screen or press :kbd:`F6` (:kbd:`Cmd + R` on macOS). top-right of the screen or press :kbd:`F6` (:kbd:`Cmd + R` on macOS).
.. image:: img/nodes_and_scenes_09_play_scene_button.png ![](img/nodes_and_scenes_09_play_scene_button.png)
A popup invites you to save the scene, which is required to run it. A popup invites you to save the scene, which is required to run it.
.. image:: img/nodes_and_scenes_10_save_scene_popup.png ![](img/nodes_and_scenes_10_save_scene_popup.png)
Click the Yes button, and in the file browser that appears, press the Save Click the Yes button, and in the file browser that appears, press the Save
button to save it as "Label.tscn". button to save it as "Label.tscn".
.. image:: img/nodes_and_scenes_11_save_scene_as.png ![](img/nodes_and_scenes_11_save_scene_as.png)
.. note:: The Save Scene As dialog, like other file dialogs in the editor, only .. note:: The Save Scene As dialog, like other file dialogs in the editor, only
allows you to save files inside the project. The `res://` path at allows you to save files inside the project. The `res://` path at
@ -151,7 +151,7 @@ button to save it as "Label.tscn".
The application should open in a new window and display the text "Hello World". The application should open in a new window and display the text "Hello World".
.. image:: img/nodes_and_scenes_12_final_result.png ![](img/nodes_and_scenes_12_final_result.png)
Close the window or press :kbd:`F8` to quit the running scene. Close the window or press :kbd:`F8` to quit the running scene.
@ -168,16 +168,16 @@ To run our test scene, we used the Play Scene button. Another button next to it
allows you to set and run the project's main scene. You can press :kbd:`F5` allows you to set and run the project's main scene. You can press :kbd:`F5`
(:kbd:`Cmd + B` on macOS) to do so. (:kbd:`Cmd + B` on macOS) to do so.
.. image:: img/nodes_and_scenes_13_play_button.png ![](img/nodes_and_scenes_13_play_button.png)
A popup window appears and invites you to select the main scene. A popup window appears and invites you to select the main scene.
.. image:: img/nodes_and_scenes_14_main_scene_popup.png ![](img/nodes_and_scenes_14_main_scene_popup.png)
Click the Select button, and in the file dialog that appears, double click on Click the Select button, and in the file dialog that appears, double click on
Label.tscn. Label.tscn.
.. image:: img/nodes_and_scenes_15_select_main_scene.png ![](img/nodes_and_scenes_15_select_main_scene.png)
The demo should run again. Moving forward, every time you run the project, Godot The demo should run again. Moving forward, every time you run the project, Godot
will use this scene as a starting point. will use this scene as a starting point.

26
getting_started/step_by_step/scripting_first_script.md
View File

@ -23,7 +23,7 @@ circles using GDScript. As we mentioned `in the introduction
<toc-learn-introduction>`, we assume you have programming foundations. <toc-learn-introduction>`, we assume you have programming foundations.
The equivalent C# code has been included in another tab for convenience. The equivalent C# code has been included in another tab for convenience.
.. image:: img/scripting_first_script_rotating_godot.gif ![](img/scripting_first_script_rotating_godot.gif)
.. seealso:: To learn more about GDScript, its keywords, and its syntax, head to .. seealso:: To learn more about GDScript, its keywords, and its syntax, head to
the `GDScript reference<doc_gdscript>`. the `GDScript reference<doc_gdscript>`.
@ -42,33 +42,33 @@ community.
We need to create a Sprite node to display it in the game. In the Scene dock, We need to create a Sprite node to display it in the game. In the Scene dock,
click the Other Node button. click the Other Node button.
.. image:: img/scripting_first_script_click_other_node.png ![](img/scripting_first_script_click_other_node.png)
Type "Sprite" in the search bar to filter nodes and double-click on Sprite to Type "Sprite" in the search bar to filter nodes and double-click on Sprite to
create the node. create the node.
.. image:: img/scripting_first_script_add_sprite_node.png ![](img/scripting_first_script_add_sprite_node.png)
Your Scene tab should now only have a Sprite node. Your Scene tab should now only have a Sprite node.
.. image:: img/scripting_first_script_scene_tree.png ![](img/scripting_first_script_scene_tree.png)
A Sprite node needs a texture to display. In the Inspector on the right, you can A Sprite node needs a texture to display. In the Inspector on the right, you can
see that the Texture property says "[empty]". To display the Godot icon, click see that the Texture property says "[empty]". To display the Godot icon, click
and drag the file `icon.png` from the FileSystem dock onto the Texture slot. and drag the file `icon.png)` from the FileSystem dock onto the Texture slot.
.. image:: img/scripting_first_script_setting_texture.png ![](img/scripting_first_script_setting_texture.png)
.. note:: .. note::
You can create Sprite nodes automatically by dragging and dropping images on You can create Sprite nodes automatically by dragging and dropping images on
the viewport. the viewport.
.. image:: img/scripting_first_script_dragging_sprite.png ![](img/scripting_first_script_dragging_sprite.png)
Then, click and drag the icon in the viewport to center it in the game view. Then, click and drag the icon in the viewport to center it in the game view.
.. image:: img/scripting_first_script_centering_sprite.png ![](img/scripting_first_script_centering_sprite.png)
Creating a new script Creating a new script
--------------------- ---------------------
@ -76,7 +76,7 @@ Creating a new script
To create and attach a new script to our node, right-click on Sprite in the To create and attach a new script to our node, right-click on Sprite in the
scene dock and select "Attach Script". scene dock and select "Attach Script".
.. image:: img/scripting_first_script_attach_script.png ![](img/scripting_first_script_attach_script.png)
The Attach Node Script window appears. It allows you to select the script's The Attach Node Script window appears. It allows you to select the script's
language and file path, among other options. language and file path, among other options.
@ -84,7 +84,7 @@ language and file path, among other options.
Change the Template from Default to Empty to start with a clean file. Leave the Change the Template from Default to Empty to start with a clean file. Leave the
other options by default and click the Create button to create the script. other options by default and click the Create button to create the script.
.. image:: img/scripting_first_script_attach_node_script.png ![](img/scripting_first_script_attach_node_script.png)
The Script workspace should appear with your new `Sprite.gd` file open and the The Script workspace should appear with your new `Sprite.gd` file open and the
following line of code: following line of code:
@ -147,7 +147,7 @@ Save the scene if you haven't already, then press :kbd:`F6` (:kbd:`Cmd + R` on m
to run it. Look at the **Output** bottom panel that expands. to run it. Look at the **Output** bottom panel that expands.
It should display "Hello, world!". It should display "Hello, world!".
.. image:: img/scripting_first_script_print_hello_world.png ![](img/scripting_first_script_print_hello_world.png)
Delete the `_init()` function, so you're only left with the line `extends Delete the `_init()` function, so you're only left with the line `extends
Sprite`. Sprite`.
@ -224,7 +224,7 @@ our node and works with radians.
Run the scene to see the Godot icon turn in-place. Run the scene to see the Godot icon turn in-place.
.. image:: img/scripting_first_script_godot_turning_in_place.gif ![](img/scripting_first_script_godot_turning_in_place.gif)
Moving forward Moving forward
~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~
@ -258,7 +258,7 @@ representing a 2D vector.
Run the scene to see the Godot head run in circles. Run the scene to see the Godot head run in circles.
.. image:: img/scripting_first_script_rotating_godot.gif ![](img/scripting_first_script_rotating_godot.gif)
.. note:: Moving a node like that does not take into account colliding with .. note:: Moving a node like that does not take into account colliding with
walls or the floor. In `doc_your_first_2d_game`, you will learn walls or the floor. In `doc_your_first_2d_game`, you will learn

10
getting_started/step_by_step/scripting_languages.md
View File

@ -18,7 +18,7 @@ follows its parent by default. Imagine you want the camera to shake when the pla
takes damage. As this feature is not built into Godot, you would attach a script takes damage. As this feature is not built into Godot, you would attach a script
to the Camera2D node and code the shake. to the Camera2D node and code the shake.
.. image:: img/scripting_camera_shake.gif ![](img/scripting_camera_shake.gif)
Available scripting languages Available scripting languages
----------------------------- -----------------------------
@ -55,7 +55,7 @@ language specifically for Godot and the needs of game developers. It has a
lightweight and straightforward syntax and provides the tightest integration lightweight and straightforward syntax and provides the tightest integration
with Godot. with Godot.
.. image:: img/scripting_gdscript.png ![](img/scripting_gdscript.png)
For C#, you will need an external code editor like For C#, you will need an external code editor like
`VSCode <https://code.visualstudio.com/>`_ or Visual Studio. While C# support is `VSCode <https://code.visualstudio.com/>`_ or Visual Studio. While C# support is
@ -116,7 +116,7 @@ amongst game developers, we officially support it. C# is a mature and flexible
language with tons of libraries written for it. We could add support for it language with tons of libraries written for it. We could add support for it
thanks to a generous donation from Microsoft. thanks to a generous donation from Microsoft.
.. image:: img/scripting_csharp.png ![](img/scripting_csharp.png)
C# offers a good tradeoff between performance and ease of use, although you C# offers a good tradeoff between performance and ease of use, although you
should be aware of its garbage collector. should be aware of its garbage collector.
@ -153,7 +153,7 @@ VisualScript
programming language where you connect blocks. It can be a great tool for programming language where you connect blocks. It can be a great tool for
non-programmers like game designers and artists. non-programmers like game designers and artists.
.. image:: img/scripting_visualscript.png ![](img/scripting_visualscript.png)
You can use other languages to create custom blocks that are specific to your You can use other languages to create custom blocks that are specific to your
game, for example, to script AIs, quests, or dialogues. That's where the game, for example, to script AIs, quests, or dialogues. That's where the
@ -174,7 +174,7 @@ C and C++ via GDNative
GDNative allows you to write game code in C or C++ without needing to recompile GDNative allows you to write game code in C or C++ without needing to recompile
or even restart Godot. or even restart Godot.
.. image:: img/scripting_cpp.png ![](img/scripting_cpp.png)
You can use any version of the language or mix compiler brands and versions for You can use any version of the language or mix compiler brands and versions for
the generated shared libraries, thanks to our use of an internal C API Bridge. the generated shared libraries, thanks to our use of an internal C API Bridge.

4
getting_started/step_by_step/scripting_player_input.md
View File

@ -11,7 +11,7 @@ Building upon the previous lesson `doc_scripting_first_script`, let's look
at another important feature of any game: giving control to the player. at another important feature of any game: giving control to the player.
To add this, we need to modify our `Sprite.gd` code. To add this, we need to modify our `Sprite.gd` code.
.. image:: img/scripting_first_script_moving_with_input.gif ![](img/scripting_first_script_moving_with_input.gif)
You have two main tools to process the player's input in Godot: You have two main tools to process the player's input in Godot:
@ -122,7 +122,7 @@ gdscript GDScript
If you run the scene, you should now be able to rotate with the left and right If you run the scene, you should now be able to rotate with the left and right
arrow keys and move forward by pressing :kbd:`Up`. arrow keys and move forward by pressing :kbd:`Up`.
.. image:: img/scripting_first_script_moving_with_input.gif ![](img/scripting_first_script_moving_with_input.gif)
Summary Summary
------- -------

38
getting_started/step_by_step/signals.md
View File

@ -43,46 +43,46 @@ lessons.
Create a new scene by going to the menu Scene -> New Scene. Create a new scene by going to the menu Scene -> New Scene.
.. image:: img/signals_01_new_scene.png ![](img/signals_01_new_scene.png)
In the Scene dock, click the 2D Scene button. This will add a Node2D as our In the Scene dock, click the 2D Scene button. This will add a Node2D as our
root. root.
.. image:: img/signals_02_2d_scene.png ![](img/signals_02_2d_scene.png)
In the FileSystem dock, click and drag the `Sprite.tscn` file you saved In the FileSystem dock, click and drag the `Sprite.tscn` file you saved
previously onto the Node2D to instantiate it. previously onto the Node2D to instantiate it.
.. image:: img/signals_03_dragging_scene.png ![](img/signals_03_dragging_scene.png)
We want to add another node as a sibling of the Sprite. To do so, right-click on We want to add another node as a sibling of the Sprite. To do so, right-click on
Node2D and select Add Child Node. Node2D and select Add Child Node.
.. image:: img/signals_04_add_child_node.png ![](img/signals_04_add_child_node.png)
Search for the Button node type and add it. Search for the Button node type and add it.
.. image:: img/signals_05_add_button.png ![](img/signals_05_add_button.png)
The node is small by default. Click and drag on the bottom-right handle of the The node is small by default. Click and drag on the bottom-right handle of the
Button in the viewport to resize it. Button in the viewport to resize it.
.. image:: img/signals_06_drag_button.png ![](img/signals_06_drag_button.png)
If you don't see the handles, ensure the select tool is active in the toolbar. If you don't see the handles, ensure the select tool is active in the toolbar.
.. image:: img/signals_07_select_tool.png ![](img/signals_07_select_tool.png)
Click and drag on the button itself to move it closer to the sprite. Click and drag on the button itself to move it closer to the sprite.
You can also write a label on the Button by editing its Text property in the You can also write a label on the Button by editing its Text property in the
Inspector. Enter "Toggle motion". Inspector. Enter "Toggle motion".
.. image:: img/signals_08_toggle_motion_text.png ![](img/signals_08_toggle_motion_text.png)
Your scene tree and viewport should look like this. Your scene tree and viewport should look like this.
.. image:: img/signals_09_scene_setup.png ![](img/signals_09_scene_setup.png)
Save your newly created scene. You can then run it with :kbd:`F6`. Save your newly created scene. You can then run it with :kbd:`F6`.
At the moment, the button will be visible, but nothing will happen if you At the moment, the button will be visible, but nothing will happen if you
@ -98,15 +98,15 @@ have a script attached to the Sprite node, which we do from the previous lesson.
You can connect signals in the Node dock. Select the Button node and, on the You can connect signals in the Node dock. Select the Button node and, on the
right side of the editor, click on the tab named "Node" next to the Inspector. right side of the editor, click on the tab named "Node" next to the Inspector.
.. image:: img/signals_10_node_dock.png ![](img/signals_10_node_dock.png)
The dock displays a list of signals available on the selected node. The dock displays a list of signals available on the selected node.
.. image:: img/signals_11_pressed_signals.png ![](img/signals_11_pressed_signals.png)
Double-click the "pressed" signal to open the node connection window. Double-click the "pressed" signal to open the node connection window.
.. image:: img/signals_12_node_connection.png ![](img/signals_12_node_connection.png)
There, you can connect the signal to the Sprite node. The node needs a receiver There, you can connect the signal to the Sprite node. The node needs a receiver
method, a function that Godot will call when the Button emits the signal. The method, a function that Godot will call when the Button emits the signal. The
@ -119,7 +119,7 @@ editor generates one for you. By convention, we name these callback methods
modes. The simple one only allows you to connect to nodes that have a modes. The simple one only allows you to connect to nodes that have a
script attached to them and creates a new callback function on them. script attached to them and creates a new callback function on them.
.. image:: img/signals_advanced_connection_window.png ![](img/signals_advanced_connection_window.png)
The advanced view lets you connect to any node and any built-in The advanced view lets you connect to any node and any built-in
function, add arguments to the callback, and set options. You can function, add arguments to the callback, and set options. You can
@ -130,12 +130,12 @@ Click the Connect button to complete the signal connection and jump to the
Script workspace. You should see the new method with a connection icon in the Script workspace. You should see the new method with a connection icon in the
left margin. left margin.
.. image:: img/signals_13_signals_connection_icon.png ![](img/signals_13_signals_connection_icon.png)
If you click the icon, a window pops up and displays information about the If you click the icon, a window pops up and displays information about the
connection. This feature is only available when connecting nodes in the editor. connection. This feature is only available when connecting nodes in the editor.
.. image:: img/signals_14_signals_connection_info.png ![](img/signals_14_signals_connection_info.png)
Let's replace the line with the `pass` keyword with code that'll toggle the Let's replace the line with the `pass` keyword with code that'll toggle the
node's motion. node's motion.
@ -208,16 +208,16 @@ In the Scene dock, right-click on the Sprite node and add a new child node.
Search for Timer and add the corresponding node. Your scene should now look like Search for Timer and add the corresponding node. Your scene should now look like
this. this.
.. image:: img/signals_15_scene_tree.png ![](img/signals_15_scene_tree.png)
With the Timer node selected, go to the Inspector and check the **Autostart** With the Timer node selected, go to the Inspector and check the **Autostart**
property. property.
.. image:: img/signals_18_timer_autostart.png ![](img/signals_18_timer_autostart.png)
Click the script icon next to Sprite to jump back to the scripting workspace. Click the script icon next to Sprite to jump back to the scripting workspace.
.. image:: img/signals_16_click_script.png ![](img/signals_16_click_script.png)
We need to do two operations to connect the nodes via code: We need to do two operations to connect the nodes via code:
@ -339,7 +339,7 @@ gdscript GDScript
Your signals work the same way as built-in ones: they appear in the Node tab and Your signals work the same way as built-in ones: they appear in the Node tab and
you can connect to them like any other. you can connect to them like any other.
.. image:: img/signals_17_custom_signal.png ![](img/signals_17_custom_signal.png)
To emit a signal in your scripts, call `emit_signal()`. To emit a signal in your scripts, call `emit_signal()`.

46
tutorials/2d/2d_lights_and_shadows.md
View File

@ -11,7 +11,7 @@ This tutorial explains how the 2D lighting works in the
It begins with a brief description of the resources used in the final demo and then describes how It begins with a brief description of the resources used in the final demo and then describes how
to make a scene like the demo step by step. to make a scene like the demo step by step.
.. image:: img/light_shadow_main.png ![](img/light_shadow_main.png)
All the resources for this tutorial can be found in the `official demo repository <https://github.com/godotengine/godot-demo-projects>`_ All the resources for this tutorial can be found in the `official demo repository <https://github.com/godotengine/godot-demo-projects>`_
on GitHub. I suggest you download it before starting. Alternatively, on GitHub. I suggest you download it before starting. Alternatively,
@ -25,19 +25,19 @@ For this demo we use four textures: two for the lights, one for the shadow caste
and one for the background. I've included links to them all here if you want to download them and one for the background. I've included links to them all here if you want to download them
separately from the demo. separately from the demo.
The first is the background image (`background.png <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/background.png>`_) The first is the background image (`background.png) <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/background.png)>`_)
used in the demo. You do not necessarily need a background, but we use one for the demo. used in the demo. You do not necessarily need a background, but we use one for the demo.
The second is a plain black image (`caster.png <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png>`_) The second is a plain black image (`caster.png) <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png)>`_)
to use as our shadow caster object. For a top down game this could be a wall or any to use as our shadow caster object. For a top down game this could be a wall or any
other object that casts a shadow. other object that casts a shadow.
Next is the light itself (`light.png <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/light.png>`_). Next is the light itself (`light.png) <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/light.png)>`_).
If you click the link you will notice how large it is. The image you use If you click the link you will notice how large it is. The image you use
for a light should cover the area you want your light to cover. This image is for a light should cover the area you want your light to cover. This image is
1024x1024 pixels, so you should use it to cover 1024x1024 pixels in your game. 1024x1024 pixels, so you should use it to cover 1024x1024 pixels in your game.
Lastly, we have the spotlight image (`spot.png <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/spot.png>`_). Lastly, we have the spotlight image (`spot.png) <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/spot.png)>`_).
The demo uses a blob to show where the light is and the larger light The demo uses a blob to show where the light is and the larger light
image to show the effect of the light upon the rest of the scene. image to show the effect of the light upon the rest of the scene.
@ -70,7 +70,7 @@ Lights
`Lights` cover the entire extent of their respective Texture. They use additive `Lights` cover the entire extent of their respective Texture. They use additive
blending to add the color of their texture to the scene. blending to add the color of their texture to the scene.
.. image:: img/light_shadow_light.png ![](img/light_shadow_light.png)
`Lights` have four `Modes`: `Add`, `Sub`, `Mix`, and `Mask`. `Lights` have four `Modes`: `Add`, `Sub`, `Mix`, and `Mask`.
@ -89,7 +89,7 @@ is the effect of the light), and a `Sprite` blob which is an image showing the
location of the light source. A child `Sprite` is not necessary to make a location of the light source. A child `Sprite` is not necessary to make a
`Light` work. `Light` work.
.. image:: img/light_shadow_light_blob.png ![](img/light_shadow_light_blob.png)
Shadows Shadows
------- -------
@ -113,13 +113,13 @@ the process of making a scene like the one found in the demo.
First add a `Sprite`_. For your game this can be any First add a `Sprite`_. For your game this can be any
background you choose. For this style of shadow it is most likely to be a floor texture. background you choose. For this style of shadow it is most likely to be a floor texture.
.. image:: img/light_shadow_background.png ![](img/light_shadow_background.png)
Next create three `Light2D's`_. You can alter their Next create three `Light2D's`_. You can alter their
color in the top section. By default shadows are turned off and the `mode` is set to `add`. This color in the top section. By default shadows are turned off and the `mode` is set to `add`. This
means that each light adds its own color to whatever is underneath. means that each light adds its own color to whatever is underneath.
.. image:: img/light_shadow_all_lights_no_blob.png ![](img/light_shadow_all_lights_no_blob.png)
Next add a child `Sprite` nodes, and set Next add a child `Sprite` nodes, and set
the `Sprite's`_. Each of these the `Sprite's`_. Each of these
@ -128,7 +128,7 @@ itself while the `Light` shows the effect that the light has on the scene. The
`LightOccluder2D's` `LightOccluder2D's`
node, which is why we want the blob to be centered on its parent `Light`. node, which is why we want the blob to be centered on its parent `Light`.
.. image:: img/light_shadow_all_lights.png ![](img/light_shadow_all_lights.png)
.. note:: The animations in the demo will not be covered here. See `doc_introduction_animation` .. note:: The animations in the demo will not be covered here. See `doc_introduction_animation`
for information on creating animations. for information on creating animations.
@ -140,7 +140,7 @@ This is why the demo uses a `CanvasModulate` in the scene. The
Add a `CanvasModulate` to the scene and set its color to `rgb(70, 70, 70)`. Add a `CanvasModulate` to the scene and set its color to `rgb(70, 70, 70)`.
This will make the scene sufficiently dark to see the effects of the lights distinctly. This will make the scene sufficiently dark to see the effects of the lights distinctly.
.. image:: img/light_shadow_ambient.png ![](img/light_shadow_ambient.png)
Now we add the shadow casters. Now we add the shadow casters.
@ -150,11 +150,11 @@ This way we can show and hide them all at the same time.
Each shadow caster is made of a `Sprite` Each shadow caster is made of a `Sprite`
child. For the demo the `Sprite` has a texture child. For the demo the `Sprite` has a texture
set to the `caster image <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png>`_ and nothing else. The child `LightOccluder2D` is where all the magic happens. In a set to the `caster image <https://raw.githubusercontent.com/godotengine/godot-demo-projects/master/2d/lights_and_shadows/caster.png)>`_ and nothing else. The child `LightOccluder2D` is where all the magic happens. In a
game the `Sprite` could be more than a black box; it could be an image of whatever object is casting game the `Sprite` could be more than a black box; it could be an image of whatever object is casting
the shadow: a wall, a magical chest, or anything else. the shadow: a wall, a magical chest, or anything else.
.. image:: img/light_shadow_sprites.png ![](img/light_shadow_sprites.png)
`LightOccluder2Ds` tell the game what shape the occluder has. They hold `LightOccluder2Ds` tell the game what shape the occluder has. They hold
an `OccluderPolygon2D`, which is a container an `OccluderPolygon2D`, which is a container
@ -173,15 +173,15 @@ To illustrate the difference, here is an image of a `LightOccluder2D` with `Clos
set to `off` in the corresponding `OccluderPolygon2D`, so that the set to `off` in the corresponding `OccluderPolygon2D`, so that the
lines of the polygon can be seen: lines of the polygon can be seen:
.. image:: img/light_shadow_cull_disabled.png ![](img/light_shadow_cull_disabled.png)
.. note:: `Cull Mode` is set to `Disabled`. All three lines cast shadows. .. note:: `Cull Mode` is set to `Disabled`. All three lines cast shadows.
.. image:: img/light_shadow_cull_clockwise.png ![](img/light_shadow_cull_clockwise.png)
.. note:: `Cull Mode` is set to `Clockwise`. Only the top and right lines cast shadows. .. note:: `Cull Mode` is set to `Clockwise`. Only the top and right lines cast shadows.
.. image:: img/light_shadow_cull_counter_clockwise.png ![](img/light_shadow_cull_counter_clockwise.png)
.. note:: `Cull Mode` is set to `Counter-Clockwise`. Only the bottom line casts a shadow. .. note:: `Cull Mode` is set to `Counter-Clockwise`. Only the bottom line casts a shadow.
If `Closed` was set to `on` there would be an additional vertical line on the If `Closed` was set to `on` there would be an additional vertical line on the
@ -191,7 +191,7 @@ When you have added the `LightOccluder2Ds` the shadows still won't
appear. You need to go back into the `Light2Ds` and under the Shadow appear. You need to go back into the `Light2Ds` and under the Shadow
section set `Enable` to `on`. This turns on shadows with hard edges like in the image below. section set `Enable` to `on`. This turns on shadows with hard edges like in the image below.
.. image:: img/light_shadow_filter0_pcf0.png ![](img/light_shadow_filter0_pcf0.png)
To give the shadows that nice, soft edge look we set the variables `filter`, `filter smooth`, and To give the shadows that nice, soft edge look we set the variables `filter`, `filter smooth`, and
`gradient length`. Godot supports `Percentage Closer Filtering <https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch11.html>`_ `gradient length`. Godot supports `Percentage Closer Filtering <https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch11.html>`_
@ -200,12 +200,12 @@ a smooth shadow effect. The higher the number of samples the smoother the shadow
look, but the slower it will run. That is why Godot provides 3-13 samples by default and allows you to choose. look, but the slower it will run. That is why Godot provides 3-13 samples by default and allows you to choose.
The demo uses PCF7. The demo uses PCF7.
.. image:: img/light_shadow_normal.png ![](img/light_shadow_normal.png)
.. note:: This is a shadow rendered with the demo's settings. `gradient length` is set .. note:: This is a shadow rendered with the demo's settings. `gradient length` is set
to `1.3`, `filter smooth` is set to `11.1`, and `filter` is set to `PCF7`. to `1.3`, `filter smooth` is set to `11.1`, and `filter` is set to `PCF7`.
.. image:: img/light_shadow_pcf13.png ![](img/light_shadow_pcf13.png)
.. note:: `filter` is set to `PCF13`. Notice how the shadow becomes wider, this is because the .. note:: `filter` is set to `PCF13`. Notice how the shadow becomes wider, this is because the
distance between samples is based on the variable `filter smooth`. distance between samples is based on the variable `filter smooth`.
@ -215,14 +215,14 @@ This dictates how far apart the samples are. If you want the soft area to extend
the size of `filter smooth`. However, with few samples and a large filter smooth, you can see lines the size of `filter smooth`. However, with few samples and a large filter smooth, you can see lines
forming between the samples. forming between the samples.
.. image:: img/light_shadow_filter30.png ![](img/light_shadow_filter30.png)
.. note:: `filter smooth` is set to `30`. .. note:: `filter smooth` is set to `30`.
The different `Light` nodes in the demo use different values for filter smooth. The different `Light` nodes in the demo use different values for filter smooth.
Play around with it and see what you like. Play around with it and see what you like.
.. image:: img/light_shadow_filter0.png ![](img/light_shadow_filter0.png)
.. note:: `filter smooth` is set to `0`. .. note:: `filter smooth` is set to `0`.
@ -230,11 +230,11 @@ Lastly, there is the variable `gradient length`. For some smooth shadows it is p
shadow start immediately on the object, as this produces a hard edge. The gradient length variable creates shadow start immediately on the object, as this produces a hard edge. The gradient length variable creates
a smooth gradient to begin the shadow to reduce the effect of the hard edge. a smooth gradient to begin the shadow to reduce the effect of the hard edge.
.. image:: img/light_shadow_grad0.png ![](img/light_shadow_grad0.png)
.. note:: `gradient length` is set to `0`. .. note:: `gradient length` is set to `0`.
.. image:: img/light_shadow_grad10.png ![](img/light_shadow_grad10.png)
.. note:: `gradient length` is set to `10`. .. note:: `gradient length` is set to `10`.

10
tutorials/2d/2d_meshes.md
View File

@ -33,20 +33,20 @@ Converting Sprites to 2D meshes
You can take advantage of this optimization by converting a `Sprite` to a `MeshInstance2D`. You can take advantage of this optimization by converting a `Sprite` to a `MeshInstance2D`.
Start with an image that contains large amounts of transparency on the edges, like this tree: Start with an image that contains large amounts of transparency on the edges, like this tree:
.. image:: img/mesh2d1.png ![](img/mesh2d1.png)
Put it in a `Sprite` and select "Convert to 2D Mesh" from the menu: Put it in a `Sprite` and select "Convert to 2D Mesh" from the menu:
.. image:: img/mesh2d2.png ![](img/mesh2d2.png)
A dialog will appear, showing a preview of how the 2D mesh will be created: A dialog will appear, showing a preview of how the 2D mesh will be created:
.. image:: img/mesh2d3.png ![](img/mesh2d3.png)
The default values are good enough for many cases, but you can change growth and simplification according to your needs: The default values are good enough for many cases, but you can change growth and simplification according to your needs:
.. image:: img/mesh2d4.png ![](img/mesh2d4.png)
Finally, push the `Convert 2D Mesh` button and your Sprite will be replaced: Finally, push the `Convert 2D Mesh` button and your Sprite will be replaced:
.. image:: img/mesh2d5.png ![](img/mesh2d5.png)

12
tutorials/2d/2d_movement.md
View File

@ -19,13 +19,13 @@ Setup
----- -----
Each example below uses the same scene setup. Start with a `KinematicBody2D` with two Each example below uses the same scene setup. Start with a `KinematicBody2D` with two
children: `Sprite` and `CollisionShape2D`. You can use the Godot icon ("icon.png") children: `Sprite` and `CollisionShape2D`. You can use the Godot icon ("icon.png)")
for the Sprite's texture or use any other 2D image you have. for the Sprite's texture or use any other 2D image you have.
Open `Project -> Project Settings` and select the "Input Map" tab. Add the following Open `Project -> Project Settings` and select the "Input Map" tab. Add the following
input actions (see `InputEvent <doc_inputevent>` for details): input actions (see `InputEvent <doc_inputevent>` for details):
.. image:: img/movement_inputs.png ![](img/movement_inputs.png)
8-way movement 8-way movement
-------------- --------------
@ -34,7 +34,7 @@ In this scenario, you want the user to press the four directional keys (up/left/
or W/A/S/D) and move in the selected direction. The name "8-way movement" comes from the or W/A/S/D) and move in the selected direction. The name "8-way movement" comes from the
fact that the player can move diagonally by pressing two keys at the same time. fact that the player can move diagonally by pressing two keys at the same time.
.. image:: img/movement_8way.gif ![](img/movement_8way.gif)
Add a script to the kinematic body and add the following code: Add a script to the kinematic body and add the following code:
@ -88,7 +88,7 @@ This type of movement is sometimes called "Asteroids-style" because it resembles
how that classic arcade game worked. Pressing left/right rotates the character, how that classic arcade game worked. Pressing left/right rotates the character,
while up/down moves it forward or backward in whatever direction it's facing. while up/down moves it forward or backward in whatever direction it's facing.
.. image:: img/movement_rotate1.gif ![](img/movement_rotate1.gif)
gdscript GDScript gdscript GDScript
@ -135,7 +135,7 @@ This style of movement is a variation of the previous one. This time, the direct
is set by the mouse position instead of the keyboard. The character will always is set by the mouse position instead of the keyboard. The character will always
"look at" the mouse pointer. The forward/back inputs remain the same, however. "look at" the mouse pointer. The forward/back inputs remain the same, however.
.. image:: img/movement_rotate2.gif ![](img/movement_rotate2.gif)
gdscript GDScript gdscript GDScript
@ -176,7 +176,7 @@ Click-and-move
This last example uses only the mouse to control the character. Clicking This last example uses only the mouse to control the character. Clicking
on the screen will cause the player to move to the target location. on the screen will cause the player to move to the target location.
.. image:: img/movement_click.gif ![](img/movement_click.gif)
gdscript GDScript gdscript GDScript

36
tutorials/2d/2d_sprite_animation.md
View File

@ -26,7 +26,7 @@ In this scenario, you have a collection of images, each containing one of your
character's animation frames. For this example, we'll use the following character's animation frames. For this example, we'll use the following
animation: animation:
.. image:: img/2d_animation_run_preview.gif ![](img/2d_animation_run_preview.gif)
You can download the images here: You can download the images here:
:download:`run_animation.zip <files/run_animation.zip>` :download:`run_animation.zip <files/run_animation.zip>`
@ -34,7 +34,7 @@ You can download the images here:
Unzip the images and place them in your project folder. Set up your scene tree Unzip the images and place them in your project folder. Set up your scene tree
with the following nodes: with the following nodes:
.. image:: img/2d_animation_tree1.png ![](img/2d_animation_tree1.png)
.. note:: The root node could also be `Area2D` or .. note:: The root node could also be `Area2D` or
`RigidBody2D`. The animation will still be `RigidBody2D`. The animation will still be
@ -46,18 +46,18 @@ with the following nodes:
Now select the `AnimatedSprite` and in its *SpriteFrames* property, select Now select the `AnimatedSprite` and in its *SpriteFrames* property, select
"New SpriteFrames". "New SpriteFrames".
.. image:: img/2d_animation_new_spriteframes.png ![](img/2d_animation_new_spriteframes.png)
Click on the new SpriteFrames resource and you'll see a new panel appear at the Click on the new SpriteFrames resource and you'll see a new panel appear at the
bottom of the editor window: bottom of the editor window:
.. image:: img/2d_animation_spriteframes.png ![](img/2d_animation_spriteframes.png)
From the FileSystem dock on the left side, drag the 8 individual images into From the FileSystem dock on the left side, drag the 8 individual images into
the center part of the SpriteFrames panel. On the left side, change the name the center part of the SpriteFrames panel. On the left side, change the name
of the animation from "default" to "run". of the animation from "default" to "run".
.. image:: img/2d_animation_spriteframes_done.png ![](img/2d_animation_spriteframes_done.png)
Back in the Inspector, check the box for the *Playing* property. You should Back in the Inspector, check the box for the *Playing* property. You should
now see the animation playing in the viewport. However, it is a bit slow. To now see the animation playing in the viewport. However, it is a bit slow. To
@ -94,7 +94,7 @@ Sprite sheet with AnimatedSprite
You can also easily animate from a sprite sheet with the class `AnimatedSprite`. We will use this public domain sprite sheet: You can also easily animate from a sprite sheet with the class `AnimatedSprite`. We will use this public domain sprite sheet:
.. image:: img/2d_animation_frog_spritesheet.png ![](img/2d_animation_frog_spritesheet.png)
Right-click the image and choose "Save Image As" to download it, and then copy the image into your project folder. Right-click the image and choose "Save Image As" to download it, and then copy the image into your project folder.
@ -103,25 +103,25 @@ Set up your scene tree the same way you did previously when using individual ima
Click on the new SpriteFrames resource. This time, when the bottom panel appears, select "Add frames from a Sprite Sheet". Click on the new SpriteFrames resource. This time, when the bottom panel appears, select "Add frames from a Sprite Sheet".
.. image:: img/2d_animation_add_from_spritesheet.png ![](img/2d_animation_add_from_spritesheet.png)
You will be prompted to open a file. Select your sprite sheet. You will be prompted to open a file. Select your sprite sheet.
A new window will open, showing your sprite sheet. The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet. In this sprite sheet, we have four images horizontally and two images vertically. A new window will open, showing your sprite sheet. The first thing you will need to do is to change the number of vertical and horizontal images in your sprite sheet. In this sprite sheet, we have four images horizontally and two images vertically.
.. image:: img/2d_animation_spritesheet_select_rows.png ![](img/2d_animation_spritesheet_select_rows.png)
Next, select the frames from the sprite sheet that you want to include in your animation. We will select the top four, then click "Add 4 frames" to create the animation. Next, select the frames from the sprite sheet that you want to include in your animation. We will select the top four, then click "Add 4 frames" to create the animation.
.. image:: img/2d_animation_spritesheet_selectframes.png ![](img/2d_animation_spritesheet_selectframes.png)
You will now see your animation under the list of animations in the bottom panel. Double click on default to change the name of the animation to jump. You will now see your animation under the list of animations in the bottom panel. Double click on default to change the name of the animation to jump.
.. image:: img/2d_animation_spritesheet_animation.png ![](img/2d_animation_spritesheet_animation.png)
Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump! Finally, check Playing on the AnimatedSprite in the inspector to see your frog jump!
.. image:: img/2d_animation_play_spritesheet_animation.png ![](img/2d_animation_play_spritesheet_animation.png)
Sprite sheet with AnimationPlayer Sprite sheet with AnimationPlayer
@ -133,7 +133,7 @@ change from texture to texture with `AnimationPlayer`.
Consider this sprite sheet, which contains 6 frames of animation: Consider this sprite sheet, which contains 6 frames of animation:
.. image:: img/2d_animation_player-run.png ![](img/2d_animation_player-run.png)
Right-click the image and choose "Save Image As" to download, then copy the Right-click the image and choose "Save Image As" to download, then copy the
image into your project folder. image into your project folder.
@ -141,7 +141,7 @@ image into your project folder.
Our goal is to display these images one after another in a loop. Start by Our goal is to display these images one after another in a loop. Start by
setting up your scene tree: setting up your scene tree:
.. image:: img/2d_animation_tree2.png ![](img/2d_animation_tree2.png)
.. note:: The root node could also be `Area2D` or .. note:: The root node could also be `Area2D` or
`RigidBody2D`. The animation will still be `RigidBody2D`. The animation will still be
@ -156,7 +156,7 @@ expand the *Animation* section in the Inspector and set the *Hframes* to `6`.
*Hframes* and *Vframes* are the number of horizontal and vertical frames in *Hframes* and *Vframes* are the number of horizontal and vertical frames in
your sprite sheet. your sprite sheet.
.. image:: img/2d_animation_setframes.png ![](img/2d_animation_setframes.png)
Now try changing the value of the *Frame* property. You'll see that it ranges Now try changing the value of the *Frame* property. You'll see that it ranges
from `0` to `5` and the image displayed by the Sprite changes accordingly. from `0` to `5` and the image displayed by the Sprite changes accordingly.
@ -166,21 +166,21 @@ Select the `AnimationPlayer` and click the "Animation" button followed by
"New". Name the new animation "walk". Set the animation length to `0.6` and "New". Name the new animation "walk". Set the animation length to `0.6` and
click the "Loop" button so that our animation will repeat. click the "Loop" button so that our animation will repeat.
.. image:: img/2d_animation_new_animation.png ![](img/2d_animation_new_animation.png)
Now select the `Sprite` node and click the key icon to add a new track. Now select the `Sprite` node and click the key icon to add a new track.
.. image:: img/2d_animation_new_track.png ![](img/2d_animation_new_track.png)
Continue adding frames at each point in the timeline (`0.1` seconds by Continue adding frames at each point in the timeline (`0.1` seconds by
default), until you have all the frames from 0 to 5. You'll see the frames default), until you have all the frames from 0 to 5. You'll see the frames
actually appearing in the animation track: actually appearing in the animation track:
.. image:: img/2d_animation_full_animation.png ![](img/2d_animation_full_animation.png)
Press "Play" on the animation to see how it looks. Press "Play" on the animation to see how it looks.
.. image:: img/2d_animation_running.gif ![](img/2d_animation_running.gif)
Controlling an AnimationPlayer animation Controlling an AnimationPlayer animation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2
tutorials/2d/2d_transforms.md
View File

@ -52,7 +52,7 @@ Transform order
For a coordinate in CanvasItem local properties to become an actual For a coordinate in CanvasItem local properties to become an actual
screen coordinate, the following chain of transforms must be applied: screen coordinate, the following chain of transforms must be applied:
.. image:: img/viewport_transforms2.png ![](img/viewport_transforms2.png)
Transform functions Transform functions
------------------- -------------------

2
tutorials/2d/canvas_layers.md
View File

@ -52,7 +52,7 @@ counter and pause button can also be created at layer "1".
Here's a diagram of how it looks: Here's a diagram of how it looks:
.. image:: img/canvaslayers.png ![](img/canvaslayers.png)
CanvasLayers are independent of tree order, and they only depend on CanvasLayers are independent of tree order, and they only depend on
their layer number, so they can be instantiated when needed. their layer number, so they can be instantiated when needed.

4
tutorials/2d/custom_drawing_in_2d.md
View File

@ -186,7 +186,7 @@ gdscript GDScript
Result: Result:
.. image:: img/result_drawarc.png ![](img/result_drawarc.png)
Arc polygon function Arc polygon function
^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
@ -210,7 +210,7 @@ gdscript GDScript
draw_polygon(points_arc, colors) draw_polygon(points_arc, colors)
``` ```
.. image:: img/result_drawarc_poly.png ![](img/result_drawarc_poly.png)
Dynamic custom drawing Dynamic custom drawing
^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^

56
tutorials/2d/particle_systems_2d.md
View File

@ -31,7 +31,7 @@ are provided via node properties in CPUParticles2D (with the exception of the tr
You can convert a Particles2D node into a CPUParticles2D node by clicking on the node in the You can convert a Particles2D node into a CPUParticles2D node by clicking on the node in the
inspector, and selecting "Convert to CPUParticles2D" in the "Particles" menu of the toolbar. inspector, and selecting "Convert to CPUParticles2D" in the "Particles" menu of the toolbar.
.. image:: img/particles_convert.png ![](img/particles_convert.png)
The rest of this tutorial is going to use the Particles2D node. First, add a Particles2D The rest of this tutorial is going to use the Particles2D node. First, add a Particles2D
node to your scene. After creating that node you will notice that only a white dot was created, node to your scene. After creating that node you will notice that only a white dot was created,
@ -45,12 +45,12 @@ To add a process material to your particles node, go to `Process Material` in
your inspector panel. Click on the box next to `Material`, and from the dropdown your inspector panel. Click on the box next to `Material`, and from the dropdown
menu select `New ParticlesMaterial`. menu select `New ParticlesMaterial`.
.. image:: img/particles_material.png ![](img/particles_material.png)
Your Particles2D node should now be emitting Your Particles2D node should now be emitting
white points downward. white points downward.
.. image:: img/particles1.png ![](img/particles1.png)
Texture Texture
~~~~~~~ ~~~~~~~
@ -59,7 +59,7 @@ A particle system uses a single texture (in the future this might be
extended to animated textures via spritesheet). The texture is set via extended to animated textures via spritesheet). The texture is set via
the relevant texture property: the relevant texture property:
.. image:: img/particles2.png ![](img/particles2.png)
Time parameters Time parameters
--------------- ---------------
@ -72,11 +72,11 @@ ends, a new particle is created to replace it.
Lifetime: 0.5 Lifetime: 0.5
.. image:: img/paranim14.gif ![](img/paranim14.gif)
Lifetime: 4.0 Lifetime: 4.0
.. image:: img/paranim15.gif ![](img/paranim15.gif)
One Shot One Shot
~~~~~~~~ ~~~~~~~~
@ -113,7 +113,7 @@ this, and forces particles to be emitted all together. Ranges are:
Values in the middle are also allowed. This feature is useful for Values in the middle are also allowed. This feature is useful for
creating explosions or sudden bursts of particles: creating explosions or sudden bursts of particles:
.. image:: img/paranim18.gif ![](img/paranim18.gif)
Randomness Randomness
~~~~~~~~~~ ~~~~~~~~~~
@ -161,12 +161,12 @@ By default this option is on, and it means that the space that particles
are emitted to is relative to the node. If the node is moved, all are emitted to is relative to the node. If the node is moved, all
particles are moved with it: particles are moved with it:
.. image:: img/paranim20.gif ![](img/paranim20.gif)
If disabled, particles will emit to global space, meaning that if the If disabled, particles will emit to global space, meaning that if the
node is moved, already emitted particles are not affected: node is moved, already emitted particles are not affected:
.. image:: img/paranim21.gif ![](img/paranim21.gif)
Draw Order Draw Order
~~~~~~~~~~ ~~~~~~~~~~
@ -185,13 +185,13 @@ This is the base direction at which particles emit. The default is
`Vector3(1, 0, 0)` which makes particles emit to the right. However, `Vector3(1, 0, 0)` which makes particles emit to the right. However,
with the default gravity settings, particles will go straight down. with the default gravity settings, particles will go straight down.
.. image:: img/direction1.png ![](img/direction1.png)
For this property to be noticeable, you need an *initial velocity* greater For this property to be noticeable, you need an *initial velocity* greater
than 0. Here, we set the initial velocity to 40. You'll notice that than 0. Here, we set the initial velocity to 40. You'll notice that
particles emit toward the right, then go down because of gravity. particles emit toward the right, then go down because of gravity.
.. image:: img/direction2.png ![](img/direction2.png)
Spread Spread
~~~~~~ ~~~~~~
@ -201,7 +201,7 @@ either direction to the base `Direction`. A spread of `180` will emit
in all directions (+/- 180). For spread to do anything the "Initial Velocity" in all directions (+/- 180). For spread to do anything the "Initial Velocity"
parameter must be greater than 0. parameter must be greater than 0.
.. image:: img/paranim3.gif ![](img/paranim3.gif)
Flatness Flatness
~~~~~~~~ ~~~~~~~~
@ -213,7 +213,7 @@ Gravity
The gravity applied to every particle. The gravity applied to every particle.
.. image:: img/paranim7.gif ![](img/paranim7.gif)
Initial Velocity Initial Velocity
~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
@ -222,7 +222,7 @@ Initial velocity is the speed at which particles will be emitted (in
pixels/sec). Speed might later be modified by gravity or other pixels/sec). Speed might later be modified by gravity or other
accelerations (as described further below). accelerations (as described further below).
.. image:: img/paranim4.gif ![](img/paranim4.gif)
Angular Velocity Angular Velocity
~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~
@ -235,14 +235,14 @@ Spin Velocity
Spin velocity is the speed at which particles turn around their center Spin velocity is the speed at which particles turn around their center
(in degrees/sec). (in degrees/sec).
.. image:: img/paranim5.gif ![](img/paranim5.gif)
Orbit Velocity Orbit Velocity
~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~
Orbit velocity is used to make particles turn around their center. Orbit velocity is used to make particles turn around their center.
.. image:: img/paranim6.gif ![](img/paranim6.gif)
Linear Acceleration Linear Acceleration
~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~
@ -255,7 +255,7 @@ Radial Acceleration
If this acceleration is positive, particles are accelerated away from If this acceleration is positive, particles are accelerated away from
the center. If negative, they are absorbed towards it. the center. If negative, they are absorbed towards it.
.. image:: img/paranim8.gif ![](img/paranim8.gif)
Tangential Acceleration Tangential Acceleration
~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~
@ -263,7 +263,7 @@ Tangential Acceleration
This acceleration will use the tangent vector to the center. Combining This acceleration will use the tangent vector to the center. Combining
with radial acceleration can do nice effects. with radial acceleration can do nice effects.
.. image:: img/paranim9.gif ![](img/paranim9.gif)
Damping Damping
~~~~~~~ ~~~~~~~
@ -272,7 +272,7 @@ Damping applies friction to the particles, forcing them to stop. It is
especially useful for sparks or explosions, which usually begin with a especially useful for sparks or explosions, which usually begin with a
high linear velocity and then stop as they fade. high linear velocity and then stop as they fade.
.. image:: img/paranim10.gif ![](img/paranim10.gif)
Angle Angle
~~~~~ ~~~~~
@ -280,14 +280,14 @@ Angle
Determines the initial angle of the particle (in degrees). This parameter Determines the initial angle of the particle (in degrees). This parameter
is mostly useful randomized. is mostly useful randomized.
.. image:: img/paranim11.gif ![](img/paranim11.gif)
Scale Scale
~~~~~ ~~~~~
Determines the initial scale of the particles. Determines the initial scale of the particles.
.. image:: img/paranim12.gif ![](img/paranim12.gif)
Color Color
~~~~~ ~~~~~
@ -311,15 +311,15 @@ These can be generated from textures in your project.
Ensure that a ParticlesMaterial is set, and the Particles2D node is selected. Ensure that a ParticlesMaterial is set, and the Particles2D node is selected.
A "Particles" menu should appear in the Toolbar: A "Particles" menu should appear in the Toolbar:
.. image:: img/emission_shapes1.png ![](img/emission_shapes1.png)
Open it and select "Load Emission Mask": Open it and select "Load Emission Mask":
.. image:: img/emission_shapes2.png ![](img/emission_shapes2.png)
Then select which texture you want to use as your mask: Then select which texture you want to use as your mask:
.. image:: img/emission_shapes3.png ![](img/emission_shapes3.png)
A dialog box with several settings will appear. A dialog box with several settings will appear.
@ -331,18 +331,18 @@ Three types of emission masks can be generated from a texture:
- Solid Pixels: Particles will spawn from any area of the texture, - Solid Pixels: Particles will spawn from any area of the texture,
excluding transparent areas. excluding transparent areas.
.. image:: img/emission_mask_solid.gif ![](img/emission_mask_solid.gif)
- Border Pixels: Particles will spawn from the outer edges of the texture. - Border Pixels: Particles will spawn from the outer edges of the texture.
.. image:: img/emission_mask_border.gif ![](img/emission_mask_border.gif)
- Directed Border Pixels: Similar to Border Pixels, but adds extra - Directed Border Pixels: Similar to Border Pixels, but adds extra
information to the mask to give particles the ability to emit away information to the mask to give particles the ability to emit away
from the borders. Note that an `Initial Velocity` will need to from the borders. Note that an `Initial Velocity` will need to
be set in order to utilize this. be set in order to utilize this.
.. image:: img/emission_mask_directed_border.gif ![](img/emission_mask_directed_border.gif)
Emission Colors Emission Colors
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~
@ -351,7 +351,7 @@ Emission Colors
Once you click "OK", the mask will be generated and set to the ParticlesMaterial, under the `Emission Shape` section: Once you click "OK", the mask will be generated and set to the ParticlesMaterial, under the `Emission Shape` section:
.. image:: img/emission_shapes4.png ![](img/emission_shapes4.png)
All of the values within this section have been automatically generated by the All of the values within this section have been automatically generated by the
"Load Emission Mask" menu, so they should generally be left alone. "Load Emission Mask" menu, so they should generally be left alone.

44
tutorials/2d/using_tilemaps.md
View File

@ -15,7 +15,7 @@ optimized for drawing large numbers of tiles. Finally, you can add collision,
occlusion, and navigation shapes to tiles, adding additional functionality to occlusion, and navigation shapes to tiles, adding additional functionality to
the TileMap. the TileMap.
.. image:: img/tileset_draw_atlas.png ![](img/tileset_draw_atlas.png)
Project setup Project setup
------------- -------------
@ -24,7 +24,7 @@ This demo will use the following tiles taken from Kenney's "Abstract Platformer"
art pack. You can find the complete set `here <https://kenney.nl/assets/abstract-platformer>`_ art pack. You can find the complete set `here <https://kenney.nl/assets/abstract-platformer>`_
but for this demo we'll stick to this small set. but for this demo we'll stick to this small set.
.. image:: img/tilesheet.png ![](img/tilesheet.png)
Create a new project and place the above image in the project folder. Create a new project and place the above image in the project folder.
@ -40,12 +40,12 @@ Add a new `TileMap` node to the scene. By default, a TileMap
uses a square grid of tiles. You can also use a perspective-based "Isometric" mode uses a square grid of tiles. You can also use a perspective-based "Isometric" mode
or define your own custom tile shape. or define your own custom tile shape.
.. image:: img/tilemap_mode.png ![](img/tilemap_mode.png)
Under the "Cell" section in the Inspector are many properties you can adjust to Under the "Cell" section in the Inspector are many properties you can adjust to
customize your tilemap's behavior: customize your tilemap's behavior:
.. image:: img/tilemap_size.png ![](img/tilemap_size.png)
- `Cell Size` - `Cell Size`
This defines the size of the grid. This should match the pixel size This defines the size of the grid. This should match the pixel size
@ -79,32 +79,32 @@ runs, the TileMap combines the individual tiles into a single object.
To add a new TileSet, click on the "Tile Set" property and select "New To add a new TileSet, click on the "Tile Set" property and select "New
TileSet". TileSet".
.. image:: img/tilemap_add_tileset.png ![](img/tilemap_add_tileset.png)
Click on the TileSet property, and the "TileSet" panel will open at the bottom Click on the TileSet property, and the "TileSet" panel will open at the bottom
of the editor window: of the editor window:
.. image:: img/tilemap_tool.png ![](img/tilemap_tool.png)
First, you need to add the texture(s) that you'll use for the tiles. Click the First, you need to add the texture(s) that you'll use for the tiles. Click the
"Add Texture(s) to TileSet" button and select the `tilesheet.png` image. "Add Texture(s) to TileSet" button and select the `tilesheet.png)` image.
Next, click "New Single Tile" and drag in the image to select the tile you want. Next, click "New Single Tile" and drag in the image to select the tile you want.
Click the "Enable Snap" button to make it easier to select the entire tile. A Click the "Enable Snap" button to make it easier to select the entire tile. A
yellow rectangle appears around the selected tile. yellow rectangle appears around the selected tile.
.. image:: img/tilemap_add_tile.png ![](img/tilemap_add_tile.png)
Click on the TileMap in the scene tree, and you'll see that the newly created Click on the TileMap in the scene tree, and you'll see that the newly created
tile now appears on the right side. Click in the viewport and you can place tile now appears on the right side. Click in the viewport and you can place
tiles. Right-click to remove them. tiles. Right-click to remove them.
.. image:: img/tilemap_draw.png ![](img/tilemap_draw.png)
It's easy to accidentally select and move the tilemap node. To avoid this, use It's easy to accidentally select and move the tilemap node. To avoid this, use
the node's lock button: the node's lock button:
.. image:: img/tile_lock.png ![](img/tile_lock.png)
Collision shapes Collision shapes
---------------- ----------------
@ -119,7 +119,7 @@ tool. Click the tile you previously defined (outlined in yellow). Select the
still have grid snap enabled, then click and drag in the tile. A square still have grid snap enabled, then click and drag in the tile. A square
collision shape appears in light blue: collision shape appears in light blue:
.. image:: img/tileset_add_collision.png ![](img/tileset_add_collision.png)
You can add occlusion and navigation shapes to the tile in the same way. You can add occlusion and navigation shapes to the tile in the same way.
@ -132,13 +132,13 @@ tiles from the group.
Click "New Atlas" and drag to select the entire tile sheet. Click "New Atlas" and drag to select the entire tile sheet.
.. image:: img/tileset_atlas.png ![](img/tileset_atlas.png)
If you haven't already, make sure to change the "Step" in the snap settings to If you haven't already, make sure to change the "Step" in the snap settings to
`(64, 64)`, or your tiles may be chopped into smaller pieces. You can find `(64, 64)`, or your tiles may be chopped into smaller pieces. You can find
this in the Inspector: this in the Inspector:
.. image:: img/tileset_snap.png ![](img/tileset_snap.png)
Once you've defined the atlas you can add collision shapes to the individual Once you've defined the atlas you can add collision shapes to the individual
tiles as before. You can also click "Icon" to select one of the tiles to represent tiles as before. You can also click "Icon" to select one of the tiles to represent
@ -147,7 +147,7 @@ the atlas.
Back in the TileMap, you can select the atlas tile and you'll see all of the Back in the TileMap, you can select the atlas tile and you'll see all of the
tiles it contains: tiles it contains:
.. image:: img/tileset_draw_atlas.png ![](img/tileset_draw_atlas.png)
In addition to saving time when defining the tiles, this can help by grouping In addition to saving time when defining the tiles, this can help by grouping
similar tiles together when you're working with a large number of tiles. similar tiles together when you're working with a large number of tiles.
@ -221,7 +221,7 @@ Key:
- Red: "on" - Red: "on"
- White: "off" - White: "off"
.. image:: img/autotile_template_2x2.png ![](img/autotile_template_2x2.png)
3x3 (minimal) 3x3 (minimal)
~~~~~~~~~~~~~ ~~~~~~~~~~~~~
@ -254,7 +254,7 @@ Key:
- Red: "on" - Red: "on"
- White: "off" - White: "off"
.. image:: img/autotile_template_3x3_minimal.png ![](img/autotile_template_3x3_minimal.png)
**Template - Generic 16 tiles:** **Template - Generic 16 tiles:**
@ -268,7 +268,7 @@ Key:
- White: "off" - White: "off"
- Blue-checkered: "ignore" - Blue-checkered: "ignore"
.. image:: img/autotile_template_3x3_minimal_16.png ![](img/autotile_template_3x3_minimal_16.png)
**Template - Top-down floor in 3/4 perspective:** **Template - Top-down floor in 3/4 perspective:**
@ -281,17 +281,17 @@ Key (applies to the four templates below):
- Grey: hidden due to overlap - Grey: hidden due to overlap
- Transparent: air - Transparent: air
.. image:: img/autotile_template_3x3_minimal_topdown_floor.png ![](img/autotile_template_3x3_minimal_topdown_floor.png)
**Template - Top-down wall in 3/4 perspective:** **Template - Top-down wall in 3/4 perspective:**
.. image:: img/autotile_template_3x3_minimal_topdown_walls.png ![](img/autotile_template_3x3_minimal_topdown_walls.png)
**Template - Top-down wall in 3/4 perspective (thick walls):** **Template - Top-down wall in 3/4 perspective (thick walls):**
When using this template, set the TileSet subtile size to `Vector2(64, 88)`. When using this template, set the TileSet subtile size to `Vector2(64, 88)`.
.. image:: img/autotile_template_3x3_minimal_topdown_walls_thick.png ![](img/autotile_template_3x3_minimal_topdown_walls_thick.png)
**Template - Top-down wall in 3/4 perspective (tall walls):** **Template - Top-down wall in 3/4 perspective (tall walls):**
@ -299,7 +299,7 @@ When using this template, set the "Snap Options" Step to `Vector2(64, 184)`
and the "Selected Tile" Texture offset to height minus the cell size. and the "Selected Tile" Texture offset to height minus the cell size.
This means the texture offset should be `Vector2(0, -120)`: This means the texture offset should be `Vector2(0, -120)`:
.. image:: img/autotile_template_3x3_minimal_topdown_walls_tall.png ![](img/autotile_template_3x3_minimal_topdown_walls_tall.png)
3x3 3x3
~~~ ~~~
@ -351,4 +351,4 @@ Tips and tricks
- Tools such as copy, paste, and bucket fill, can be found in the "TileMap" - Tools such as copy, paste, and bucket fill, can be found in the "TileMap"
menu in the upper-right. menu in the upper-right.
.. image:: img/tilemap_menu.png ![](img/tilemap_menu.png)

8
tutorials/3d/3d_text.md
View File

@ -18,7 +18,7 @@ demo project.
Label3D Label3D
------- -------
.. image:: img/label_3d.png ![](img/label_3d.png)
Label3D behaves like a label node but in a 3D space. Unlike label Label3D behaves like a label node but in a 3D space. Unlike label
node this can not inherit properties of a GUI theme. However its node this can not inherit properties of a GUI theme. However its
@ -36,7 +36,7 @@ for more information.
Text mesh Text mesh
--------- ---------
.. image:: img/text_mesh.png ![](img/text_mesh.png)
Text meshes have similarities to Label3D. They display text in a 3D Text meshes have similarities to Label3D. They display text in a 3D
scene, and will use the same DynamicFont subresource. However text is 3D and scene, and will use the same DynamicFont subresource. However text is 3D and
@ -44,9 +44,9 @@ has the properties of a mesh. A text mesh cast shadows onto the environment
and can have a material applied to it. Here is an example of a texture and and can have a material applied to it. Here is an example of a texture and
how it's applied to the mesh. how it's applied to the mesh.
.. image:: img/text_mesh_texture.png ![](img/text_mesh_texture.png)
.. image:: img/text_mesh_textured.png ![](img/text_mesh_textured.png)
There are two limitations to text mesh. It can't use bitmap fonts, or fonts There are two limitations to text mesh. It can't use bitmap fonts, or fonts
with self intersection. with self intersection.

26
tutorials/3d/baked_lightmaps.md
View File

@ -42,7 +42,7 @@ that lighting is on an unwrapped texture, so transitions and resolution may not
be that good. GIProbe looks less accurate (as it's an approximation), but be that good. GIProbe looks less accurate (as it's an approximation), but
smoother overall. smoother overall.
.. image:: img/baked_light_comparison.png ![](img/baked_light_comparison.png)
Setting up Setting up
---------- ----------
@ -64,7 +64,7 @@ across reimports, so it will only be regenerated when needed.
Select the imported scene in the filesystem dock, then go to the **Import** dock. Select the imported scene in the filesystem dock, then go to the **Import** dock.
There, the following option can be modified: There, the following option can be modified:
.. image:: img/baked_light_import.png ![](img/baked_light_import.png)
The **Light Baking** mode needs to be set to **Gen Lightmaps**. A texel size The **Light Baking** mode needs to be set to **Gen Lightmaps**. A texel size
in world units must also be provided, as this will determine the in world units must also be provided, as this will determine the
@ -91,7 +91,7 @@ Unwrap from within Godot
Godot has an option to unwrap meshes and visualize the UV channels. Godot has an option to unwrap meshes and visualize the UV channels.
It can be found in the Mesh menu: It can be found in the Mesh menu:
.. image:: img/baked_light_mesh_menu.png ![](img/baked_light_mesh_menu.png)
This will generate a second set of UV2 coordinates which can be used for baking, This will generate a second set of UV2 coordinates which can be used for baking,
and it will also set the texture size automatically. and it will also set the texture size automatically.
@ -107,12 +107,12 @@ so having it unwrapped before import can be faster.
Simply do an unwrap on the second UV2 layer. Simply do an unwrap on the second UV2 layer.
.. image:: img/baked_light_blender.png ![](img/baked_light_blender.png)
Then import the 3D scene normally. Remember you will need to set the texture Then import the 3D scene normally. Remember you will need to set the texture
size on the mesh after import. size on the mesh after import.
.. image:: img/baked_light_lmsize.png ![](img/baked_light_lmsize.png)
If you use external meshes on import, the size will be kept. If you use external meshes on import, the size will be kept.
Be wary that most unwrappers in 3D DCCs are not quality oriented, as they are Be wary that most unwrappers in 3D DCCs are not quality oriented, as they are
@ -125,7 +125,7 @@ Checking UV2
In the mesh menu mentioned before, the UV2 texture coordinates can be visualized. In the mesh menu mentioned before, the UV2 texture coordinates can be visualized.
Make sure, if something is failing, to check that the meshes have these UV2 coordinates: Make sure, if something is failing, to check that the meshes have these UV2 coordinates:
.. image:: img/baked_light_uvchannel.png ![](img/baked_light_uvchannel.png)
Setting up the scene Setting up the scene
-------------------- --------------------
@ -134,7 +134,7 @@ Before anything is done, a **BakedLightmap** node needs to be added to a scene.
This will enable light baking on all nodes (and sub-nodes) in that scene, even This will enable light baking on all nodes (and sub-nodes) in that scene, even
on instanced scenes. on instanced scenes.
.. image:: img/baked_light_scene.png ![](img/baked_light_scene.png)
A sub-scene can be instanced several times, as this is supported by the baker, and A sub-scene can be instanced several times, as this is supported by the baker, and
each will be assigned a lightmap of its own (just make sure to respect the rule each will be assigned a lightmap of its own (just make sure to respect the rule
@ -147,7 +147,7 @@ Lightmap needs an approximate volume of the area affected because it uses it to
transfer light to dynamic objects inside it (more on that later). Just transfer light to dynamic objects inside it (more on that later). Just
cover the scene with the volume as you do with `GIProbe`: cover the scene with the volume as you do with `GIProbe`:
.. image:: img/baked_light_bounds.png ![](img/baked_light_bounds.png)
Setting up meshes Setting up meshes
~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~
@ -155,7 +155,7 @@ Setting up meshes
For a **MeshInstance** node to take part in the baking process, it needs to have For a **MeshInstance** node to take part in the baking process, it needs to have
the **Use in Baked Light** property enabled. the **Use in Baked Light** property enabled.
.. image:: img/baked_light_use.png ![](img/baked_light_use.png)
When auto-generating lightmaps on scene import, this is enabled automatically. When auto-generating lightmaps on scene import, this is enabled automatically.
@ -169,7 +169,7 @@ that light will be baked.
Lights can be disabled (no bake) or be fully baked (direct and indirect). This Lights can be disabled (no bake) or be fully baked (direct and indirect). This
can be controlled from the **Bake Mode** menu in lights: can be controlled from the **Bake Mode** menu in lights:
.. image:: img/baked_light_bake_mode.png ![](img/baked_light_bake_mode.png)
The modes are: The modes are:
@ -220,7 +220,7 @@ This size is used to provide softer shadows depending on the distance between
the shadow caster and the object receiving the shadow. This mimics real life the shadow caster and the object receiving the shadow. This mimics real life
shadow appearance: shadow appearance:
.. image:: img/baked_light_omnilight_size.png ![](img/baked_light_omnilight_size.png)
The light's **Size** property is ignored for real-time shadows; it will only affect baked The light's **Size** property is ignored for real-time shadows; it will only affect baked
shadows. When the **Size** property is changed, lightmaps must be baked again to shadows. When the **Size** property is changed, lightmaps must be baked again to
@ -232,7 +232,7 @@ Baking
To begin the bake process, just push the **Bake Lightmaps** button on top To begin the bake process, just push the **Bake Lightmaps** button on top
when selecting the BakedLightmap node: when selecting the BakedLightmap node:
.. image:: img/baked_light_bake.png ![](img/baked_light_bake.png)
This can take from seconds to minutes (or hours) depending on scene size, bake This can take from seconds to minutes (or hours) depending on scene size, bake
method and quality selected. method and quality selected.
@ -375,4 +375,4 @@ automatic, so you don't have to do anything. Just move your objects around, and
they will be lit accordingly. Of course, you have to make sure you set up your they will be lit accordingly. Of course, you have to make sure you set up your
scene bounds accordingly or it won't work. scene bounds accordingly or it won't work.
.. image:: img/baked_light_indirect.gif ![](img/baked_light_indirect.gif)

54
tutorials/3d/csg_tools.md
View File

@ -21,7 +21,7 @@ Interior environments can be created by using inverted primitives.
`TrenchBroom <https://kristianduske.com/trenchbroom/>`__ and import `TrenchBroom <https://kristianduske.com/trenchbroom/>`__ and import
them in Godot. them in Godot.
.. image:: img/csg.gif ![](img/csg.gif)
Introduction to CSG nodes Introduction to CSG nodes
------------------------- -------------------------
@ -37,9 +37,9 @@ the CSG nodes:
- `CSGMesh` - `CSGMesh`
- `CSGCombiner` - `CSGCombiner`
.. image:: img/csg_nodes.png ![](img/csg_nodes.png)
.. image:: img/csg_mesh.png ![](img/csg_mesh.png)
CSG tools features CSG tools features
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~
@ -52,9 +52,9 @@ Every CSG node supports 3 kinds of boolean operations:
- **Subtraction:** The second shape is subtracted from the first, leaving a dent - **Subtraction:** The second shape is subtracted from the first, leaving a dent
with its shape. with its shape.
.. image:: img/csg_operation_menu.png ![](img/csg_operation_menu.png)
.. image:: img/csg_operation.png ![](img/csg_operation.png)
CSGPolygon CSGPolygon
~~~~~~~~~~ ~~~~~~~~~~
@ -67,9 +67,9 @@ The `CSGPolygon` node extrude along a Polygon drawn in
- **Path:** Extruded along a Path node. This operation is commonly called - **Path:** Extruded along a Path node. This operation is commonly called
lofting. lofting.
.. image:: img/csg_poly_mode.png ![](img/csg_poly_mode.png)
.. image:: img/csg_poly.png ![](img/csg_poly.png)
.. note:: The **Path** mode must be provided with a `Path` .. note:: The **Path** mode must be provided with a `Path`
node to work. In the Path node, draw the path and the polygon in node to work. In the Path node, draw the path and the polygon in
@ -88,7 +88,7 @@ supported. There are some restrictions for geometry:
- it must not contain internal faces, - it must not contain internal faces,
- every edge must connect to only two other faces. - every edge must connect to only two other faces.
.. image:: img/csg_custom_mesh.png ![](img/csg_custom_mesh.png)
CSGCombiner CSGCombiner
~~~~~~~~~~~ ~~~~~~~~~~~
@ -133,14 +133,14 @@ Create a scene with a Spatial node as root node.
the 3D viewport menu, or add a DirectionalLight node to help you see the 3D viewport menu, or add a DirectionalLight node to help you see
clearly. clearly.
.. image:: img/csg_overdraw.png ![](img/csg_overdraw.png)
Create a CSGBox and name it `room`, enable **Invert Faces** and change the Create a CSGBox and name it `room`, enable **Invert Faces** and change the
dimensions of your room. dimensions of your room.
.. image:: img/csg_room.png ![](img/csg_room.png)
.. image:: img/csg_room_invert.png ![](img/csg_room_invert.png)
Next, create a CSGCombiner and name it `desk`. Next, create a CSGCombiner and name it `desk`.
@ -153,7 +153,7 @@ A desk has one surface and 4 legs:
Adjust their placement to resemble a desk. Adjust their placement to resemble a desk.
.. image:: img/csg_desk.png ![](img/csg_desk.png)
.. note:: CSG nodes inside a CSGCombiner will only process their operation .. note:: CSG nodes inside a CSGCombiner will only process their operation
within the combiner. Therefore, CSGCombiners are used to organize within the combiner. Therefore, CSGCombiners are used to organize
@ -165,22 +165,22 @@ Our bed consists of 3 parts: the bed, the mattress and a pillow. Create a CSGBox
and adjust its dimension for the bed. Create another CSGBox and adjust its and adjust its dimension for the bed. Create another CSGBox and adjust its
dimension for the mattress. dimension for the mattress.
.. image:: img/csg_bed_mat.png ![](img/csg_bed_mat.png)
We will create another CSGCombiner named `pillow` as the child of `bed`. We will create another CSGCombiner named `pillow` as the child of `bed`.
The scene tree should look like this: The scene tree should look like this:
.. image:: img/csg_bed_tree.png ![](img/csg_bed_tree.png)
We will combine 3 CSGSphere nodes in **Union** mode to form a pillow. Scale the We will combine 3 CSGSphere nodes in **Union** mode to form a pillow. Scale the
Y axis of the spheres and enable **Smooth Faces**. Y axis of the spheres and enable **Smooth Faces**.
.. image:: img/csg_pillow_smooth.png ![](img/csg_pillow_smooth.png)
Select the `pillow` node and switch the mode to **Subtraction**; the combined Select the `pillow` node and switch the mode to **Subtraction**; the combined
spheres will cut a hole into the mattress. spheres will cut a hole into the mattress.
.. image:: img/csg_pillow_hole.png ![](img/csg_pillow_hole.png)
Try to re-parent the `pillow` node to the root `Spatial` node; the hole will Try to re-parent the `pillow` node to the root `Spatial` node; the hole will
disappear. disappear.
@ -193,7 +193,7 @@ disappear.
Undo the re-parent after observing the effect. The bed you've built should look Undo the re-parent after observing the effect. The bed you've built should look
like this: like this:
.. image:: img/csg_bed.png ![](img/csg_bed.png)
Create a CSGCombiner and name it `lamp`. Create a CSGCombiner and name it `lamp`.
@ -201,46 +201,46 @@ A lamp consists of 3 parts: the stand, the pole and the lampshade.
Create a CSGCylinder, enable the **Cone** option and make it the stand. Create Create a CSGCylinder, enable the **Cone** option and make it the stand. Create
another CSGCylinder and adjust the dimensions to use it as a pole. another CSGCylinder and adjust the dimensions to use it as a pole.
.. image:: img/csg_lamp_pole_stand.png ![](img/csg_lamp_pole_stand.png)
We will use a CSGPolygon for the lampshade. Use the **Spin** mode for the We will use a CSGPolygon for the lampshade. Use the **Spin** mode for the
CSGPolygon and draw a `trapezoid <https://en.wikipedia.org/wiki/Trapezoid>`_ CSGPolygon and draw a `trapezoid <https://en.wikipedia.org/wiki/Trapezoid>`_
while in **Front View** (numeric keypad 1); this shape will extrude around the while in **Front View** (numeric keypad 1); this shape will extrude around the
origin and form the lampshade. origin and form the lampshade.
.. image:: img/csg_lamp_spin.png ![](img/csg_lamp_spin.png)
.. image:: img/csg_lamp_polygon.png ![](img/csg_lamp_polygon.png)
.. image:: img/csg_lamp_extrude.png ![](img/csg_lamp_extrude.png)
Adjust the placement of the 3 parts to make it look like a lamp. Adjust the placement of the 3 parts to make it look like a lamp.
.. image:: img/csg_lamp.png ![](img/csg_lamp.png)
Create a CSGCombiner and name it `bookshelf`. Create a CSGCombiner and name it `bookshelf`.
We will use 3 CSGBox nodes for the bookshelf. Create a CSGBox and adjust its We will use 3 CSGBox nodes for the bookshelf. Create a CSGBox and adjust its
dimensions; this will be the size of the bookshelf. dimensions; this will be the size of the bookshelf.
.. image:: img/csg_shelf_big.png ![](img/csg_shelf_big.png)
Duplicate the CSGBox and shorten the dimensions of each axis and change the mode Duplicate the CSGBox and shorten the dimensions of each axis and change the mode
to **Subtraction**. to **Subtraction**.
.. image:: img/csg_shelf_subtract.png ![](img/csg_shelf_subtract.png)
.. image:: img/csg_shelf_subtract_menu.png ![](img/csg_shelf_subtract_menu.png)
You've almost built a shelf. Create one more CSGBox for dividing the shelf into You've almost built a shelf. Create one more CSGBox for dividing the shelf into
two levels. two levels.
.. image:: img/csg_shelf.png ![](img/csg_shelf.png)
Position your furniture in your room as you like and your scene should look Position your furniture in your room as you like and your scene should look
this: this:
.. image:: img/csg_room_result.png ![](img/csg_room_result.png)
You've successfully prototyped a room level with the CSG tools in Godot. You've successfully prototyped a room level with the CSG tools in Godot.
CSG tools can be used for designing all kinds of levels, such as a maze CSG tools can be used for designing all kinds of levels, such as a maze

58
tutorials/3d/environment_and_post_processing.md
View File

@ -19,7 +19,7 @@ Camera node
An Environment can be set to a camera. It will have priority over any other setting. An Environment can be set to a camera. It will have priority over any other setting.
.. image:: img/environment_camera.png ![](img/environment_camera.png)
This is mostly useful when wanting to override an existing environment, This is mostly useful when wanting to override an existing environment,
but in general it's a better idea to use the option below. but in general it's a better idea to use the option below.
@ -30,7 +30,7 @@ WorldEnvironment node
The WorldEnvironment node can be added to any scene, but only one can exist per The WorldEnvironment node can be added to any scene, but only one can exist per
active scene tree. Adding more than one will result in a warning. active scene tree. Adding more than one will result in a warning.
.. image:: img/environment_world.png ![](img/environment_world.png)
Any Environment added has higher priority than the default Environment Any Environment added has higher priority than the default Environment
(explained below). This means it can be overridden on a per-scene basis, (explained below). This means it can be overridden on a per-scene basis,
@ -43,7 +43,7 @@ A default environment can be set, which acts as a fallback when no Environment
was set to a Camera or WorldEnvironment. was set to a Camera or WorldEnvironment.
Just head to Project Settings -> Rendering -> Environment: Just head to Project Settings -> Rendering -> Environment:
.. image:: img/environment_default.png ![](img/environment_default.png)
New projects created from the Project Manager come with a default environment New projects created from the Project Manager come with a default environment
(`default_env.tres`). If one needs to be created, save it to disk before (`default_env.tres`). If one needs to be created, save it to disk before
@ -63,7 +63,7 @@ the screen where objects were not drawn). In Godot 3.0, the background not only
serves the purpose of displaying an image or color, it can also change how objects serves the purpose of displaying an image or color, it can also change how objects
are affected by ambient and reflected light. are affected by ambient and reflected light.
.. image:: img/environment_background1.png ![](img/environment_background1.png)
There are many ways to set the background: There are many ways to set the background:
@ -84,7 +84,7 @@ color multiplied by the material albedo) and then one obtained from the *Sky*
(as described before, but a sky needs to be set as background for this to be (as described before, but a sky needs to be set as background for this to be
enabled). enabled).
.. image:: img/environment_ambient.png ![](img/environment_ambient.png)
When a *Sky* is set as background, it's possible to blend between ambient color When a *Sky* is set as background, it's possible to blend between ambient color
and sky using the **Sky Contribution** setting (this value is 1.0 by default for and sky using the **Sky Contribution** setting (this value is 1.0 by default for
@ -92,7 +92,7 @@ convenience, so only the sky affects objects).
Here is a comparison of how different ambient light affects a scene: Here is a comparison of how different ambient light affects a scene:
.. image:: img/environment_ambient2.png ![](img/environment_ambient2.png)
Finally, there is an **Energy** setting, which is a multiplier. It's useful when Finally, there is an **Energy** setting, which is a multiplier. It's useful when
working with HDR. working with HDR.
@ -104,7 +104,7 @@ ambient light from ReflectionProbe or GIProbe, which will more faithfully simula
how indirect light propagates. Below is a comparison, in terms of quality, between using a how indirect light propagates. Below is a comparison, in terms of quality, between using a
flat ambient color and a GIProbe: flat ambient color and a GIProbe:
.. image:: img/environment_ambient_comparison.png ![](img/environment_ambient_comparison.png)
Using one of the methods described above, objects get constant ambient lighting Using one of the methods described above, objects get constant ambient lighting
replaced by ambient light from the probes. replaced by ambient light from the probes.
@ -119,7 +119,7 @@ There are two kinds of fog in Godot:
- **Depth Fog:** This one is applied based on the distance from the camera. - **Depth Fog:** This one is applied based on the distance from the camera.
- **Height Fog:** This one is applied to any objects below (or above) a certain height, regardless of the distance from the camera. - **Height Fog:** This one is applied to any objects below (or above) a certain height, regardless of the distance from the camera.
.. image:: img/environment_fog_depth_height.png ![](img/environment_fog_depth_height.png)
Both of these fog types can have their curve tweaked, making their transition more or less sharp. Both of these fog types can have their curve tweaked, making their transition more or less sharp.
@ -132,7 +132,7 @@ will be changed, simulating the sunlight passing through the fog.
The second is **Transmit Enabled** which simulates more realistic light transmittance. The second is **Transmit Enabled** which simulates more realistic light transmittance.
In practice, it makes light stand out more across the fog. In practice, it makes light stand out more across the fog.
.. image:: img/environment_fog_transmission.png ![](img/environment_fog_transmission.png)
Tonemap Tonemap
^^^^^^^ ^^^^^^^
@ -187,7 +187,7 @@ interior areas with low light and outdoors. Auto exposure simulates the camera
(or eye) in an effort to adapt between light and dark locations and their (or eye) in an effort to adapt between light and dark locations and their
different amounts of light. different amounts of light.
.. image:: img/environment_hdr_autoexp.gif ![](img/environment_hdr_autoexp.gif)
The simplest way to use auto exposure is to make sure outdoor lights (or other The simplest way to use auto exposure is to make sure outdoor lights (or other
strong lights) have energy beyond 1.0. This is done by tweaking their **Energy** strong lights) have energy beyond 1.0. This is done by tweaking their **Energy**
@ -199,12 +199,12 @@ By combining Auto Exposure with *Glow* post processing (more on that below),
pixels that go over the tonemap **White** will bleed to the glow buffer, pixels that go over the tonemap **White** will bleed to the glow buffer,
creating the typical bloom effect in photography. creating the typical bloom effect in photography.
.. image:: img/environment_hdr_bloom.png ![](img/environment_hdr_bloom.png)
The user-controllable values in the Auto Exposure section come with sensible The user-controllable values in the Auto Exposure section come with sensible
defaults, but you can still tweak them: defaults, but you can still tweak them:
.. image:: img/environment_hdr.png ![](img/environment_hdr.png)
- **Scale:** Value to scale the lighting. Brighter values produce brighter images, smaller ones produce darker ones. - **Scale:** Value to scale the lighting. Brighter values produce brighter images, smaller ones produce darker ones.
- **Min Luma:** Minimum luminance that auto exposure will aim to adjust for. Luminance is the average of the light in all the pixels of the screen. - **Min Luma:** Minimum luminance that auto exposure will aim to adjust for. Luminance is the average of the light in all the pixels of the screen.
@ -227,7 +227,7 @@ GIProbe), they may not provide enough detail for all situations. Scenarios
where Screen Space Reflections make the most sense are when objects are in where Screen Space Reflections make the most sense are when objects are in
contact with each other (object over floor, over a table, floating on water, etc). contact with each other (object over floor, over a table, floating on water, etc).
.. image:: img/environment_ssr.png ![](img/environment_ssr.png)
The other advantage (even if only enabled to a minimum), is that it works in real-time The other advantage (even if only enabled to a minimum), is that it works in real-time
(while the other types of reflections are pre-computed). This can be used to (while the other types of reflections are pre-computed). This can be used to
@ -263,7 +263,7 @@ This can be simulated with Screen Space Ambient Occlusion. As you can see in the
image below, its purpose is to make sure concave areas are darker, simulating image below, its purpose is to make sure concave areas are darker, simulating
a narrower path for the light to enter: a narrower path for the light to enter:
.. image:: img/environment_ssao.png ![](img/environment_ssao.png)
It is a common mistake to enable this effect, turn on a light, and not be able to It is a common mistake to enable this effect, turn on a light, and not be able to
appreciate it. This is because SSAO only acts on *ambient* light, not direct light. appreciate it. This is because SSAO only acts on *ambient* light, not direct light.
@ -274,11 +274,11 @@ the **Light Affect** parameter (even though this is not correct, some artists li
SSAO looks best when combined with a real source of indirect light, like GIProbe: SSAO looks best when combined with a real source of indirect light, like GIProbe:
.. image:: img/environment_ssao2.png ![](img/environment_ssao2.png)
Tweaking SSAO is possible with several parameters: Tweaking SSAO is possible with several parameters:
.. image:: img/environment_ssao_parameters.png ![](img/environment_ssao_parameters.png)
- **Radius/Intensity:** To control the radius or intensity of the occlusion, these two parameters are available. Radius is in world (Metric) units. - **Radius/Intensity:** To control the radius or intensity of the occlusion, these two parameters are available. Radius is in world (Metric) units.
- **Radius2/Intensity2:** A Secondary radius/intensity can be used. Combining a large and a small radius AO generally works well. - **Radius2/Intensity2:** A Secondary radius/intensity can be used. Combining a large and a small radius AO generally works well.
@ -296,7 +296,7 @@ This effect simulates focal distance on high end cameras. It blurs objects behin
a given range. It has an initial **Distance** with a **Transition** region a given range. It has an initial **Distance** with a **Transition** region
(in world units): (in world units):
.. image:: img/environment_dof_far.png ![](img/environment_dof_far.png)
The **Amount** parameter controls the amount of blur. For larger blurs, tweaking The **Amount** parameter controls the amount of blur. For larger blurs, tweaking
the **Quality** may be needed in order to avoid artifacts. the **Quality** may be needed in order to avoid artifacts.
@ -308,7 +308,7 @@ This effect simulates focal distance on high end cameras. It blurs objects close
to the camera (acts in the opposite direction as far blur). to the camera (acts in the opposite direction as far blur).
It has an initial **Distance** with a **Transition** region (in world units): It has an initial **Distance** with a **Transition** region (in world units):
.. image:: img/environment_dof_near.png ![](img/environment_dof_near.png)
The **Amount** parameter controls the amount of blur. For larger blurs, tweaking The **Amount** parameter controls the amount of blur. For larger blurs, tweaking
the **Quality** may be needed in order to avoid artifacts. the **Quality** may be needed in order to avoid artifacts.
@ -316,7 +316,7 @@ the **Quality** may be needed in order to avoid artifacts.
It is common to use both blurs together to focus the viewer's attention on a It is common to use both blurs together to focus the viewer's attention on a
given object: given object:
.. image:: img/environment_mixed_blur.png ![](img/environment_mixed_blur.png)
Glow Glow
^^^^ ^^^^
@ -325,18 +325,18 @@ In photography and film, when light amount exceeds the maximum supported by the
media (be it analog or digital), it generally bleeds outwards to darker regions media (be it analog or digital), it generally bleeds outwards to darker regions
of the image. This is simulated in Godot with the **Glow** effect. of the image. This is simulated in Godot with the **Glow** effect.
.. image:: img/environment_glow1.png ![](img/environment_glow1.png)
By default, even if the effect is enabled, it will be weak or invisible. One of By default, even if the effect is enabled, it will be weak or invisible. One of
two conditions need to happen for it to actually show: two conditions need to happen for it to actually show:
- 1) The light in a pixel surpasses the **HDR Threshold** (where 0 is all light surpasses it, and 1.0 is light over the tonemapper **White** value). Normally, this value is expected to be at 1.0, but it can be lowered to allow more light to bleed. There is also an extra parameter, **HDR Scale**, that allows scaling (making brighter or darker) the light surpassing the threshold. - 1) The light in a pixel surpasses the **HDR Threshold** (where 0 is all light surpasses it, and 1.0 is light over the tonemapper **White** value). Normally, this value is expected to be at 1.0, but it can be lowered to allow more light to bleed. There is also an extra parameter, **HDR Scale**, that allows scaling (making brighter or darker) the light surpassing the threshold.
.. image:: img/environment_glow_threshold.png ![](img/environment_glow_threshold.png)
- 2) The Bloom effect has a value set greater than 0. As it increases, it sends the whole screen to the glow processor at higher amounts. - 2) The Bloom effect has a value set greater than 0. As it increases, it sends the whole screen to the glow processor at higher amounts.
.. image:: img/environment_glow_bloom.png ![](img/environment_glow_bloom.png)
Both will cause the light to start bleeding out of the brighter areas. Both will cause the light to start bleeding out of the brighter areas.
@ -356,19 +356,19 @@ To change the glow effect size and shape, Godot provides **Levels**. Smaller
levels are strong glows that appear around objects, while large levels are hazy levels are strong glows that appear around objects, while large levels are hazy
glows covering the whole screen: glows covering the whole screen:
.. image:: img/environment_glow_layers.png ![](img/environment_glow_layers.png)
The real strength of this system, though, is to combine levels to create more The real strength of this system, though, is to combine levels to create more
interesting glow patterns: interesting glow patterns:
.. image:: img/environment_glow_layers2.png ![](img/environment_glow_layers2.png)
Finally, as the highest layers are created by stretching small blurred images, Finally, as the highest layers are created by stretching small blurred images,
it is possible that some blockiness may be visible. Enabling **Bicubic Upscaling** it is possible that some blockiness may be visible. Enabling **Bicubic Upscaling**
gets rids of it, at a minimal performance cost. gets rids of it, at a minimal performance cost.
*Note that this is effective only when using the GLES3 backend.* *Note that this is effective only when using the GLES3 backend.*
.. image:: img/environment_glow_bicubic.png ![](img/environment_glow_bicubic.png)
Adjustments Adjustments
^^^^^^^^^^^ ^^^^^^^^^^^
@ -376,18 +376,18 @@ Adjustments
At the end of processing, Godot offers the possibility to do some standard At the end of processing, Godot offers the possibility to do some standard
image adjustments. image adjustments.
.. image:: img/environment_adjustments.png ![](img/environment_adjustments.png)
The first one is being able to change the typical Brightness, Contrast, The first one is being able to change the typical Brightness, Contrast,
and Saturation: and Saturation:
.. image:: img/environment_adjustments_bcs.png ![](img/environment_adjustments_bcs.png)
The second is by supplying a color correction gradient. A regular black to The second is by supplying a color correction gradient. A regular black to
white gradient like the following one will produce no effect: white gradient like the following one will produce no effect:
.. image:: img/environment_adjusments_default_gradient.png ![](img/environment_adjusments_default_gradient.png)
But creating custom ones will allow to map each channel to a different color: But creating custom ones will allow to map each channel to a different color:
.. image:: img/environment_adjusments_custom_gradient.png ![](img/environment_adjusments_custom_gradient.png)

24
tutorials/3d/gi_probes.md
View File

@ -38,18 +38,18 @@ Setting up
Just like a `ReflectionProbe`, simply set up the `GIProbe` by wrapping it around Just like a `ReflectionProbe`, simply set up the `GIProbe` by wrapping it around
the geometry that will be affected. the geometry that will be affected.
.. image:: img/giprobe_wrap.png ![](img/giprobe_wrap.png)
Afterwards, make sure to enable the **Use In Baked Light** property on the geometry instances Afterwards, make sure to enable the **Use In Baked Light** property on the geometry instances
in the inspector. This is required for `GIProbe` to recognize objects, in the inspector. This is required for `GIProbe` to recognize objects,
otherwise they will be ignored: otherwise they will be ignored:
.. image:: img/giprobe_bake_property.png ![](img/giprobe_bake_property.png)
Once the geometry is set up, push the Bake button that appears on the 3D editor Once the geometry is set up, push the Bake button that appears on the 3D editor
toolbar to begin the pre-baking process: toolbar to begin the pre-baking process:
.. image:: img/giprobe_bake.png ![](img/giprobe_bake.png)
.. warning:: .. warning::
@ -66,16 +66,16 @@ Lights need to be added to the scene to have an effect.
The effect of indirect light can be viewed quickly (it is recommended you turn The effect of indirect light can be viewed quickly (it is recommended you turn
off all ambient/sky lighting to tweak this, though, as shown below): off all ambient/sky lighting to tweak this, though, as shown below):
.. image:: img/giprobe_indirect.png ![](img/giprobe_indirect.png)
In some situations, though, indirect light may be too weak. Lights have an In some situations, though, indirect light may be too weak. Lights have an
indirect multiplier to tweak this: indirect multiplier to tweak this:
.. image:: img/giprobe_light_indirect.png ![](img/giprobe_light_indirect.png)
And, as `GIProbe` lighting updates in real-time, this effect is immediate: And, as `GIProbe` lighting updates in real-time, this effect is immediate:
.. image:: img/giprobe_indirect_energy_result.png ![](img/giprobe_indirect_energy_result.png)
Reflections Reflections
----------- -----------
@ -84,12 +84,12 @@ For very metallic materials with low roughness, it's possible to appreciate
voxel reflections. Keep in mind that these have far less detail than Reflection voxel reflections. Keep in mind that these have far less detail than Reflection
Probes or Screen Space Reflections, but fully reflect volumetrically. Probes or Screen Space Reflections, but fully reflect volumetrically.
.. image:: img/giprobe_voxel_reflections.png ![](img/giprobe_voxel_reflections.png)
`GIProbe`\ s can be easily mixed with Reflection Probes and Screen Space Reflections, `GIProbe`\ s can be easily mixed with Reflection Probes and Screen Space Reflections,
as a full 3-stage fallback-chain. This allows to have precise reflections where needed: as a full 3-stage fallback-chain. This allows to have precise reflections where needed:
.. image:: img/giprobe_ref_blending.png ![](img/giprobe_ref_blending.png)
Interior vs exterior Interior vs exterior
-------------------- --------------------
@ -97,12 +97,12 @@ Interior vs exterior
GI Probes normally allow mixing with lighting from the sky. This can be disabled GI Probes normally allow mixing with lighting from the sky. This can be disabled
when turning on the *Interior* setting. when turning on the *Interior* setting.
.. image:: img/giprobe_interior_setting.png ![](img/giprobe_interior_setting.png)
The difference becomes clear in the image below, where light from the sky goes The difference becomes clear in the image below, where light from the sky goes
from spreading inside to being ignored. from spreading inside to being ignored.
.. image:: img/giprobe_interior.png ![](img/giprobe_interior.png)
As complex buildings may mix interiors with exteriors, combining GIProbes As complex buildings may mix interiors with exteriors, combining GIProbes
for both parts works well. for both parts works well.
@ -112,7 +112,7 @@ Tweaking
GI Probes support a few parameters for tweaking: GI Probes support a few parameters for tweaking:
.. image:: img/giprobe_tweaking.png ![](img/giprobe_tweaking.png)
- **Subdiv** Subdivision used for the probe. The default (128) is generally good for small- to medium-sized areas. Bigger subdivisions use more memory. - **Subdiv** Subdivision used for the probe. The default (128) is generally good for small- to medium-sized areas. Bigger subdivisions use more memory.
- **Extents** Size of the probe. Can be tweaked from the gizmo. - **Extents** Size of the probe. Can be tweaked from the gizmo.
@ -131,4 +131,4 @@ Quality
`GIProbe`\ s are quite demanding. It is possible to use lower quality voxel cone `GIProbe`\ s are quite demanding. It is possible to use lower quality voxel cone
tracing in exchange for more performance. tracing in exchange for more performance.
.. image:: img/giprobe_quality.png ![](img/giprobe_quality.png)

2
tutorials/3d/high_dynamic_range.md
View File

@ -62,7 +62,7 @@ However, Godot currently only supports sRGB displays.
The sRGB standard is based around the nonlinear relationship between the current The sRGB standard is based around the nonlinear relationship between the current
to light output of common desktop computing CRT displays. to light output of common desktop computing CRT displays.
.. image:: img/hdr_gamma.png ![](img/hdr_gamma.png)
The mathematics of a scene-referred model require that we multiply the scene by The mathematics of a scene-referred model require that we multiply the scene by
different values to adjust the intensities and exposure to different different values to adjust the intensities and exposure to different

22
tutorials/3d/introduction_to_3d.md
View File

@ -24,7 +24,7 @@ Spatial node
Following this reasoning, the 3D engine uses the `Spatial` Following this reasoning, the 3D engine uses the `Spatial`
node for everything 3D. node for everything 3D.
.. image:: img/tuto_3d1.png ![](img/tuto_3d1.png)
Spatial nodes have a local transform, which is relative to the parent Spatial nodes have a local transform, which is relative to the parent
node (as long as the parent node is also of **or inherits from** the type node (as long as the parent node is also of **or inherits from** the type
@ -33,7 +33,7 @@ Spatial). This transform can be accessed as a 4×3
members representing location, Euler rotation (X, Y and Z angles) and members representing location, Euler rotation (X, Y and Z angles) and
scale. scale.
.. image:: img/tuto_3d2.png ![](img/tuto_3d2.png)
3D content 3D content
~~~~~~~~~~ ~~~~~~~~~~
@ -113,14 +113,14 @@ Editing 3D scenes is done in the 3D tab. This tab can be selected
manually, but it will be automatically enabled when a Spatial node is manually, but it will be automatically enabled when a Spatial node is
selected. selected.
.. image:: img/tuto_3d3.png ![](img/tuto_3d3.png)
Default 3D scene navigation controls are similar to Blender (aiming to Default 3D scene navigation controls are similar to Blender (aiming to
have some sort of consistency in the free software pipeline..), but have some sort of consistency in the free software pipeline..), but
options are included to customize mouse buttons and behavior to be options are included to customize mouse buttons and behavior to be
similar to other tools in the Editor Settings: similar to other tools in the Editor Settings:
.. image:: img/tuto_3d4.png ![](img/tuto_3d4.png)
Coordinate system Coordinate system
----------------- -----------------
@ -155,7 +155,7 @@ respectively. This convention applies to the grid and other gizmos too
(and also to the shader language, ordering of components for (and also to the shader language, ordering of components for
Vector3, Color, etc.). Vector3, Color, etc.).
.. image:: img/tuto_3d5.png ![](img/tuto_3d5.png)
Some useful keybindings: Some useful keybindings:
@ -168,22 +168,22 @@ View menu
The view options are controlled by the "View" menu in the viewport's toolbar. The view options are controlled by the "View" menu in the viewport's toolbar.
.. image:: img/tuto_3d6.png ![](img/tuto_3d6.png)
You can hide the gizmos in the 3D view of the editor through this menu: You can hide the gizmos in the 3D view of the editor through this menu:
.. image:: img/tuto_3d6_1.png ![](img/tuto_3d6_1.png)
To hide a specific type of gizmos, you can toggle them off in the "View" menu. To hide a specific type of gizmos, you can toggle them off in the "View" menu.
.. image:: img/tuto_3d6_2.png ![](img/tuto_3d6_2.png)
Default environment Default environment
------------------- -------------------
When created from the Project Manager, the 3D environment has a default sky. When created from the Project Manager, the 3D environment has a default sky.
.. image:: img/tuto_3d8.png ![](img/tuto_3d8.png)
Given how physically based rendering works, it is advised to always try to Given how physically based rendering works, it is advised to always try to
work with a default environment in order to provide indirect and reflected work with a default environment in order to provide indirect and reflected
@ -197,7 +197,7 @@ displayed unless a `Camera` is
also added to the scene. Cameras can work in either orthogonal or also added to the scene. Cameras can work in either orthogonal or
perspective projections: perspective projections:
.. image:: img/tuto_3d10.png ![](img/tuto_3d10.png)
Cameras are associated with (and only display to) a parent or grandparent Cameras are associated with (and only display to) a parent or grandparent
viewport. Since the root of the scene tree is a viewport, cameras will viewport. Since the root of the scene tree is a viewport, cameras will
@ -205,7 +205,7 @@ display on it by default, but if sub-viewports (either as render target
or picture-in-picture) are desired, they need their own children cameras or picture-in-picture) are desired, they need their own children cameras
to display. to display.
.. image:: img/tuto_3d11.png ![](img/tuto_3d11.png)
When dealing with multiple cameras, the following rules are enforced for When dealing with multiple cameras, the following rules are enforced for
each viewport: each viewport:

42
tutorials/3d/lights_and_shadows.md
View File

@ -26,7 +26,7 @@ There are three types of light nodes: `Directional light`_,
`Omni light`_ and `Spot light`_. Let's take a look at the common `Omni light`_ and `Spot light`_. Let's take a look at the common
parameters for lights: parameters for lights:
.. image:: img/light_params.png ![](img/light_params.png)
Each one has a specific function: Each one has a specific function:
@ -57,11 +57,11 @@ There is a list of generic shadow parameters, each also has a specific function:
Below is an image of what tweaking bias looks like. Default values work for most Below is an image of what tweaking bias looks like. Default values work for most
cases, but in general it depends on the size and complexity of geometry. cases, but in general it depends on the size and complexity of geometry.
.. image:: img/shadow_bias.png ![](img/shadow_bias.png)
Finally, if gaps can't be solved, the **Contact** option can help (at a performance cost): Finally, if gaps can't be solved, the **Contact** option can help (at a performance cost):
.. image:: img/shadow_contact.png ![](img/shadow_contact.png)
Any sort of bias issues can always be fixed by increasing the shadow map resolution, Any sort of bias issues can always be fixed by increasing the shadow map resolution,
although that may lead to decreased performance. although that may lead to decreased performance.
@ -99,7 +99,7 @@ covering the whole scene. The directional light node is represented by a big arr
indicates the direction of the light rays. However, the position of the node indicates the direction of the light rays. However, the position of the node
does not affect the lighting at all and can be anywhere. does not affect the lighting at all and can be anywhere.
.. image:: img/light_directional.png ![](img/light_directional.png)
Every face whose front-side is hit by the light rays is lit, while the others stay dark. Most light types Every face whose front-side is hit by the light rays is lit, while the others stay dark. Most light types
have specific parameters, but directional lights are pretty simple in nature, so they don't. have specific parameters, but directional lights are pretty simple in nature, so they don't.
@ -111,20 +111,20 @@ To compute shadow maps, the scene is rendered (only depth) from an orthogonal po
the whole scene (or up to the max distance). There is, however, a problem with this approach because objects the whole scene (or up to the max distance). There is, however, a problem with this approach because objects
closer to the camera receive blocky shadows. closer to the camera receive blocky shadows.
.. image:: img/shadow_blocky.png ![](img/shadow_blocky.png)
To fix this, a technique named "Parallel Split Shadow Maps" (or PSSM) is used. This splits the view frustum in 2 or 4 areas. Each To fix this, a technique named "Parallel Split Shadow Maps" (or PSSM) is used. This splits the view frustum in 2 or 4 areas. Each
area gets its own shadow map. This allows small areas close to the viewer to have the same shadow resolution as a huge, far-away area. area gets its own shadow map. This allows small areas close to the viewer to have the same shadow resolution as a huge, far-away area.
.. image:: img/pssm_explained.png ![](img/pssm_explained.png)
With this, shadows become more detailed: With this, shadows become more detailed:
.. image:: img/shadow_pssm.png ![](img/shadow_pssm.png)
To control PSSM, a number of parameters are exposed: To control PSSM, a number of parameters are exposed:
.. image:: img/directional_shadow_params.png ![](img/directional_shadow_params.png)
Each split distance is controlled relative to the camera far (or shadow Each split distance is controlled relative to the camera far (or shadow
**Max Distance** if greater than zero), so *0.0* is the eye position and *1.0* **Max Distance** if greater than zero), so *0.0* is the eye position and *1.0*
@ -139,13 +139,13 @@ Sometimes, the transition between a split and the next can look bad. To fix this
the **"Blend Splits"** option can be turned on, which sacrifices detail in exchange the **"Blend Splits"** option can be turned on, which sacrifices detail in exchange
for smoother transitions: for smoother transitions:
.. image:: img/blend_splits.png ![](img/blend_splits.png)
The **"Normal Bias"** parameter can be used to fix special cases of self shadowing The **"Normal Bias"** parameter can be used to fix special cases of self shadowing
when objects are perpendicular to the light. The only downside is that it makes when objects are perpendicular to the light. The only downside is that it makes
the shadow a bit thinner. the shadow a bit thinner.
.. image:: img/normal_bias.png ![](img/normal_bias.png)
The **"Bias Split Scale"** parameter can control extra bias for the splits that The **"Bias Split Scale"** parameter can control extra bias for the splits that
are far away. If self shadowing occurs only on the splits far away, this value can fix them. are far away. If self shadowing occurs only on the splits far away, this value can fix them.
@ -159,7 +159,7 @@ Just experiment which setting works better for your scene.
Shadowmap size for directional lights can be changed in Project Settings -> Rendering -> Quality: Shadowmap size for directional lights can be changed in Project Settings -> Rendering -> Quality:
.. image:: img/project_setting_shadow.png ![](img/project_setting_shadow.png)
Increasing it can solve bias problems, but decrease performance. Shadow mapping is an art of tweaking. Increasing it can solve bias problems, but decrease performance. Shadow mapping is an art of tweaking.
@ -169,18 +169,18 @@ Omni light
Omni light is a point source that emits light spherically in all directions up to a given Omni light is a point source that emits light spherically in all directions up to a given
radius. radius.
.. image:: img/light_omni.png ![](img/light_omni.png)
In real life, light attenuation is an inverse function, which means omni lights don't have a radius. In real life, light attenuation is an inverse function, which means omni lights don't have a radius.
This is a problem because it means computing several omni lights would become demanding. This is a problem because it means computing several omni lights would become demanding.
To solve this, a *Range* is introduced together with an attenuation function. To solve this, a *Range* is introduced together with an attenuation function.
.. image:: img/light_omni_params.png ![](img/light_omni_params.png)
These two parameters allow tweaking how this works visually in order to find aesthetically pleasing results. These two parameters allow tweaking how this works visually in order to find aesthetically pleasing results.
.. image:: img/light_attenuation.png ![](img/light_attenuation.png)
Omni shadow mapping Omni shadow mapping
@ -193,7 +193,7 @@ Omni Shadows can be rendered as either **"Dual Paraboloid" or "Cube Mapped"**.
The former renders quickly, but can cause deformations, The former renders quickly, but can cause deformations,
while the later is more correct, but costlier. while the later is more correct, but costlier.
.. image:: img/shadow_omni_dp_cm.png ![](img/shadow_omni_dp_cm.png)
If the objects being rendered are mostly irregular, Dual Paraboloid is usually If the objects being rendered are mostly irregular, Dual Paraboloid is usually
enough. In any case, as these shadows are cached in a shadow atlas (more on that at the end), it enough. In any case, as these shadows are cached in a shadow atlas (more on that at the end), it
@ -207,7 +207,7 @@ Spot lights are similar to omni lights, except they emit light only into a cone
car lights, reflectors, spots, etc. This type of light is also attenuated towards the car lights, reflectors, spots, etc. This type of light is also attenuated towards the
opposite direction it points to. opposite direction it points to.
.. image:: img/light_spot.png ![](img/light_spot.png)
Spot lights share the same **Range** and **Attenuation** as **OmniLight**, and add two extra parameters: Spot lights share the same **Range** and **Attenuation** as **OmniLight**, and add two extra parameters:
@ -226,15 +226,15 @@ Shadow atlas
Unlike Directional lights, which have their own shadow texture, Omni and Spot lights are assigned to slots of a shadow atlas. Unlike Directional lights, which have their own shadow texture, Omni and Spot lights are assigned to slots of a shadow atlas.
This atlas can be configured in Project Settings -> Rendering -> Quality -> Shadow Atlas. This atlas can be configured in Project Settings -> Rendering -> Quality -> Shadow Atlas.
.. image:: img/shadow_atlas.png ![](img/shadow_atlas.png)
The resolution applies to the whole Shadow Atlas. This atlas is divided into four quadrants: The resolution applies to the whole Shadow Atlas. This atlas is divided into four quadrants:
.. image:: img/shadow_quadrants.png ![](img/shadow_quadrants.png)
Each quadrant can be subdivided to allocate any number of shadow maps; the following is the default subdivision: Each quadrant can be subdivided to allocate any number of shadow maps; the following is the default subdivision:
.. image:: img/shadow_quadrants2.png ![](img/shadow_quadrants2.png)
The allocation logic is simple. The biggest shadow map size (when no subdivision is used) The allocation logic is simple. The biggest shadow map size (when no subdivision is used)
represents a light the size of the screen (or bigger). represents a light the size of the screen (or bigger).
@ -259,8 +259,8 @@ The filter quality of shadows can be tweaked. This can be found in
Project Settings -> Rendering -> Quality -> Shadows. Project Settings -> Rendering -> Quality -> Shadows.
Godot supports no filter, PCF5 and PCF13. Godot supports no filter, PCF5 and PCF13.
.. image:: img/shadow_pcf1.png ![](img/shadow_pcf1.png)
It affects the blockyness of the shadow outline: It affects the blockyness of the shadow outline:
.. image:: img/shadow_pcf2.png ![](img/shadow_pcf2.png)

12
tutorials/3d/occluders.md
View File

@ -24,13 +24,13 @@ The sphere is one of the simplest and fastest occluders, and is easy to setup an
Once you have added an OccluderNode and chosen to add a new `OccluderShapeSphere` in the inspector, click the OccluderShapeSphere in the inspector to bring up the parameters. Once you have added an OccluderNode and chosen to add a new `OccluderShapeSphere` in the inspector, click the OccluderShapeSphere in the inspector to bring up the parameters.
.. image:: img/occluder_shape_sphere_inspector.png ![](img/occluder_shape_sphere_inspector.png)
Unlike many Nodes, the `OccluderShapeSphere` can store multiple spheres in the same object. This is more efficient in the engine, and keeps your SceneTree clearer. You don't have to store all your spheres in one Occluder as it could become tricky to manage, but it is perfectly reasonable to add 10 or so spheres or more. They are very cheap, and often the more you place, the better the match you will get to your geometry. Unlike many Nodes, the `OccluderShapeSphere` can store multiple spheres in the same object. This is more efficient in the engine, and keeps your SceneTree clearer. You don't have to store all your spheres in one Occluder as it could become tricky to manage, but it is perfectly reasonable to add 10 or so spheres or more. They are very cheap, and often the more you place, the better the match you will get to your geometry.
In order to store multiple spheres, they are stored as an Array. If you click on the Array in the inspector, you can increase the size of the Array to add one. In order to store multiple spheres, they are stored as an Array. If you click on the Array in the inspector, you can increase the size of the Array to add one.
.. image:: img/occluder_shape_sphere_terrain.png ![](img/occluder_shape_sphere_terrain.png)
The sphere will appear as a small pink spherical object in the editor window. There are two handles on each sphere. The larger middle handle enables you to move the sphere around in the local space of the Occluder, and the small handle enables you to adjust the radius. The sphere will appear as a small pink spherical object in the editor window. There are two handles on each sphere. The larger middle handle enables you to move the sphere around in the local space of the Occluder, and the small handle enables you to adjust the radius.
@ -56,18 +56,18 @@ Editing and details
Occluder polygons are edited as a list of points which define a *convex* polygon, on a single plane. In order to confine the polygon to a single plane, the points are defined in 2D space rather than 3D. The orientation, position and scale of the polygon is taken instead from the transform of the `Occluder` Node. Occluder polygons are edited as a list of points which define a *convex* polygon, on a single plane. In order to confine the polygon to a single plane, the points are defined in 2D space rather than 3D. The orientation, position and scale of the polygon is taken instead from the transform of the `Occluder` Node.
.. image:: img/occluder_shape_polygon_inspector.png ![](img/occluder_shape_polygon_inspector.png)
If you create an Occluder and add to it a `OccluderShapePolygon` resource, by default it will create 4 starting points forming a rectangle. If you move the position and rotation of the Occluder Node you will see how the rectangle follows the node. When the Occluder is selected in the editor, handles will appear for each of the points. You can actually click and drag these handles, to match your polygon to the environment of your scene. If you create an Occluder and add to it a `OccluderShapePolygon` resource, by default it will create 4 starting points forming a rectangle. If you move the position and rotation of the Occluder Node you will see how the rectangle follows the node. When the Occluder is selected in the editor, handles will appear for each of the points. You can actually click and drag these handles, to match your polygon to the environment of your scene.
.. image:: img/occluder_shape_polygon.png ![](img/occluder_shape_polygon.png)
You are not restricted to 4 points, you can add and remove points in the Inspector, but note that: You are not restricted to 4 points, you can add and remove points in the Inspector, but note that:
- The editor will automatically sanitize your points to form a convex polygon. If you drag a point into a position that would form a concave polygon, it will be ignored. - The editor will automatically sanitize your points to form a convex polygon. If you drag a point into a position that would form a concave polygon, it will be ignored.
- In general, the less edges (and thus points), the faster the polygon will work at runtime. A polygon with 6 edges will have to make twice the calculations of a polygon with 3 edges. In most cases 4 is a good number. - In general, the less edges (and thus points), the faster the polygon will work at runtime. A polygon with 6 edges will have to make twice the calculations of a polygon with 3 edges. In most cases 4 is a good number.
.. image:: img/occluder_shape_polygon2.png ![](img/occluder_shape_polygon2.png)
Holes Holes
~~~~~ ~~~~~
@ -76,7 +76,7 @@ Real world game levels don't always have large continuous areas that should be o
In the inspector you will notice that as well as a set of points for the polygon, the polygon has a set of points for a single "hole". If you add 3 or 4 to your polygon, you will see they appear in the editor as smaller handles. You can drag these around just like the polygon handles, to form a convex hole. In the inspector you will notice that as well as a set of points for the polygon, the polygon has a set of points for a single "hole". If you add 3 or 4 to your polygon, you will see they appear in the editor as smaller handles. You can drag these around just like the polygon handles, to form a convex hole.
.. image:: img/occluder_shape_polygon_hole.png ![](img/occluder_shape_polygon_hole.png)
The hole can be totally within the polygon (such as a window), abutting the edge (like a door) or crossing the edge of the polygon completely, to make the occluder concave. The way the hole works is that the culling follows a simple rule: The hole can be totally within the polygon (such as a window), abutting the edge (like a door) or crossing the edge of the polygon completely, to make the occluder concave. The way the hole works is that the culling follows a simple rule:

16
tutorials/3d/portals/advanced_room_and_portal_usage.md
View File

@ -43,7 +43,7 @@ Gameplay callbacks have one more useful function. By default in Godot, animation
The engine's solution to this problem is the `VisibilityNotifier<class_VisibilityNotifier>` node, and its slightly easier to use variation, the `VisibilityEnabler<class_VisibilityEnabler>` node. VisibilityEnabler can be used to switch off animation and sleep physics when an object is outside the view frustum. You do this by simply placing a VisibilityEnabler node in your subscene (for e.g. a monster). It will do the rest. Consult the `VisibilityEnabler<class_VisibilityEnabler>` documentation for full details. The engine's solution to this problem is the `VisibilityNotifier<class_VisibilityNotifier>` node, and its slightly easier to use variation, the `VisibilityEnabler<class_VisibilityEnabler>` node. VisibilityEnabler can be used to switch off animation and sleep physics when an object is outside the view frustum. You do this by simply placing a VisibilityEnabler node in your subscene (for e.g. a monster). It will do the rest. Consult the `VisibilityEnabler<class_VisibilityEnabler>` documentation for full details.
.. image:: img/visibility_enabler.png ![](img/visibility_enabler.png)
What if the VisibilityEnabler could turn off objects when they were occlusion culled? Well it turns out VisibilityEnabler can. All you have to do is enable the **Gameplay Monitor** in the RoomManager and the rest happens automatically. What if the VisibilityEnabler could turn off objects when they were occlusion culled? Well it turns out VisibilityEnabler can. All you have to do is enable the **Gameplay Monitor** in the RoomManager and the rest happens automatically.
@ -54,13 +54,13 @@ RoomGroups
A `RoomGroup<class_RoomGroup>` is a special node which allows you to deal with a group of rooms at once, instead of having write code for them individually. This is especially useful in conjunction with gameplay callbacks. The most important use for RoomGroups is to delineate between "inside" and "outside" areas. A `RoomGroup<class_RoomGroup>` is a special node which allows you to deal with a group of rooms at once, instead of having write code for them individually. This is especially useful in conjunction with gameplay callbacks. The most important use for RoomGroups is to delineate between "inside" and "outside" areas.
.. image:: img/roomgroups.png ![](img/roomgroups.png)
For instance, when outside you may wish to use a `DirectionalLight<class_DirectionalLight>` to represent the sun. When the outside RoomGroup receives an `enter gameplay` callback, you can turn the light on, and you can turn it off when the RoomGroup exits gameplay. With the light off, performance will increase as there is no need to render it indoors. For instance, when outside you may wish to use a `DirectionalLight<class_DirectionalLight>` to represent the sun. When the outside RoomGroup receives an `enter gameplay` callback, you can turn the light on, and you can turn it off when the RoomGroup exits gameplay. With the light off, performance will increase as there is no need to render it indoors.
This is an example of a simple RoomGroup script to turn on and off a DirectionalLight. Note that you can also use signals for callbacks (the choice is up to you): This is an example of a simple RoomGroup script to turn on and off a DirectionalLight. Note that you can also use signals for callbacks (the choice is up to you):
.. image:: img/roomgroup_notification.png ![](img/roomgroup_notification.png)
.. tip:: You can apply the same technique for switching on and off weather effects, skyboxes and much more. .. tip:: You can apply the same technique for switching on and off weather effects, skyboxes and much more.
@ -95,11 +95,11 @@ Internal room example
The tent is a simple room inside a terrain room (which contains the ground, the trees etc). The tent is a simple room inside a terrain room (which contains the ground, the trees etc).
.. image:: img/tent.png ![](img/tent.png)
.. note:: To use internal rooms for buildings, it is usually a good idea to split the *interior* mesh of the building from the *exterior*. The exterior can be placed in the outer room (so it can be seen from outside, but not from the inside), and the interior should be placed in the interior room (so it only visible inside, or through the portal). .. note:: To use internal rooms for buildings, it is usually a good idea to split the *interior* mesh of the building from the *exterior*. The exterior can be placed in the outer room (so it can be seen from outside, but not from the inside), and the interior should be placed in the interior room (so it only visible inside, or through the portal).
.. image:: img/tent_terrain.png ![](img/tent_terrain.png)
This is perfect for improving performance in open world games. Often your buildings can be scenes (including the rooms and portals) that can be reused. When viewed from the outside, interiors will mostly be culled, and when viewing from the inside other buildings and most of the outside will be culled. The same goes for other players and objects that are inside and outside the buildings. This is perfect for improving performance in open world games. Often your buildings can be scenes (including the rooms and portals) that can be reused. When viewed from the outside, interiors will mostly be culled, and when viewing from the inside other buildings and most of the outside will be culled. The same goes for other players and objects that are inside and outside the buildings.
@ -110,7 +110,7 @@ Internal room scenes
Let us look in detail at another practical example for an open world. We want to place houses (as internal rooms) on an island, but have each house as a self-contained scene containing both the interior *and* the external mesh of the house. Let us look in detail at another practical example for an open world. We want to place houses (as internal rooms) on an island, but have each house as a self-contained scene containing both the interior *and* the external mesh of the house.
.. image:: img/house_scene.png ![](img/house_scene.png)
We have created a Room node (which will become the internal room) into which we have placed the interior meshes. We have also created a Portal with no links (so autolinking will be used). The exterior mesh is *not* within the room. It will be autoplaced, and we are intending for it to be placed within the outer room. We have created a Room node (which will become the internal room) into which we have placed the interior meshes. We have also created a Portal with no links (so autolinking will be used). The exterior mesh is *not* within the room. It will be autoplaced, and we are intending for it to be placed within the outer room.
@ -120,7 +120,7 @@ To get around this problem, there is a special setting to enable you to express
However, if we set this autoplace priority to `-1` for example, the autoplace will always choose a `-1` priority room (if one is present at that location). So if we set the outer room priority to `-1`, it will always place our exterior into our "outside" room. However, if we set this autoplace priority to `-1` for example, the autoplace will always choose a `-1` priority room (if one is present at that location). So if we set the outer room priority to `-1`, it will always place our exterior into our "outside" room.
.. image:: img/autoplace_priority.png ![](img/autoplace_priority.png)
This gives us a helpful extra bit of control for these kinds of situations, and makes the entire system much more flexible. This gives us a helpful extra bit of control for these kinds of situations, and makes the entire system much more flexible.
@ -128,6 +128,6 @@ This gives us a helpful extra bit of control for these kinds of situations, and
The final scene looks something like this, with houses instanced wherever you want them on a giant outer room. The final scene looks something like this, with houses instanced wherever you want them on a giant outer room.
.. image:: img/island.png ![](img/island.png)
The house exteriors will be placed in the outer room, and therefore can always be seen when looking from the outside. The interiors will only be rendered when a view into the entry portals is visible. The house exteriors will be placed in the outer room, and therefore can always be seen when looking from the outside. The interiors will only be rendered when a view into the entry portals is visible.

6
tutorials/3d/portals/editing_rooms_and_portals.md
View File

@ -6,7 +6,7 @@ Example SceneTree
Putting all the ideas together, here is an example scene tree: Putting all the ideas together, here is an example scene tree:
.. image:: img/example_scenetree.png ![](img/example_scenetree.png)
- We have used a `RoomGroup<class_RoomGroup>` to denote an outside area. - We have used a `RoomGroup<class_RoomGroup>` to denote an outside area.
- The `MeshInstance<class_MeshInstance>`\ s inside the `Room<class_Room>`\ s are either `STATIC` or `DYNAMIC`. - The `MeshInstance<class_MeshInstance>`\ s inside the `Room<class_Room>`\ s are either `STATIC` or `DYNAMIC`.
@ -77,7 +77,7 @@ Portals are defined by a combination of the transform of the portal node, and by
The default portal has 4 corners as shown in the inspector: The default portal has 4 corners as shown in the inspector:
.. image:: img/portal_point_editing.png ![](img/portal_point_editing.png)
You can edit these points in the gizmo or inspector to make a better match to the opening in your game level. It's generally better to keep the number of points as low as possible for the efficiency of the system. For example, it's better to risk rendering a little too much than to spend the time culling objects at 20 different edges. You can edit these points in the gizmo or inspector to make a better match to the opening in your game level. It's generally better to keep the number of points as low as possible for the efficiency of the system. For example, it's better to risk rendering a little too much than to spend the time culling objects at 20 different edges.
@ -88,7 +88,7 @@ Room point editing
You also have the option to manually edit the points used to define the convex hull of a room. These points are not present by default. You would typically create them by pressing the **Generate Points** button in the editor toolbar when a room is selected. This will transfer the auto bound from the geometry (or manual `-bound` mesh) into the inspector. Once there are points in the inspector, they will be used and override any other method. So if you wish to revert your manual editing, delete all the room's points. You also have the option to manually edit the points used to define the convex hull of a room. These points are not present by default. You would typically create them by pressing the **Generate Points** button in the editor toolbar when a room is selected. This will transfer the auto bound from the geometry (or manual `-bound` mesh) into the inspector. Once there are points in the inspector, they will be used and override any other method. So if you wish to revert your manual editing, delete all the room's points.
.. image:: img/room_point_editing.png ![](img/room_point_editing.png)
Manually editing points can be useful in some situations, especially where the auto-bound doesn't *quite* get the right result you want. It is usually a good idea to use a lot of **Simplification** in the inspector for the Room before generating the points. Be aware though that by default, the **Simplification** value will be inherited from the RoomManager. Manually editing points can be useful in some situations, especially where the auto-bound doesn't *quite* get the right result you want. It is usually a good idea to use a lot of **Simplification** in the inspector for the Room before generating the points. Be aware though that by default, the **Simplification** value will be inherited from the RoomManager.

16
tutorials/3d/portals/first_steps_with_rooms_and_portals.md
View File

@ -11,20 +11,20 @@ Room Conversion
This conversion must take place every time you want to activate the system. It does not store the *room graph* in your project (for flexibility and to save memory). You can either trigger it by pressing the **Convert Rooms** button in the editor toolbar (which also has a keyboard shortcut) or by calling the `rooms_convert()` method in the RoomManager. The latter method will be what you use in-game. Note that for safety, best practice is to call `rooms_clear()` before unloading or changing levels. This conversion must take place every time you want to activate the system. It does not store the *room graph* in your project (for flexibility and to save memory). You can either trigger it by pressing the **Convert Rooms** button in the editor toolbar (which also has a keyboard shortcut) or by calling the `rooms_convert()` method in the RoomManager. The latter method will be what you use in-game. Note that for safety, best practice is to call `rooms_clear()` before unloading or changing levels.
.. image:: img/convert_rooms_button.png ![](img/convert_rooms_button.png)
If you convert the level while the editor is running, the portal culling system will take over from the normal Godot frustum culling, potentially interfering with editor features. To get around this, you can turn portal culling on and off using either the **View Portal Culling** toggle in the **View** menu on the editor toolbar (which also has a keyboard shortcut) or the **Active** setting in the RoomManager node. If you convert the level while the editor is running, the portal culling system will take over from the normal Godot frustum culling, potentially interfering with editor features. To get around this, you can turn portal culling on and off using either the **View Portal Culling** toggle in the **View** menu on the editor toolbar (which also has a keyboard shortcut) or the **Active** setting in the RoomManager node.
.. note:: To use the RoomManager, you have to tell it where the rooms are in your scene tree, or, more specifically, where the RoomList node is. This RoomList is the parent of your rooms - see below. If the RoomList is not set, conversion will fail, and you will see a warning dialog box. .. note:: To use the RoomManager, you have to tell it where the rooms are in your scene tree, or, more specifically, where the RoomList node is. This RoomList is the parent of your rooms - see below. If the RoomList is not set, conversion will fail, and you will see a warning dialog box.
.. image:: img/room_manager.png ![](img/room_manager.png)
The RoomList The RoomList
^^^^^^^^^^^^ ^^^^^^^^^^^^
Before we create any rooms, we must first create a node to be the parent of all the static objects, rooms, roomgroups, and so on in our level. This node is referred to as the the `RoomList`. Before we create any rooms, we must first create a node to be the parent of all the static objects, rooms, roomgroups, and so on in our level. This node is referred to as the the `RoomList`.
.. image:: img/roomlist_node.png ![](img/roomlist_node.png)
.. note:: The roomlist is **not** a special node type – it can just be a regular Spatial. .. note:: The roomlist is **not** a special node type – it can just be a regular Spatial.
@ -51,7 +51,7 @@ Rooms are defined as convex volumes (or *convex hulls*) because it's trivial to
*A convex hull. The hull is defined as a series of planes facing outward. If a point is behind all the planes, it is within the hull.* *A convex hull. The hull is defined as a series of planes facing outward. If a point is behind all the planes, it is within the hull.*
.. image:: img/convex_hull.png ![](img/convex_hull.png)
Why non-overlapping? Why non-overlapping?
^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^
@ -60,7 +60,7 @@ If two rooms overlap, and a camera or player is in this overlapping zone, then t
If you accidentally create overlapping rooms, the editor will warn you when you convert the rooms, indicating any overlapping zones in red. If you accidentally create overlapping rooms, the editor will warn you when you convert the rooms, indicating any overlapping zones in red.
.. image:: img/room_overlap.png ![](img/room_overlap.png)
The system does attempt to cope with overlapping rooms as best as possible by making the current room *"sticky"*. Each object remembers which room it was in during the previous frame and stays within it as long as it does not move outside the convex hull room bound. This can result in some hysteresis in these overlapping zones. The system does attempt to cope with overlapping rooms as best as possible by making the current room *"sticky"*. Each object remembers which room it was in during the previous frame and stays within it as long as it does not move outside the convex hull room bound. This can result in some hysteresis in these overlapping zones.
@ -86,7 +86,7 @@ The automatic method is used whenever a manual bound is not supplied.
*A simple pair of rooms. The portal margin is shown with translucent red, and the room hulls are shown with green wireframe.* *A simple pair of rooms. The portal margin is shown with translucent red, and the room hulls are shown with green wireframe.*
.. image:: img/simple_room.png ![](img/simple_room.png)
Portals Portals
~~~~~~~ ~~~~~~~
@ -99,7 +99,7 @@ To save editing effort, **only one Portal is required between each pair of Rooms
You should therefore place a portal in only one of each pair of neighbouring rooms - this is the portal's *"source room"*. Generally it doesn't matter which you choose as the source room. The portal normal (the arrow in the gizmo) should face *outward* from the source room. You should therefore place a portal in only one of each pair of neighbouring rooms - this is the portal's *"source room"*. Generally it doesn't matter which you choose as the source room. The portal normal (the arrow in the gizmo) should face *outward* from the source room.
.. image:: img/portal_inspector.png ![](img/portal_inspector.png)
Do not be confused by the arrow. Although the arrow shows which direction the portal faces, most portals will be *two-way*, and can be seen through from both directions. The arrow is more important for ensuring that the portal links to the correct neighbouring room. Do not be confused by the arrow. Although the arrow shows which direction the portal faces, most portals will be *two-way*, and can be seen through from both directions. The arrow is more important for ensuring that the portal links to the correct neighbouring room.
@ -118,7 +118,7 @@ Trying it out
By now you should be able to create a couple of rooms, add some nodes such as MeshInstances within the rooms, and add a portal between the rooms. Try converting the rooms in the editor and see if you can now view the objects in neighbouring rooms through the portal. By now you should be able to create a couple of rooms, add some nodes such as MeshInstances within the rooms, and add a portal between the rooms. Try converting the rooms in the editor and see if you can now view the objects in neighbouring rooms through the portal.
.. image:: img/simple_scenetree.png ![](img/simple_scenetree.png)
You have now mastered the basic principles of the system. You have now mastered the basic principles of the system.

12
tutorials/3d/portals/rooms_and_portals_example.md
View File

@ -13,7 +13,7 @@ This tutorial will introduce you to building a "Hello World" room system with tw
Step 1 Step 1
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_1.png ![](tutorial_simple/img/tutorial_simple_1.png)
- Create a new project. - Create a new project.
- Add a `Spatial<class_Spatial>` as the scene root (on the screenshot, it's called "Root"). - Add a `Spatial<class_Spatial>` as the scene root (on the screenshot, it's called "Root").
@ -28,7 +28,7 @@ Step 1
Step 2 Step 2
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_2.png ![](tutorial_simple/img/tutorial_simple_2.png)
- Now we need to create the other room. - Now we need to create the other room.
- You can do this simply by duplicating the first room (select the `Kitchen` node, right click and choose **Duplicate**). - You can do this simply by duplicating the first room (select the `Kitchen` node, right click and choose **Duplicate**).
@ -38,7 +38,7 @@ Step 2
Step 3 Step 3
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_3.png ![](tutorial_simple/img/tutorial_simple_3.png)
- Next, we will add a portal between the two rooms. - Next, we will add a portal between the two rooms.
- Create a new `Portal<class_Portal>` in the kitchen. - Create a new `Portal<class_Portal>` in the kitchen.
@ -48,7 +48,7 @@ Step 3
Step 4 Step 4
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_4.png ![](tutorial_simple/img/tutorial_simple_4.png)
- To make things more exciting, we want to add a few more boxes to the rooms. - To make things more exciting, we want to add a few more boxes to the rooms.
- Placing these boxes as children or grandchildren of the room nodes explicitly tells the system which room the objects should be in. However, we can also create these objects *outside* the rooms. Provided they are in the RoomList branch, the system will attempt to automatically place them in the correct room at runtime. - Placing these boxes as children or grandchildren of the room nodes explicitly tells the system which room the objects should be in. However, we can also create these objects *outside* the rooms. Provided they are in the RoomList branch, the system will attempt to automatically place them in the correct room at runtime.
@ -59,7 +59,7 @@ Step 4
Step 5 Step 5
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_5.png ![](tutorial_simple/img/tutorial_simple_5.png)
- Next comes a crucial stage. We must let the RoomManager know where the rooms are! - Next comes a crucial stage. We must let the RoomManager know where the rooms are!
- Select the RoomManager and look in the Inspector window in the **Paths** section. - Select the RoomManager and look in the Inspector window in the **Paths** section.
@ -68,7 +68,7 @@ Step 5
Step 6 Step 6
~~~~~~ ~~~~~~
.. image:: tutorial_simple/img/tutorial_simple_6.png ![](tutorial_simple/img/tutorial_simple_6.png)
- Make sure you have saved your project before this next step. It is always a good idea to save and make a backup before converting. - Make sure you have saved your project before this next step. It is always a good idea to save and make a backup before converting.
- Select the RoomManager, and you will see a button in the toolbar at the top of the 3d editor viewport called **Convert Rooms**. Press this button. - Select the RoomManager, and you will see a button in the toolbar at the top of the 3d editor viewport called **Convert Rooms**. Press this button.

4
tutorials/3d/portals/using_objects_in_rooms_and_portals.md
View File

@ -8,7 +8,7 @@ Portal mode
If you look in the inspector, every VisualInstance in Godot is derived from a `CullInstance<class_CullInstance>`, where you can set a `PortalMode`. This determines how objects will behave in the portal system. If you look in the inspector, every VisualInstance in Godot is derived from a `CullInstance<class_CullInstance>`, where you can set a `PortalMode`. This determines how objects will behave in the portal system.
.. image:: img/cull_instance.png ![](img/cull_instance.png)
STATIC STATIC
^^^^^^ ^^^^^^
@ -45,7 +45,7 @@ Autoplace
However, for ease of use, it is also possible to place `STATIC` and `DYNAMIC` objects *outside* the rooms in the scene tree, but within the RoomList branch. The system will attempt to **autoplace** the objects into the appropriate room. This works in most cases but if in doubt, use the explicit approach. The explicit approach is especially needed when dealing with internal rooms, which have some restrictions for sprawling objects. However, for ease of use, it is also possible to place `STATIC` and `DYNAMIC` objects *outside* the rooms in the scene tree, but within the RoomList branch. The system will attempt to **autoplace** the objects into the appropriate room. This works in most cases but if in doubt, use the explicit approach. The explicit approach is especially needed when dealing with internal rooms, which have some restrictions for sprawling objects.
.. image:: img/freeform.png ![](img/freeform.png)
Note that if you place `STATIC` and `DYNAMIC` objects outside of rooms, they will not contribute to the room bound. If you are using the room geometry to derive the bound, tables and chairs can be placed outside the room. However, walls and floors should be explicitly within the Room's branch of the scene tree to ensure the bound is correct. Note that if you place `STATIC` and `DYNAMIC` objects outside of rooms, they will not contribute to the room bound. If you are using the room geometry to derive the bound, tables and chairs can be placed outside the room. However, walls and floors should be explicitly within the Room's branch of the scene tree to ensure the bound is correct.

20
tutorials/3d/reflection_probes.md
View File

@ -22,7 +22,7 @@ Setting up
Create a ReflectionProbe node and wrap it around the area where you want to have reflections: Create a ReflectionProbe node and wrap it around the area where you want to have reflections:
.. image:: img/refprobe_setup.png ![](img/refprobe_setup.png)
This should result in immediate local reflections. If you are using a Sky texture, This should result in immediate local reflections. If you are using a Sky texture,
reflections are by default blended with it. reflections are by default blended with it.
@ -30,13 +30,13 @@ reflections are by default blended with it.
By default, on interiors, reflections may appear not to have much consistence. By default, on interiors, reflections may appear not to have much consistence.
In this scenario, make sure to tick the *"Box Correct"* property. In this scenario, make sure to tick the *"Box Correct"* property.
.. image:: img/refprobe_box_property.png ![](img/refprobe_box_property.png)
This setting changes the reflection from an infinite skybox to reflecting This setting changes the reflection from an infinite skybox to reflecting
a box the size of the probe: a box the size of the probe:
.. image:: img/refprobe_boxcorrect.png ![](img/refprobe_boxcorrect.png)
Adjusting the box walls may help improve the reflection a bit, but it will Adjusting the box walls may help improve the reflection a bit, but it will
always look best in box shaped rooms. always look best in box shaped rooms.
@ -45,21 +45,21 @@ The probe captures the surrounding from the center of the gizmo. If, for some
reason, the room shape or contents occlude the center, it reason, the room shape or contents occlude the center, it
can be displaced to an empty place by moving the handles in the center: can be displaced to an empty place by moving the handles in the center:
.. image:: img/refprobe_center_gizmo.png ![](img/refprobe_center_gizmo.png)
By default, shadow mapping is disabled when rendering probes (only in the By default, shadow mapping is disabled when rendering probes (only in the
rendered image inside the probe, not the actual scene). This is rendered image inside the probe, not the actual scene). This is
a simple way to save on performance and memory. If you want shadows in the probe, a simple way to save on performance and memory. If you want shadows in the probe,
they can be toggled on/off with the *Enable Shadow* setting: they can be toggled on/off with the *Enable Shadow* setting:
.. image:: img/refprobe_shadows.png ![](img/refprobe_shadows.png)
Finally, keep in mind that you may not want the Reflection Probe to render some Finally, keep in mind that you may not want the Reflection Probe to render some
objects. A typical scenario is an enemy inside the room which will objects. A typical scenario is an enemy inside the room which will
move around. To keep objects from being rendered in the reflections, move around. To keep objects from being rendered in the reflections,
use the *Cull Mask* setting: use the *Cull Mask* setting:
.. image:: img/refprobe_cullmask.png ![](img/refprobe_cullmask.png)
Interior vs exterior Interior vs exterior
-------------------- --------------------
@ -68,7 +68,7 @@ If you are using reflection probes in an interior setting, it is recommended
that the **Interior** property be enabled. This stops that the **Interior** property be enabled. This stops
the probe from rendering the sky and also allows custom ambient lighting settings. the probe from rendering the sky and also allows custom ambient lighting settings.
.. image:: img/refprobe_ambient.png ![](img/refprobe_ambient.png)
When probes are set to **Interior**, custom constant ambient lighting can be When probes are set to **Interior**, custom constant ambient lighting can be
specified per probe. Just choose a color and an energy. specified per probe. Just choose a color and an energy.
@ -82,7 +82,7 @@ Blending
Multiple reflection probes can be used, and Godot will blend them where they overlap using a smart algorithm: Multiple reflection probes can be used, and Godot will blend them where they overlap using a smart algorithm:
.. image:: img/refprobe_blending.png ![](img/refprobe_blending.png)
As you can see, this blending is never perfect (after all, these are As you can see, this blending is never perfect (after all, these are
box reflections, not real reflections), but these artifacts box reflections, not real reflections), but these artifacts
@ -94,7 +94,7 @@ Alternatively, Reflection Probes work well blended together with Screen Space
Reflections to solve these problems. Combining them makes local reflections appear Reflections to solve these problems. Combining them makes local reflections appear
more faithful, while probes are only used as a fallback when no screen-space information is found: more faithful, while probes are only used as a fallback when no screen-space information is found:
.. image:: img/refprobe_ssr.png ![](img/refprobe_ssr.png)
Finally, blending interior and exterior probes is the recommended approach when making Finally, blending interior and exterior probes is the recommended approach when making
levels that combine both interiors and exteriors. Near the door, a probe can levels that combine both interiors and exteriors. Near the door, a probe can
@ -109,4 +109,4 @@ customized in Project Settings -> Quality -> Reflections
The default setting of Atlas Subdiv: 8 will allow up to 16 reflection probes in a scene. This value needs to be increased if you need more reflection probes. The default setting of Atlas Subdiv: 8 will allow up to 16 reflection probes in a scene. This value needs to be increased if you need more reflection probes.
.. image:: img/refprobe_atlas.png ![](img/refprobe_atlas.png)

60
tutorials/3d/spatial_material.md
View File

@ -17,7 +17,7 @@ the *Material* property of the mesh. It can be added in the *Material* property
the node using the mesh (such as a MeshInstance node), the *Material Override* property the node using the mesh (such as a MeshInstance node), the *Material Override* property
of the node using the mesh, and the *Material Overlay*. of the node using the mesh, and the *Material Overlay*.
.. image:: img/add_material.png ![](img/add_material.png)
If you add a material to the mesh itself, every time that mesh is used it will have that If you add a material to the mesh itself, every time that mesh is used it will have that
material. If you add a material to the node using the mesh, the material will only be used material. If you add a material to the node using the mesh, the material will only be used
@ -34,7 +34,7 @@ Flags
Spatial materials have many flags determining the general usage of a material. Spatial materials have many flags determining the general usage of a material.
.. image:: img/spatial_material1.png ![](img/spatial_material1.png)
Transparent Transparent
~~~~~~~~~~~ ~~~~~~~~~~~
@ -69,7 +69,7 @@ However, in some cases you might want to show just the albedo (color) and
ignore the rest. Toggling this flag on will remove all shading and display ignore the rest. Toggling this flag on will remove all shading and display
pure, unlit color. pure, unlit color.
.. image:: img/spatial_material26.png ![](img/spatial_material26.png)
Vertex Lighting Vertex Lighting
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~
@ -85,7 +85,7 @@ cases.
Additionally, on low-end or mobile devices, switching to vertex lighting Additionally, on low-end or mobile devices, switching to vertex lighting
can considerably increase rendering performance. can considerably increase rendering performance.
.. image:: img/spatial_material2.png ![](img/spatial_material2.png)
Keep in mind that when vertex lighting is enabled, only directional lighting Keep in mind that when vertex lighting is enabled, only directional lighting
can produce shadows (for performance reasons). can produce shadows (for performance reasons).
@ -101,7 +101,7 @@ Disabling this makes the most sense for drawing indicators in world space,
and works very well with the *Render Priority* property of Material and works very well with the *Render Priority* property of Material
(see the bottom of this page). (see the bottom of this page).
.. image:: img/spatial_material3.png ![](img/spatial_material3.png)
Use Point Size Use Point Size
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~
@ -147,7 +147,7 @@ Vertex Color
This setting allows choosing what is done by default to vertex colors that come This setting allows choosing what is done by default to vertex colors that come
from your 3D modelling application. By default, they are ignored. from your 3D modelling application. By default, they are ignored.
.. image:: img/spatial_material4.png ![](img/spatial_material4.png)
Use as Albedo Use as Albedo
~~~~~~~~~~~~~ ~~~~~~~~~~~~~
@ -166,7 +166,7 @@ Parameters
`SpatialMaterial` also has several configurable parameters to tweak `SpatialMaterial` also has several configurable parameters to tweak
many aspects of the rendering: many aspects of the rendering:
.. image:: img/spatial_material5.png ![](img/spatial_material5.png)
Diffuse Mode Diffuse Mode
~~~~~~~~~~~~ ~~~~~~~~~~~~
@ -186,7 +186,7 @@ the object. The default is *Burley*. Other modes are also available:
ambient light settings or disable ambient light in the spatial material ambient light settings or disable ambient light in the spatial material
to achieve a better effect. to achieve a better effect.
.. image:: img/spatial_material6.png ![](img/spatial_material6.png)
Specular Mode Specular Mode
~~~~~~~~~~~~~ ~~~~~~~~~~~~~
@ -201,7 +201,7 @@ represents the shape of a light source reflected in the object.
* **Toon:** Creates a toon blob, which changes size depending on roughness. * **Toon:** Creates a toon blob, which changes size depending on roughness.
* **Disabled:** Sometimes the blob gets in the way. Begone! * **Disabled:** Sometimes the blob gets in the way. Begone!
.. image:: img/spatial_material7.png ![](img/spatial_material7.png)
Blend Mode Blend Mode
~~~~~~~~~~ ~~~~~~~~~~
@ -215,7 +215,7 @@ other than *Mix* forces the object to go through the transparent pipeline.
* **Sub:** Object is subtracted. * **Sub:** Object is subtracted.
* **Mul:** Object is multiplied. * **Mul:** Object is multiplied.
.. image:: img/spatial_material8.png ![](img/spatial_material8.png)
Cull Mode Cull Mode
~~~~~~~~~ ~~~~~~~~~
@ -248,7 +248,7 @@ Specifies when depth rendering must take place.
with the opaque parts, then transparency is drawn above. with the opaque parts, then transparency is drawn above.
Use this option with transparent grass or tree foliage. Use this option with transparent grass or tree foliage.
.. image:: img/material_depth_draw.png ![](img/material_depth_draw.png)
Line Width Line Width
~~~~~~~~~~ ~~~~~~~~~~
@ -274,7 +274,7 @@ faces the camera:
* **Particles:** Most suited for particle systems, because it allows * **Particles:** Most suited for particle systems, because it allows
specifying animation options. specifying animation options.
.. image:: img/spatial_material9.png ![](img/spatial_material9.png)
The above options are only enabled for Particle Billboard. The above options are only enabled for Particle Billboard.
@ -288,12 +288,12 @@ Grow
Grows the object vertices in the direction pointed by their normals: Grows the object vertices in the direction pointed by their normals:
.. image:: img/spatial_material10.png ![](img/spatial_material10.png)
This is commonly used to create cheap outlines. Add a second material pass, This is commonly used to create cheap outlines. Add a second material pass,
make it black and unshaded, reverse culling (Cull Front), and add some grow: make it black and unshaded, reverse culling (Cull Front), and add some grow:
.. image:: img/spatial_material11.png ![](img/spatial_material11.png)
Use Alpha Scissor Use Alpha Scissor
@ -302,7 +302,7 @@ Use Alpha Scissor
When transparency other than `0` or `1` is not needed, it's possible to When transparency other than `0` or `1` is not needed, it's possible to
set a threshold to prevent the object from rendering semi-transparent pixels. set a threshold to prevent the object from rendering semi-transparent pixels.
.. image:: img/spatial_material12.png ![](img/spatial_material12.png)
This renders the object via the opaque pipeline, which is faster and allows it This renders the object via the opaque pipeline, which is faster and allows it
to use mid- and post-process effects such as SSAO, SSR, etc. to use mid- and post-process effects such as SSAO, SSR, etc.
@ -344,7 +344,7 @@ it unless you need to).
The minimum internal reflectivity is `0.04`, so it's impossible to make a The minimum internal reflectivity is `0.04`, so it's impossible to make a
material completely unreflective, just like in real life. material completely unreflective, just like in real life.
.. image:: img/spatial_material13.png ![](img/spatial_material13.png)
Roughness Roughness
~~~~~~~~~ ~~~~~~~~~
@ -354,7 +354,7 @@ perfect mirror while a value of `1` completely blurs the reflection (simulating
natural microsurfacing). Most common types of materials can be achieved with natural microsurfacing). Most common types of materials can be achieved with
the right combination of *Metallic* and *Roughness*. the right combination of *Metallic* and *Roughness*.
.. image:: img/spatial_material14.png ![](img/spatial_material14.png)
Emission Emission
~~~~~~~~ ~~~~~~~~
@ -364,7 +364,7 @@ does not include light surrounding geometry unless `doc_gi_probes` are used).
This value is added to the resulting final image and is not affected by other This value is added to the resulting final image and is not affected by other
lighting in the scene. lighting in the scene.
.. image:: img/spatial_material15.png ![](img/spatial_material15.png)
Normal map Normal map
~~~~~~~~~~ ~~~~~~~~~~
@ -374,7 +374,7 @@ This does not modify geometry, only the incident angle for light. In Godot,
only the red and green channels of normal maps are used for better compression only the red and green channels of normal maps are used for better compression
and wider compatibility. and wider compatibility.
.. image:: img/spatial_material16.png ![](img/spatial_material16.png)
.. note:: .. note::
@ -395,7 +395,7 @@ emulates this with the *Rim* parameter. Unlike other rim lighting implementation
which just use the emission channel, this one actually takes light into account which just use the emission channel, this one actually takes light into account
(no light means no rim). This makes the effect considerably more believable. (no light means no rim). This makes the effect considerably more believable.
.. image:: img/spatial_material17.png ![](img/spatial_material17.png)
Rim size depends on roughness, and there is a special parameter to specify how Rim size depends on roughness, and there is a special parameter to specify how
it must be colored. If *Tint* is `0`, the color of the light is used for the it must be colored. If *Tint* is `0`, the color of the light is used for the
@ -416,7 +416,7 @@ lighting or looking at a material a specific way to notice a difference.
This can be seen in the image below where clearcoat is turned on in the This can be seen in the image below where clearcoat is turned on in the
right. right.
.. image:: img/clearcoat_comparison.png ![](img/clearcoat_comparison.png)
.. note:: The effect will be more noticeable in Godot 4. .. note:: The effect will be more noticeable in Godot 4.
@ -429,7 +429,7 @@ This changes the shape of the specular blob and aligns it to tangent space.
Anisotropy is commonly used with hair, or to make materials such as brushed Anisotropy is commonly used with hair, or to make materials such as brushed
aluminum more realistic. It works especially well when combined with flowmaps. aluminum more realistic. It works especially well when combined with flowmaps.
.. image:: img/spatial_material18.png ![](img/spatial_material18.png)
Ambient Occlusion Ambient Occlusion
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~
@ -440,7 +440,7 @@ light by default). While it is possible to use Screen-Space Ambient Occlusion
(SSAO) to generate ambient occlusion, nothing beats the quality of a well-baked (SSAO) to generate ambient occlusion, nothing beats the quality of a well-baked
AO map. It is recommended to bake ambient occlusion whenever possible. AO map. It is recommended to bake ambient occlusion whenever possible.
.. image:: img/spatial_material19.png ![](img/spatial_material19.png)
Depth Depth
~~~~~ ~~~~~
@ -453,7 +453,7 @@ added geometry, but an illusion of depth. It may not work for complex objects,
but it produces a realistic depth effect for textures. For best results, but it produces a realistic depth effect for textures. For best results,
*Depth* should be used together with normal mapping. *Depth* should be used together with normal mapping.
.. image:: img/spatial_material20.png ![](img/spatial_material20.png)
Subsurface Scattering Subsurface Scattering
~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~
@ -464,7 +464,7 @@ This effect emulates light that penetrates an object's surface, is scattered,
and then comes out. It is useful to create realistic skin, marble, colored and then comes out. It is useful to create realistic skin, marble, colored
liquids, etc. liquids, etc.
.. image:: img/spatial_material21.png ![](img/spatial_material21.png)
Transmission Transmission
~~~~~~~~~~~~ ~~~~~~~~~~~~
@ -473,7 +473,7 @@ This controls how much light from the lit side (visible to light) is transferred
to the dark side (opposite from the light). This works well for thin objects to the dark side (opposite from the light). This works well for thin objects
such as plant leaves, grass, human ears, etc. such as plant leaves, grass, human ears, etc.
.. image:: img/spatial_material22.png ![](img/spatial_material22.png)
Refraction Refraction
~~~~~~~~~~~ ~~~~~~~~~~~
@ -484,7 +484,7 @@ When refraction is enabled, it supersedes alpha blending, and Godot attempts to
fetch information from behind the object being rendered instead. This allows fetch information from behind the object being rendered instead. This allows
distorting the transparency in a way similar to refraction in real life. distorting the transparency in a way similar to refraction in real life.
.. image:: img/spatial_material23.png ![](img/spatial_material23.png)
Detail Detail
~~~~~~ ~~~~~~
@ -493,7 +493,7 @@ Godot allows using secondary albedo and normal maps to generate a detail
texture, which can be blended in many ways. By combining this with secondary texture, which can be blended in many ways. By combining this with secondary
UV or triplanar modes, many interesting textures can be achieved. UV or triplanar modes, many interesting textures can be achieved.
.. image:: img/spatial_material24.png ![](img/spatial_material24.png)
There are several settings that control how detail is used. There are several settings that control how detail is used.
@ -545,7 +545,7 @@ performed in either world space or object space.
In the image below, you can see how all primitives share the same material with In the image below, you can see how all primitives share the same material with
world triplanar, so the brick texture continues smoothly between them. world triplanar, so the brick texture continues smoothly between them.
.. image:: img/spatial_material25.png ![](img/spatial_material25.png)
Proximity and distance fade Proximity and distance fade
---------------------------- ----------------------------
@ -559,7 +559,7 @@ given distance.
Keep in mind enabling these enables alpha blending, so abusing them for an Keep in mind enabling these enables alpha blending, so abusing them for an
entire scene is usually not a good idea. entire scene is usually not a good idea.
.. image:: img/spatial_material_proxfade.gif ![](img/spatial_material_proxfade.gif)
Render priority Render priority
--------------- ---------------

18
tutorials/3d/using_gridmaps.md
View File

@ -31,7 +31,7 @@ To begin, you need a `MeshLibrary`, which is a collection
of individual meshes that can be used in the gridmap. Open the "MeshLibrary_Source.tscn" of individual meshes that can be used in the gridmap. Open the "MeshLibrary_Source.tscn"
scene to see an example of how to set up the mesh library. scene to see an example of how to set up the mesh library.
.. image:: img/gridmap_meshlibrary1.png ![](img/gridmap_meshlibrary1.png)
As you can see, this scene has a `Spatial` node as its root, and As you can see, this scene has a `Spatial` node as its root, and
a number of `MeshInstance` node children. a number of `MeshInstance` node children.
@ -46,14 +46,14 @@ You can manually assign a `StaticBody` and
`CollisionShape` to each mesh. Alternatively, you can use the "Mesh" menu `CollisionShape` to each mesh. Alternatively, you can use the "Mesh" menu
to automatically create the collision body based on the mesh data. to automatically create the collision body based on the mesh data.
.. image:: img/gridmap_create_body.png ![](img/gridmap_create_body.png)
Note that a "Convex" collision body will work better for simple meshes. For more Note that a "Convex" collision body will work better for simple meshes. For more
complex shapes, select "Create Trimesh Static Body". Once each mesh has complex shapes, select "Create Trimesh Static Body". Once each mesh has
a physics body and collision shape assigned, your mesh library is ready to a physics body and collision shape assigned, your mesh library is ready to
be used. be used.
.. image:: img/gridmap_mesh_scene.png ![](img/gridmap_mesh_scene.png)
Materials Materials
@ -78,7 +78,7 @@ geometry nodes below and bake the NavigationMesh.
With small grid cells it is often necessary to reduce the NavigationMesh properties With small grid cells it is often necessary to reduce the NavigationMesh properties
for agent radius and region minimum size. for agent radius and region minimum size.
.. image:: img/meshlibrary_scene.png ![](img/meshlibrary_scene.png)
Nodes below the NavigationMeshInstance are ignored for the MeshLibrary scene export, so Nodes below the NavigationMeshInstance are ignored for the MeshLibrary scene export, so
additional nodes can be added as source geometry just for baking the navmesh. additional nodes can be added as source geometry just for baking the navmesh.
@ -94,7 +94,7 @@ Exporting the MeshLibrary
To export the library, click on Scene -> Convert To.. -> MeshLibrary.., and save it To export the library, click on Scene -> Convert To.. -> MeshLibrary.., and save it
as a resource. as a resource.
.. image:: img/gridmap_export.png ![](img/gridmap_export.png)
You can find an already exported MeshLibrary in the project named "MeshLibrary.tres". You can find an already exported MeshLibrary in the project named "MeshLibrary.tres".
@ -105,7 +105,7 @@ Create a new scene and add a GridMap node. Add the mesh library by dragging
the resource file from the FileSystem dock and dropping it in the "Theme" property the resource file from the FileSystem dock and dropping it in the "Theme" property
in the Inspector. in the Inspector.
.. image:: img/gridmap_main.png ![](img/gridmap_main.png)
The "Cell/Size" property should be set to the size of your meshes. You can leave The "Cell/Size" property should be set to the size of your meshes. You can leave
it at the default value for the demo. Set the "Center Y" property to "Off". it at the default value for the demo. Set the "Center Y" property to "Off".
@ -117,18 +117,18 @@ and use Right-click.
Click on the "GridMap" menu to see options and shortcuts. For example, pressing Click on the "GridMap" menu to see options and shortcuts. For example, pressing
:kbd:`S` rotates a tile around the y-axis. :kbd:`S` rotates a tile around the y-axis.
.. image:: img/gridmap_menu.png ![](img/gridmap_menu.png)
Holding :kbd:`Shift` and dragging with the left mouse button will draw a selection Holding :kbd:`Shift` and dragging with the left mouse button will draw a selection
box. You can duplicate or clear the selected area using the respective menu box. You can duplicate or clear the selected area using the respective menu
options. options.
.. image:: img/gridmap_select.png ![](img/gridmap_select.png)
In the menu, you can also change the axis you're drawing on, as well as shift In the menu, you can also change the axis you're drawing on, as well as shift
the drawing plane higher or lower on its axis. the drawing plane higher or lower on its axis.
.. image:: img/gridmap_shift_axis.png ![](img/gridmap_shift_axis.png)
Using GridMap in code Using GridMap in code
--------------------- ---------------------

8
tutorials/3d/using_multi_mesh_instance.md
View File

@ -34,7 +34,7 @@ In the tree case, this would be the tree itself.
In our example, we would use a `Spatial` node as the root node of In our example, we would use a `Spatial` node as the root node of
the scene. Your scene tree would look like this: the scene. Your scene tree would look like this:
.. image:: img/multimesh_scene_tree.png ![](img/multimesh_scene_tree.png)
.. note:: For simplicity's sake, this tutorial uses built-in primitives. .. note:: For simplicity's sake, this tutorial uses built-in primitives.
@ -43,9 +43,9 @@ toolbar, you should see an extra button called `MultiMesh` next to `View`.
Click it and select *Populate surface* in the dropdown menu. A new window titled Click it and select *Populate surface* in the dropdown menu. A new window titled
*Populate MultiMesh* will pop up. *Populate MultiMesh* will pop up.
.. image:: img/multimesh_toolbar.png ![](img/multimesh_toolbar.png)
.. image:: img/multimesh_settings.png ![](img/multimesh_settings.png)
MultiMesh settings MultiMesh settings
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~
@ -101,6 +101,6 @@ result, you can delete the mesh instance used as the source mesh.
The end result should look like this: The end result should look like this:
.. image:: img/multimesh_result.png ![](img/multimesh_result.png)
To change the result, repeat the previous steps with different parameters. To change the result, repeat the previous steps with different parameters.

20
tutorials/3d/using_transforms.md
View File

@ -13,11 +13,11 @@ At first, this seems easy. For simple games, this way of thinking may even be en
Angles in three dimensions are most commonly referred to as "Euler Angles". Angles in three dimensions are most commonly referred to as "Euler Angles".
.. image:: img/transforms_euler.png ![](img/transforms_euler.png)
Euler angles were introduced by mathematician Leonhard Euler in the early 1700s. Euler angles were introduced by mathematician Leonhard Euler in the early 1700s.
.. image:: img/transforms_euler_himself.png ![](img/transforms_euler_himself.png)
This way of representing 3D rotations was groundbreaking at the time, but it has several shortcomings when used in game development (which is to be expected from a guy with a funny This way of representing 3D rotations was groundbreaking at the time, but it has several shortcomings when used in game development (which is to be expected from a guy with a funny
hat). hat).
@ -42,7 +42,7 @@ from 3 different angles, depending on *the order of the rotations*.
Following is a visualization of rotation axes (in X, Y, Z order) in a gimbal (from Wikipedia). As you can see, the orientation of each axis depends on the rotation of the previous one: Following is a visualization of rotation axes (in X, Y, Z order) in a gimbal (from Wikipedia). As you can see, the orientation of each axis depends on the rotation of the previous one:
.. image:: img/transforms_gimbal.gif ![](img/transforms_gimbal.gif)
You may be wondering how this affects you. Let's look at a practical example: You may be wondering how this affects you. Let's look at a practical example:
@ -50,11 +50,11 @@ Imagine you are working on a first-person controller (e.g. an FPS game). Moving
In this case to achieve the desired effect, rotation must be applied first in the *Y* axis ("up" in this case, since Godot uses a "Y-Up" orientation), followed by rotation in the *X* axis. In this case to achieve the desired effect, rotation must be applied first in the *Y* axis ("up" in this case, since Godot uses a "Y-Up" orientation), followed by rotation in the *X* axis.
.. image:: img/transforms_rotate1.gif ![](img/transforms_rotate1.gif)
If we were to apply rotation in the *X* axis first, and then in *Y*, the effect would be undesired: If we were to apply rotation in the *X* axis first, and then in *Y*, the effect would be undesired:
.. image:: img/transforms_rotate2.gif ![](img/transforms_rotate2.gif)
Depending on the type of game or effect desired, the order in which you want axis rotations to be applied may differ. Therefore, applying rotations in X, Y, and Z is not enough: you also need a *rotation order*. Depending on the type of game or effect desired, the order in which you want axis rotations to be applied may differ. Therefore, applying rotations in X, Y, and Z is not enough: you also need a *rotation order*.
@ -63,11 +63,11 @@ Interpolation
Another problem with using Euler angles is interpolation. Imagine you want to transition between two different camera or enemy positions (including rotations). One logical way to approach this is to interpolate the angles from one position to the next. One would expect it to look like this: Another problem with using Euler angles is interpolation. Imagine you want to transition between two different camera or enemy positions (including rotations). One logical way to approach this is to interpolate the angles from one position to the next. One would expect it to look like this:
.. image:: img/transforms_interpolate1.gif ![](img/transforms_interpolate1.gif)
But this does not always have the expected effect when using angles: But this does not always have the expected effect when using angles:
.. image:: img/transforms_interpolate2.gif ![](img/transforms_interpolate2.gif)
The camera actually rotated the opposite direction! The camera actually rotated the opposite direction!
@ -110,16 +110,16 @@ Following the OpenGL convention, `X` is the *Right* axis, `Y` is the *Up* axis a
Together with the *basis*, a transform also has an *origin*. This is a *Vector3* specifying how far away from the actual origin `(0, 0, 0)` this transform is. Combining the *basis* with the *origin*, a *transform* efficiently represents a unique translation, rotation, and scale in space. Together with the *basis*, a transform also has an *origin*. This is a *Vector3* specifying how far away from the actual origin `(0, 0, 0)` this transform is. Combining the *basis* with the *origin*, a *transform* efficiently represents a unique translation, rotation, and scale in space.
.. image:: img/transforms_camera.png ![](img/transforms_camera.png)
One way to visualize a transform is to look at an object's 3D gizmo while in "local space" mode. One way to visualize a transform is to look at an object's 3D gizmo while in "local space" mode.
.. image:: img/transforms_local_space.png ![](img/transforms_local_space.png)
The gizmo's arrows show the `X`, `Y`, and `Z` axes (in red, green, and blue respectively) of the basis, while the gizmo's center is at the object's origin. The gizmo's arrows show the `X`, `Y`, and `Z` axes (in red, green, and blue respectively) of the basis, while the gizmo's center is at the object's origin.
.. image:: img/transforms_gizmo.png ![](img/transforms_gizmo.png)
For more information on the mathematics of vectors and transforms, please read the `doc_vector_math` tutorials. For more information on the mathematics of vectors and transforms, please read the `doc_vector_math` tutorials.

58
tutorials/animation/2d_skeletons.md
View File

@ -36,16 +36,16 @@ Setup
animating within Godot. animating within Godot.
For this tutorial, we will be using a single image to construct our character. For this tutorial, we will be using a single image to construct our character.
Download it from :download:`gBot_pieces.png <img/gBot_pieces.png>` or save the Download it from :download:`gBot_pieces.png) <img/gBot_pieces.png)>` or save the
image below. image below.
.. image:: img/gBot_pieces.png ![](img/gBot_pieces.png)
It is also advised to download the final character image It is also advised to download the final character image
:download:`gBot_complete.png <img/gBot_complete.png>` to have a good reference :download:`gBot_complete.png) <img/gBot_complete.png)>` to have a good reference
for putting the different pieces together. for putting the different pieces together.
.. image:: img/gBot_complete.png ![](img/gBot_complete.png)
Creating the polygons Creating the polygons
--------------------- ---------------------
@ -57,22 +57,22 @@ created as a root for the polygons.
Begin with a `Polygon2D` node. There is no need to place it anywhere in the Begin with a `Polygon2D` node. There is no need to place it anywhere in the
scene for now, so simply create it like this: scene for now, so simply create it like this:
.. image:: img/skel2d1.png ![](img/skel2d1.png)
Select it and assign the texture with the character pieces you have downloaded Select it and assign the texture with the character pieces you have downloaded
before: before:
.. image:: img/skel2d2.png ![](img/skel2d2.png)
Drawing a polygon directly is not advised. Instead, open the "UV" dialog for the Drawing a polygon directly is not advised. Instead, open the "UV" dialog for the
polygon: polygon:
.. image:: img/skel2d3.png ![](img/skel2d3.png)
Head over to the *Points* mode, select the pencil and draw a polygon around the Head over to the *Points* mode, select the pencil and draw a polygon around the
desired piece: desired piece:
.. image:: img/skel2d4.png ![](img/skel2d4.png)
Duplicate the polygon node and give it a proper name. Then, enter the "UV" Duplicate the polygon node and give it a proper name. Then, enter the "UV"
dialog again and replace the old polygon with another one in the new desired dialog again and replace the old polygon with another one in the new desired
@ -84,11 +84,11 @@ the previous polygon instead of drawing a new one.
After moving the polygon, remember to update the UV by selecting Edit -> "Polygon After moving the polygon, remember to update the UV by selecting Edit -> "Polygon
-> UV" in the Polygon 2D UV Editor. -> UV" in the Polygon 2D UV Editor.
.. image:: img/skel2d5.png ![](img/skel2d5.png)
Keep doing this until you mapped all pieces. Keep doing this until you mapped all pieces.
.. image:: img/skel2d6.png ![](img/skel2d6.png)
You will notice that pieces for nodes appear in the same layout as they do in You will notice that pieces for nodes appear in the same layout as they do in
the original texture. This is because by default, when you draw a polygon, the the original texture. This is because by default, when you draw a polygon, the
@ -98,12 +98,12 @@ Rearrange the pieces and build the character. This should be pretty quick. There
is no need to change pivots, so don't bother making sure rotation pivots for is no need to change pivots, so don't bother making sure rotation pivots for
each piece are right; you can leave them be for now. each piece are right; you can leave them be for now.
.. image:: img/skel2d7.png ![](img/skel2d7.png)
Ah, the visual order of the pieces is not correct yet, as some are covering Ah, the visual order of the pieces is not correct yet, as some are covering
wrong pieces. Rearrange the order of the nodes to fix this: wrong pieces. Rearrange the order of the nodes to fix this:
.. image:: img/skel2d8.png ![](img/skel2d8.png)
And there you go! It was definitely much easier than in the cutout tutorial. And there you go! It was definitely much easier than in the cutout tutorial.
@ -113,23 +113,23 @@ Creating the skeleton
Create a `Skeleton2D` node as a child of the root node. This will be the base Create a `Skeleton2D` node as a child of the root node. This will be the base
of our skeleton: of our skeleton:
.. image:: img/skel2d9.png ![](img/skel2d9.png)
Create a `Bone2D` node as a child of the skeleton. Put it on the hip (usually Create a `Bone2D` node as a child of the skeleton. Put it on the hip (usually
skeletons start here). The bone will be pointing to the right, but you can skeletons start here). The bone will be pointing to the right, but you can
ignore this for now. ignore this for now.
.. image:: img/skel2d10.png ![](img/skel2d10.png)
Keep creating bones in hierarchy and naming them accordingly. Keep creating bones in hierarchy and naming them accordingly.
.. image:: img/skel2d11.png ![](img/skel2d11.png)
At the end of this chain, there will be a *jaw* node. It is, again, very short At the end of this chain, there will be a *jaw* node. It is, again, very short
and pointing to the right. This is normal for bones without children. The length and pointing to the right. This is normal for bones without children. The length
of *tip* bones can be changed with a property in the inspector: of *tip* bones can be changed with a property in the inspector:
.. image:: img/skel2d12.png ![](img/skel2d12.png)
In this case, we don't need to rotate the bone (coincidentally the jaw points In this case, we don't need to rotate the bone (coincidentally the jaw points
right in the sprite), but in case you need to, feel free to do it. Again, this right in the sprite), but in case you need to, feel free to do it. Again, this
@ -138,14 +138,14 @@ length or a specific rotation.
Keep going and build the whole skeleton: Keep going and build the whole skeleton:
.. image:: img/skel2d13.png ![](img/skel2d13.png)
You will notice that all bones raise an annoying warning about a missing rest You will notice that all bones raise an annoying warning about a missing rest
pose. This means that it's time to set one. Go to the *skeleton* node and create pose. This means that it's time to set one. Go to the *skeleton* node and create
a rest pose. This pose is the default one, you can come back to it anytime you a rest pose. This pose is the default one, you can come back to it anytime you
want (which is very handy for animating): want (which is very handy for animating):
.. image:: img/skel2d14.png ![](img/skel2d14.png)
The warnings will go away. If you modify the skeleton (add/remove bones) you The warnings will go away. If you modify the skeleton (add/remove bones) you
will need to set the rest pose again. will need to set the rest pose again.
@ -157,15 +157,15 @@ Select the previously created polygons and assign the skeleton node to their
`Skeleton` property. This will ensure that they can eventually be deformed by `Skeleton` property. This will ensure that they can eventually be deformed by
it. it.
.. image:: img/skel2d15.png ![](img/skel2d15.png)
Click the property highlighted above and select the skeleton node: Click the property highlighted above and select the skeleton node:
.. image:: img/skel2d16.png ![](img/skel2d16.png)
Again, open the UV editor for the polygon and go to the *Bones* section. Again, open the UV editor for the polygon and go to the *Bones* section.
.. image:: img/skel2d17.png ![](img/skel2d17.png)
You will not be able to paint weights yet. For this you need to synchronize the You will not be able to paint weights yet. For this you need to synchronize the
list of bones from the skeleton with the polygon. This step is done only once list of bones from the skeleton with the polygon. This step is done only once
@ -174,13 +174,13 @@ It ensures that your rigging information is kept in the polygon, even if a
skeleton node is accidentally lost or the skeleton modified. Push the "Sync skeleton node is accidentally lost or the skeleton modified. Push the "Sync
Bones to Polygon" button to sync the list. Bones to Polygon" button to sync the list.
.. image:: img/skel2d18.png ![](img/skel2d18.png)
The list of bones will automatically appear. By default, your polygon has no The list of bones will automatically appear. By default, your polygon has no
weight assigned to any of them. Select the bones you want to assign weight to weight assigned to any of them. Select the bones you want to assign weight to
and paint them: and paint them:
.. image:: img/skel2d19.png ![](img/skel2d19.png)
Points in white have a full weight assigned, while points in black are not Points in white have a full weight assigned, while points in black are not
influenced by the bone. If the same point is painted white for multiple bones, influenced by the bone. If the same point is painted white for multiple bones,
@ -188,7 +188,7 @@ the influence will be distributed amongst them (so usually there is not that
much need to use shades in-between unless you want to polish the bending much need to use shades in-between unless you want to polish the bending
effect). effect).
.. image:: img/skel2d20.gif ![](img/skel2d20.gif)
After painting the weights, animating the bones (NOT the polygons!) will have After painting the weights, animating the bones (NOT the polygons!) will have
the desired effect of modifying and bending the polygons accordingly. As you the desired effect of modifying and bending the polygons accordingly. As you
@ -197,7 +197,7 @@ only need to animate bones in this approach, work becomes much easier!
But it's not all roses. Trying to animate bones that bend the polygon will often But it's not all roses. Trying to animate bones that bend the polygon will often
yield unexpected results: yield unexpected results:
.. image:: img/skel2d21.gif ![](img/skel2d21.gif)
This happens because Godot generates internal triangles that connect the points This happens because Godot generates internal triangles that connect the points
when drawing the polygon. They don't always bend the way you would expect. To when drawing the polygon. They don't always bend the way you would expect. To
@ -210,18 +210,18 @@ Internal vertices
Open the UV menu for each bone again and go to the *Points* section. Add some Open the UV menu for each bone again and go to the *Points* section. Add some
internal vertices in the regions where you expect the geometry to bend: internal vertices in the regions where you expect the geometry to bend:
.. image:: img/skel2d22.png ![](img/skel2d22.png)
Now, go to the *Polygon* section and redraw your own polygons with more detail. Now, go to the *Polygon* section and redraw your own polygons with more detail.
Imagine that, as your polygons bend, you need to make sure they deform the least Imagine that, as your polygons bend, you need to make sure they deform the least
possible, so experiment a bit to find the right setup. possible, so experiment a bit to find the right setup.
.. image:: img/skel2d23.png ![](img/skel2d23.png)
Once you start drawing, the original polygon will disappear and you will be free Once you start drawing, the original polygon will disappear and you will be free
to create your own: to create your own:
.. image:: img/skel2d24.png ![](img/skel2d24.png)
This amount of detail is usually fine, though you may want to have more This amount of detail is usually fine, though you may want to have more
fine-grained control over where triangles go. Experiment by yourself until you fine-grained control over where triangles go. Experiment by yourself until you
@ -232,4 +232,4 @@ painting! Go to the *Bones* section again to assign them to the right bones.
Once you are all set, you will get much better results: Once you are all set, you will get much better results:
.. image:: img/skel2d25.gif ![](img/skel2d25.gif)

38
tutorials/animation/animation_tree.md
View File

@ -31,7 +31,7 @@ new scene which contains the imported one. Afterwards, point the `AnimationTree`
This is how it's done in the `Third Person Shooter demo <https://github.com/godotengine/tps-demo>`_, for reference: This is how it's done in the `Third Person Shooter demo <https://github.com/godotengine/tps-demo>`_, for reference:
.. image:: img/animtree1.png ![](img/animtree1.png)
A new scene was created for the player with a `KinematicBody` as root. Inside this scene, the original `.dae` (Collada) file was instantiated A new scene was created for the player with a `KinematicBody` as root. Inside this scene, the original `.dae` (Collada) file was instantiated
and an `AnimationTree` node was created. and an `AnimationTree` node was created.
@ -47,7 +47,7 @@ There are three main types of nodes that can be used in `AnimationTree`:
To set a root node in `AnimationTree`, a few types are available: To set a root node in `AnimationTree`, a few types are available:
.. image:: img/animtree2.png ![](img/animtree2.png)
* `AnimationNodeAnimation`: Selects an animation from the list and plays it. This is the simplest root node, and generally not used directly as root. * `AnimationNodeAnimation`: Selects an animation from the list and plays it. This is the simplest root node, and generally not used directly as root.
* `AnimationNodeBlendTree`: Contains many *blend* type nodes, such as mix, blend2, blend3, one shot, etc. This is one of the most commonly used roots. * `AnimationNodeBlendTree`: Contains many *blend* type nodes, such as mix, blend2, blend3, one shot, etc. This is one of the most commonly used roots.
@ -60,13 +60,13 @@ Blend tree
An `AnimationNodeBlendTree` can contain both root and regular nodes used for blending. Nodes are added to the graph from a menu: An `AnimationNodeBlendTree` can contain both root and regular nodes used for blending. Nodes are added to the graph from a menu:
.. image:: img/animtree3.png ![](img/animtree3.png)
All blend trees contain an `Output` node by default, and something has to be connected to it in order for animations to play. All blend trees contain an `Output` node by default, and something has to be connected to it in order for animations to play.
The easiest way to test this functionality is to connect an `Animation` node to it directly: The easiest way to test this functionality is to connect an `Animation` node to it directly:
.. image:: img/animtree4.png ![](img/animtree4.png)
This will simply play back the animation. Make sure that the `AnimationTree` is active for something to actually happen. This will simply play back the animation. Make sure that the `AnimationTree` is active for something to actually happen.
@ -77,21 +77,21 @@ Blend2 / Blend3
These nodes will blend between two or three inputs by a user-specified blend value: These nodes will blend between two or three inputs by a user-specified blend value:
.. image:: img/animtree5.gif ![](img/animtree5.gif)
For more complex blending, it is advised to use blend spaces instead. For more complex blending, it is advised to use blend spaces instead.
Blending can also use filters, i.e. you can control individually which tracks go through the blend function. Blending can also use filters, i.e. you can control individually which tracks go through the blend function.
This is very useful for layering animations on top of each other. This is very useful for layering animations on top of each other.
.. image:: img/animtree6.png ![](img/animtree6.png)
OneShot OneShot
^^^^^^^ ^^^^^^^
This node will execute a sub-animation and return once it finishes. Blend times for fading in and out can be customized, as well as filters. This node will execute a sub-animation and return once it finishes. Blend times for fading in and out can be customized, as well as filters.
.. image:: img/animtree6b.gif ![](img/animtree6b.gif)
Seek Seek
^^^^ ^^^^
@ -130,23 +130,23 @@ BlendSpace2D
`BlendSpace2D` is a node to do advanced blending in two dimensions. Points are added to a two-dimensional space and then a position `BlendSpace2D` is a node to do advanced blending in two dimensions. Points are added to a two-dimensional space and then a position
can be controlled to determine blending: can be controlled to determine blending:
.. image:: img/animtree7.gif ![](img/animtree7.gif)
The ranges in X and Y can be controlled (and labeled for convenience). By default, points can be placed anywhere (just right-click on The ranges in X and Y can be controlled (and labeled for convenience). By default, points can be placed anywhere (just right-click on
the coordinate system or use the *add point* button) and triangles will be generated automatically using Delaunay. the coordinate system or use the *add point* button) and triangles will be generated automatically using Delaunay.
.. image:: img/animtree8.gif ![](img/animtree8.gif)
It is also possible to draw the triangles manually by disabling the *auto triangle* option, though this is rarely necessary: It is also possible to draw the triangles manually by disabling the *auto triangle* option, though this is rarely necessary:
.. image:: img/animtree9.png ![](img/animtree9.png)
Finally, it is possible to change the blend mode. By default, blending happens by interpolating points inside the closest triangle. Finally, it is possible to change the blend mode. By default, blending happens by interpolating points inside the closest triangle.
When dealing with 2D animations (frame by frame), you may want to switch to *Discrete* mode. When dealing with 2D animations (frame by frame), you may want to switch to *Discrete* mode.
Alternatively, if you want to keep the current play position when switching between discrete animations, there is a *Carry* mode. Alternatively, if you want to keep the current play position when switching between discrete animations, there is a *Carry* mode.
This mode can be changed in the *Blend* menu: This mode can be changed in the *Blend* menu:
.. image:: img/animtree10.png ![](img/animtree10.png)
BlendSpace1D BlendSpace1D
^^^^^^^^^^^^ ^^^^^^^^^^^^
@ -159,11 +159,11 @@ StateMachine
This node acts as a state machine with root nodes as states. Root nodes can be created and connected via lines. States are connected via *Transitions*, This node acts as a state machine with root nodes as states. Root nodes can be created and connected via lines. States are connected via *Transitions*,
which are connections with special properties. Transitions are uni-directional, but two can be used to connect in both directions. which are connections with special properties. Transitions are uni-directional, but two can be used to connect in both directions.
.. image:: img/animtree11.gif ![](img/animtree11.gif)
There are many types of transition: There are many types of transition:
.. image:: img/animtree12.png ![](img/animtree12.png)
* *Immediate*: Will switch to the next state immediately. The current state will end and blend into the beginning of the new one. * *Immediate*: Will switch to the next state immediately. The current state will end and blend into the beginning of the new one.
* *Sync*: Will switch to the next state immediately, but will seek the new state to the playback position of the old state. * *Sync*: Will switch to the next state immediately, but will seek the new state to the playback position of the old state.
@ -171,7 +171,7 @@ There are many types of transition:
Transitions also have a few properties. Click any transition and it will be displayed in the inspector dock: Transitions also have a few properties. Click any transition and it will be displayed in the inspector dock:
.. image:: img/animtree13.png ![](img/animtree13.png)
* *Switch Mode* is the transition type (see above), it can be modified after creation here. * *Switch Mode* is the transition type (see above), it can be modified after creation here.
* *Auto Advance* will turn on the transition automatically when this state is reached. This works best with the *At End* switch mode. * *Auto Advance* will turn on the transition automatically when this state is reached. This works best with the *At End* switch mode.
@ -191,7 +191,7 @@ This allows animating characters in a way where steps actually match the floor b
When playing back the animation in Godot, it is possible to select this bone as the *root motion track*. Doing so will cancel the bone When playing back the animation in Godot, it is possible to select this bone as the *root motion track*. Doing so will cancel the bone
transformation visually (the animation will stay in place). transformation visually (the animation will stay in place).
.. image:: img/animtree14.png ![](img/animtree14.png)
Afterwards, the actual motion can be retrieved via the `AnimationTree` API as a transform: Afterwards, the actual motion can be retrieved via the `AnimationTree` API as a transform:
@ -206,7 +206,7 @@ This can be fed to functions such as `KinematicBody.move_and_slide` to control t
There is also a tool node, `RootMotionView`, that can be placed in a scene and will act as a custom floor for your There is also a tool node, `RootMotionView`, that can be placed in a scene and will act as a custom floor for your
character and animations (this node is disabled by default during the game). character and animations (this node is disabled by default during the game).
.. image:: img/animtree15.gif ![](img/animtree15.gif)
Controlling from code Controlling from code
@ -222,14 +222,14 @@ or reuse nodes with a complex layout (such as a state machine or blend space) in
The actual animation data is contained in the `AnimationTree` node and is accessed via properties. The actual animation data is contained in the `AnimationTree` node and is accessed via properties.
Check the "Parameters" section of the `AnimationTree` node to see all the parameters that can be modified in real-time: Check the "Parameters" section of the `AnimationTree` node to see all the parameters that can be modified in real-time:
.. image:: img/animtree16.png ![](img/animtree16.png)
This is handy because it makes it possible to animate them from an `AnimationPlayer`, or even the `AnimationTree` itself, This is handy because it makes it possible to animate them from an `AnimationPlayer`, or even the `AnimationTree` itself,
allowing the realization of very complex animation logic. allowing the realization of very complex animation logic.
To modify these values from code, the property path must be obtained. This is done easily by hovering the mouse over any of the parameters: To modify these values from code, the property path must be obtained. This is done easily by hovering the mouse over any of the parameters:
.. image:: img/animtree17.png ![](img/animtree17.png)
Which allows setting them or reading them: Which allows setting them or reading them:
@ -270,4 +270,4 @@ gdscript GDScript
The state machine must be running before you can travel. Make sure to either call `start()` or choose a node to **Autoplay on Load**. The state machine must be running before you can travel. Make sure to either call `start()` or choose a node to **Autoplay on Load**.
.. image:: img/animtree18.png ![](img/animtree18.png)

58
tutorials/animation/cutout_animation.md
View File

@ -57,7 +57,7 @@ For this tutorial, we will use as demo content the pieces of the
`GBot <https://www.youtube.com/watch?v=S13FrWuBMx4&list=UUckpus81gNin1aV8WSffRKw>`__ `GBot <https://www.youtube.com/watch?v=S13FrWuBMx4&list=UUckpus81gNin1aV8WSffRKw>`__
character, created by Andreas Esau. character, created by Andreas Esau.
.. image:: img/tuto_cutout_walk.gif ![](img/tuto_cutout_walk.gif)
Get your assets: :download:`gbot_resources.zip <files/gbot_resources.zip>`. Get your assets: :download:`gbot_resources.zip <files/gbot_resources.zip>`.
@ -66,31 +66,31 @@ Setting up the rig
Create an empty Node2D as root of the scene, we will work under it: Create an empty Node2D as root of the scene, we will work under it:
.. image:: img/tuto_cutout1.png ![](img/tuto_cutout1.png)
The first node of the model is the hip. The first node of the model is the hip.
Generally, both in 2D and 3D, the hip is the root of the skeleton. This Generally, both in 2D and 3D, the hip is the root of the skeleton. This
makes it easier to animate: makes it easier to animate:
.. image:: img/tuto_cutout2.png ![](img/tuto_cutout2.png)
Next will be the torso. The torso needs to be a child of the hip, so Next will be the torso. The torso needs to be a child of the hip, so
create a child sprite and load the torso texture, later accommodate it properly: create a child sprite and load the torso texture, later accommodate it properly:
.. image:: img/tuto_cutout3.png ![](img/tuto_cutout3.png)
This looks good. Let's see if our hierarchy works as a skeleton by This looks good. Let's see if our hierarchy works as a skeleton by
rotating the torso. We can do this be pressing :kbd:`E` to enter rotate mode, rotating the torso. We can do this be pressing :kbd:`E` to enter rotate mode,
and dragging with the left mouse button. To exit rotate mode hit :kbd:`ESC`. and dragging with the left mouse button. To exit rotate mode hit :kbd:`ESC`.
.. image:: img/tutovec_torso1.gif ![](img/tutovec_torso1.gif)
The rotation pivot is wrong and needs to be adjusted. The rotation pivot is wrong and needs to be adjusted.
This small cross in the middle of the `Sprite` is This small cross in the middle of the `Sprite` is
the rotation pivot: the rotation pivot:
.. image:: img/tuto_cutout4.png ![](img/tuto_cutout4.png)
Adjusting the pivot Adjusting the pivot
~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~
@ -98,25 +98,25 @@ Adjusting the pivot
The pivot can be adjusted by changing the *offset* property in the The pivot can be adjusted by changing the *offset* property in the
Sprite: Sprite:
.. image:: img/tuto_cutout5.png ![](img/tuto_cutout5.png)
The pivot can also be adjusted *visually*. While hovering over the The pivot can also be adjusted *visually*. While hovering over the
desired pivot point, press :kbd:`V` to move the pivot there for the desired pivot point, press :kbd:`V` to move the pivot there for the
selected Sprite. There is also a tool in the tool bar that has a selected Sprite. There is also a tool in the tool bar that has a
similar function. similar function.
.. image:: img/tutovec_torso2.gif ![](img/tutovec_torso2.gif)
Continue adding body pieces, starting with the Continue adding body pieces, starting with the
right arm. Make sure to put each sprite in its correct place in the hierarchy, right arm. Make sure to put each sprite in its correct place in the hierarchy,
so its rotations and translations are relative to its parent: so its rotations and translations are relative to its parent:
.. image:: img/tuto_cutout6.png ![](img/tuto_cutout6.png)
With the left arm there's a problem. In 2D, child nodes appear in front of With the left arm there's a problem. In 2D, child nodes appear in front of
their parents: their parents:
.. image:: img/tuto_cutout7.png ![](img/tuto_cutout7.png)
We want the left arm to appear *behind* We want the left arm to appear *behind*
the hip and the torso. We could move the left arm nodes behind the hip (above the hip and the torso. We could move the left arm nodes behind the hip (above
@ -142,12 +142,12 @@ Create another RemoteTransform2D node inside the first and call it `remote_hand_
Use the `Remote Path` property of the two new nodes to target the `arm_l` and Use the `Remote Path` property of the two new nodes to target the `arm_l` and
`hand_l` sprites respectively: `hand_l` sprites respectively:
.. image:: img/tuto_cutout9.png ![](img/tuto_cutout9.png)
Moving the `RemoteTransform2D` nodes now moves the sprites. So we can create Moving the `RemoteTransform2D` nodes now moves the sprites. So we can create
animations by adjusting the `RemoteTransform2D` transforms: animations by adjusting the `RemoteTransform2D` transforms:
.. image:: img/tutovec_torso4.gif ![](img/tutovec_torso4.gif)
Completing the skeleton Completing the skeleton
~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~
@ -155,7 +155,7 @@ Completing the skeleton
Complete the skeleton by following the same steps for the rest of the Complete the skeleton by following the same steps for the rest of the
parts. The resulting scene should look similar to this: parts. The resulting scene should look similar to this:
.. image:: img/tuto_cutout10.png ![](img/tuto_cutout10.png)
The resulting rig will be easy to animate. By selecting the nodes and The resulting rig will be easy to animate. By selecting the nodes and
rotating them you can animate forward kinematics (FK) efficiently. rotating them you can animate forward kinematics (FK) efficiently.
@ -178,15 +178,15 @@ nodes are called skeletons.
As an example, let's turn the right arm into a skeleton. To create As an example, let's turn the right arm into a skeleton. To create
a skeleton, a chain of nodes must be selected from top to bottom: a skeleton, a chain of nodes must be selected from top to bottom:
.. image:: img/tuto_cutout11.png ![](img/tuto_cutout11.png)
Then, click on the Skeleton menu and select `Make Bones`. Then, click on the Skeleton menu and select `Make Bones`.
.. image:: img/tuto_cutout12.png ![](img/tuto_cutout12.png)
This will add bones covering the arm, but the result may be surprising. This will add bones covering the arm, but the result may be surprising.
.. image:: img/tuto_cutout13.png ![](img/tuto_cutout13.png)
Why does the hand lack a bone? In Godot, a bone connects a Why does the hand lack a bone? In Godot, a bone connects a
node with its parent. And there's currently no child of the hand node. node with its parent. And there's currently no child of the hand node.
@ -197,12 +197,12 @@ but `Position2D` is preferred because it's
visible in the editor. The endpoint node will ensure that the last bone visible in the editor. The endpoint node will ensure that the last bone
has orientation. has orientation.
.. image:: img/tuto_cutout14.png ![](img/tuto_cutout14.png)
Now select the whole chain, from the endpoint to the arm and create Now select the whole chain, from the endpoint to the arm and create
bones: bones:
.. image:: img/tuto_cutout15.png ![](img/tuto_cutout15.png)
The result resembles a skeleton a lot more, and now the arm and forearm The result resembles a skeleton a lot more, and now the arm and forearm
can be selected and animated. can be selected and animated.
@ -216,11 +216,11 @@ Godot has connected the hip node to the scene root with a bone, and we don't
want that. To fix this, select the root and hip node, open the Skeleton menu, want that. To fix this, select the root and hip node, open the Skeleton menu,
click `clear bones`. click `clear bones`.
.. image:: img/tuto_cutout15_2.png ![](img/tuto_cutout15_2.png)
Your final skeleton should look something like this: Your final skeleton should look something like this:
.. image:: img/tuto_cutout16.png ![](img/tuto_cutout16.png)
You might have noticed a second set of endpoints in the hands. This will make You might have noticed a second set of endpoints in the hands. This will make
sense soon. sense soon.
@ -244,21 +244,21 @@ To create an IK chain, select a chain of bones from endpoint to
the base for the chain. For example, to create an IK chain for the right the base for the chain. For example, to create an IK chain for the right
leg, select the following: leg, select the following:
.. image:: img/tuto_cutout17.png ![](img/tuto_cutout17.png)
Then enable this chain for IK. Go to Edit > Make IK Chain. Then enable this chain for IK. Go to Edit > Make IK Chain.
.. image:: img/tuto_cutout18.png ![](img/tuto_cutout18.png)
As a result, the base of the chain will turn *Yellow*. As a result, the base of the chain will turn *Yellow*.
.. image:: img/tuto_cutout19.png ![](img/tuto_cutout19.png)
Once the IK chain is set-up grab any child or grand-child of the base of the Once the IK chain is set-up grab any child or grand-child of the base of the
chain (e.g. a foot) and move it. You'll see the rest of the chain adjust as you chain (e.g. a foot) and move it. You'll see the rest of the chain adjust as you
adjust its position. adjust its position.
.. image:: img/tutovec_torso5.gif ![](img/tutovec_torso5.gif)
Animation tips Animation tips
~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~
@ -273,7 +273,7 @@ Setting keyframes and excluding properties
Special contextual elements appear in the top toolbar when the animation editor Special contextual elements appear in the top toolbar when the animation editor
window is open: window is open:
.. image:: img/tuto_cutout20.png ![](img/tuto_cutout20.png)
The key button inserts location, rotation, and scale keyframes for the The key button inserts location, rotation, and scale keyframes for the
selected objects or bones at the current playhead position. selected objects or bones at the current playhead position.
@ -310,7 +310,7 @@ toolbar.
their current arrangement. This pose can now be recalled when necessary in their current arrangement. This pose can now be recalled when necessary in
your game by playing the "rest" animation you've created. your game by playing the "rest" animation you've created.
.. image:: img/tuto_cutout21.png ![](img/tuto_cutout21.png)
Modifying rotation only Modifying rotation only
~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~
@ -322,7 +322,7 @@ Location and scale are rarely used.
So when inserting keys, you might find it convenient to have only the "rot" So when inserting keys, you might find it convenient to have only the "rot"
toggle active most of the time: toggle active most of the time:
.. image:: img/tuto_cutout22.png ![](img/tuto_cutout22.png)
This will avoid the creation of unwanted animation tracks for position This will avoid the creation of unwanted animation tracks for position
and scale. and scale.
@ -348,7 +348,7 @@ Node2D-inheriting nodes. When planning your rig, think about the movements it
will need to perform and give some thought to how you'll use "Behind Parent" will need to perform and give some thought to how you'll use "Behind Parent"
and/or RemoteTransform2D nodes. They provide overlapping functionality. and/or RemoteTransform2D nodes. They provide overlapping functionality.
.. image:: img/tuto_cutout23.png ![](img/tuto_cutout23.png)
Setting easing curves for multiple keys Setting easing curves for multiple keys
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
@ -360,7 +360,7 @@ To apply the same easing curve to multiple keyframes at once:
will open the transition editor. will open the transition editor.
3. In the transition editor, click on the desired curve to apply it. 3. In the transition editor, click on the desired curve to apply it.
.. image:: img/tuto_cutout24.png ![](img/tuto_cutout24.png)
2D Skeletal deform 2D Skeletal deform
~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~

54
tutorials/animation/introduction.md
View File

@ -28,7 +28,7 @@ The AnimationPlayer node type is the data container for your animations.
One AnimationPlayer node can hold multiple animations, that can One AnimationPlayer node can hold multiple animations, that can
automatically transition to one another. automatically transition to one another.
.. figure:: img/animation_create_animationplayer.png .. figure:: img/animation_create_animationplayer.png)
:alt: The AnimationPlayer node :alt: The AnimationPlayer node
The AnimationPlayer node The AnimationPlayer node
@ -36,14 +36,14 @@ automatically transition to one another.
After creating one click on the AnimationPlayer node in the Node tab to After creating one click on the AnimationPlayer node in the Node tab to
open the Animation Panel at the bottom of the viewport. open the Animation Panel at the bottom of the viewport.
.. figure:: img/animation_animation_panel.png .. figure:: img/animation_animation_panel.png)
:alt: The animation panel position :alt: The animation panel position
The animation panel position The animation panel position
It consists of four parts: It consists of four parts:
.. figure:: img/animation_animation_panel_overview.png .. figure:: img/animation_animation_panel_overview.png)
:alt: The animation panel :alt: The animation panel
The animation panel The animation panel
@ -62,7 +62,7 @@ A keyframe defines the value of a property at a certain point in time.
Diamond shapes represent keyframes in the timeline. A line between two Diamond shapes represent keyframes in the timeline. A line between two
keyframes indicates that the value hasn't changed. keyframes indicates that the value hasn't changed.
.. figure:: img/animation_keyframes.png .. figure:: img/animation_keyframes.png)
:alt: Keyframes in Godot :alt: Keyframes in Godot
Keyframes in Godot Keyframes in Godot
@ -70,7 +70,7 @@ keyframes indicates that the value hasn't changed.
The engine interpolates values between keyframes, resulting in a gradual The engine interpolates values between keyframes, resulting in a gradual
change in values over time. change in values over time.
.. figure:: img/animation_illustration.png .. figure:: img/animation_illustration.png)
:alt: Two keyframes are all it takes to obtain a smooth motion :alt: Two keyframes are all it takes to obtain a smooth motion
Two keyframes are all it takes to obtain a smooth motion Two keyframes are all it takes to obtain a smooth motion
@ -78,7 +78,7 @@ change in values over time.
The timeline lets you insert keyframes and change their timing. It also The timeline lets you insert keyframes and change their timing. It also
defines how long the animation is. defines how long the animation is.
.. figure:: img/animation_timeline.png .. figure:: img/animation_timeline.png)
:alt: The timeline in the animation panel :alt: The timeline in the animation panel
The timeline in the animation panel The timeline in the animation panel
@ -87,7 +87,7 @@ Each line of the Animation Panel is an animation track. Normal and
Transform tracks reference node properties. Their name or id is a path Transform tracks reference node properties. Their name or id is a path
to the node and the affected property. to the node and the affected property.
.. figure:: img/animation_normal_track.png .. figure:: img/animation_normal_track.png)
:alt: Example of Normal animation tracks :alt: Example of Normal animation tracks
Example of Normal animation tracks Example of Normal animation tracks
@ -108,7 +108,7 @@ Scene setup
For this tutorial, we'll create a Sprite node with an AnimationPlayer as For this tutorial, we'll create a Sprite node with an AnimationPlayer as
its child. We will animate the sprite to move between two points on the screen. its child. We will animate the sprite to move between two points on the screen.
.. figure:: img/animation_animation_player_tree.png .. figure:: img/animation_animation_player_tree.png)
:alt: Our scene setup :alt: Our scene setup
Our scene setup Our scene setup
@ -132,7 +132,7 @@ animation editor. From the list select "New" (|Add
Animation|) to add a new animation. And Enter a name for the animation in the Animation|) to add a new animation. And Enter a name for the animation in the
dialog box. dialog box.
.. figure:: img/animation_create_new_animation.png .. figure:: img/animation_create_new_animation.png)
:alt: Add a new animation :alt: Add a new animation
Add a new animation Add a new animation
@ -143,7 +143,7 @@ Adding a track
To add a new track for our sprite, select it and take a look in the To add a new track for our sprite, select it and take a look in the
toolbar: toolbar:
.. figure:: img/animation_convenience_buttons.png .. figure:: img/animation_convenience_buttons.png)
:alt: Convenience buttons :alt: Convenience buttons
Convenience buttons Convenience buttons
@ -160,7 +160,7 @@ property, Godot asks whether it should set it up for us. Click **Create**.
This creates a new track and our first keyframe at the beginning of This creates a new track and our first keyframe at the beginning of
the timeline: the timeline:
.. figure:: img/animation_track.png .. figure:: img/animation_track.png)
:alt: The sprite track :alt: The sprite track
The sprite track The sprite track
@ -175,7 +175,7 @@ Let's say, we want it to take 2 seconds to go to the other point. By
default the animation is set to last only 1 second, so change this in default the animation is set to last only 1 second, so change this in
the timeline controls in animation panel's lower panel to 2. the timeline controls in animation panel's lower panel to 2.
.. figure:: img/animation_set_length.png .. figure:: img/animation_set_length.png)
:alt: Animation length :alt: Animation length
Animation length Animation length
@ -193,7 +193,7 @@ Click on the "Play from beginning" (|Play from beginning|) button.
Yay! Our animation runs: Yay! Our animation runs:
.. figure:: img/animation_simple.gif .. figure:: img/animation_simple.gif)
:alt: The animation :alt: The animation
The animation The animation
@ -206,7 +206,7 @@ Godot always calculates the frames between two keyframes. In a loop, the
first keyframe is also the last keyframe, if no keyframe is specified at first keyframe is also the last keyframe, if no keyframe is specified at
the end. the end.
.. figure:: img/animation_loop.png .. figure:: img/animation_loop.png)
:alt: Animation loop :alt: Animation loop
Animation loop Animation loop
@ -221,7 +221,7 @@ Track settings
Each track has a settings panel at the end, where you can set the update Each track has a settings panel at the end, where you can set the update
mode, the track interpolation, and the loop mode. mode, the track interpolation, and the loop mode.
.. figure:: img/animation_track_settings.png .. figure:: img/animation_track_settings.png)
:alt: Track settings :alt: Track settings
Track settings Track settings
@ -241,7 +241,7 @@ values. This can be:
could use the Capture mode to move a node that's located anywhere could use the Capture mode to move a node that's located anywhere
to a specific location. to a specific location.
.. figure:: img/animation_track_rate.png .. figure:: img/animation_track_rate.png)
:alt: Track mode :alt: Track mode
Track mode Track mode
@ -258,7 +258,7 @@ the keyframes. These interpolation modes are supported:
- Cubic: Set the value based on a cubic function calculation between - Cubic: Set the value based on a cubic function calculation between
the two keyframes the two keyframes
.. figure:: img/animation_track_interpolation.png .. figure:: img/animation_track_interpolation.png)
:alt: Track interpolation :alt: Track interpolation
Track interpolation Track interpolation
@ -271,7 +271,7 @@ of a robotic movement.
Godot supports two loop modes, which affect the animation if it's set to Godot supports two loop modes, which affect the animation if it's set to
loop: loop:
.. figure:: img/animation_track_loop_modes.png .. figure:: img/animation_track_loop_modes.png)
:alt: Loop modes :alt: Loop modes
Loop modes Loop modes
@ -294,7 +294,7 @@ a small keyframe button for all the sprite's properties. Click on
this button and Godot automatically adds a track and keyframe to the this button and Godot automatically adds a track and keyframe to the
current animation. current animation.
.. figure:: img/animation_properties_keyframe.png .. figure:: img/animation_properties_keyframe.png)
:alt: Keyframes for other properties :alt: Keyframes for other properties
Keyframes for other properties Keyframes for other properties
@ -306,7 +306,7 @@ For advanced use and to edit keyframes in detail, You can click on them
to bring up the keyframe editor in the inspector. You can use this to to bring up the keyframe editor in the inspector. You can use this to
directly edit its values. directly edit its values.
.. figure:: img/animation_keyframe_editor_key.png .. figure:: img/animation_keyframe_editor_key.png)
:alt: Keyframe editor editing a key :alt: Keyframe editor editing a key
Keyframe editor editing a key Keyframe editor editing a key
@ -348,7 +348,7 @@ controls.
Select "Add Call Method Track" from the list of possible track types. Select "Add Call Method Track" from the list of possible track types.
.. figure:: img/animation_add_call_method_track.png .. figure:: img/animation_add_call_method_track.png)
:alt: Add Call Method Track :alt: Add Call Method Track
Add Call Method Track Add Call Method Track
@ -356,7 +356,7 @@ Select "Add Call Method Track" from the list of possible track types.
Select the `AudioStreamPlayer` node in the selection Select the `AudioStreamPlayer` node in the selection
window. Godot adds the track with the reference to the node. window. Godot adds the track with the reference to the node.
.. figure:: img/animation_select_audiostreamplayer.png .. figure:: img/animation_select_audiostreamplayer.png)
:alt: Select AudioStreamPlayer :alt: Select AudioStreamPlayer
Select AudioStreamPlayer Select AudioStreamPlayer
@ -366,7 +366,7 @@ click the "Insert Key" option. This will bring up a list of methods
that can be called for the AudioStreamPlayer node. Select the first that can be called for the AudioStreamPlayer node. Select the first
one. one.
.. image:: img/animation_method_options.png ![](img/animation_method_options.png)
When Godot reaches the keyframe, Godot calls the When Godot reaches the keyframe, Godot calls the
`AudioStreamPlayer` node's "play" function and the stream `AudioStreamPlayer` node's "play" function and the stream
@ -375,11 +375,11 @@ plays.
You can change its position by dragging it on the timeline, you can also You can change its position by dragging it on the timeline, you can also
click on the keyframe and use the keyframe settings in the inspector. click on the keyframe and use the keyframe settings in the inspector.
.. image:: img/animation_call_method_keyframe.png ![](img/animation_call_method_keyframe.png)
.. |Play from beginning| image:: img/animation_play_from_beginning.png .. |Play from beginning| image:: img/animation_play_from_beginning.png)
.. |Add Animation| image:: img/animation_add.png .. |Add Animation| image:: img/animation_add.png)
.. |Add track| image:: img/animation_add_track.png .. |Add track| image:: img/animation_add_track.png)
Using RESET tracks Using RESET tracks
------------------ ------------------

2
tutorials/animation/playing_videos.md
View File

@ -67,7 +67,7 @@ AspectRatioContainer node to match your video's aspect ratio. You can use math
formulas in the inspector to help yourself. Remember to make one of the operands formulas in the inspector to help yourself. Remember to make one of the operands
a float. Otherwise, the division's result will always be an integer. a float. Otherwise, the division's result will always be an integer.
.. figure:: img/playing_videos_aspect_ratio_container.png .. figure:: img/playing_videos_aspect_ratio_container.png)
:figclass: figure-w480 :figclass: figure-w480
:align: center :align: center
:alt: AspectRatioContainer's Ratio property being modified in the editor inspector :alt: AspectRatioContainer's Ratio property being modified in the editor inspector

14
tutorials/assets_pipeline/escn_exporter/animation.md
View File

@ -22,13 +22,13 @@ New created action is always an active action bound to object. There are
several ways to place an active action into NLA track, several ways to place an active action into NLA track,
one is of course doing it in `NLA Editor` one is of course doing it in `NLA Editor`
.. image:: img/nla_editor.jpg ![](img/nla_editor.jpg
.. image:: img/nla_pushdown.jpg ![](img/nla_pushdown.jpg
Or it can be done stashing the action in `Dope Sheet` Or it can be done stashing the action in `Dope Sheet`
.. image:: img/dope_sheet.jpg ![](img/dope_sheet.jpg
.. image:: img/stash_action.jpg ![](img/stash_action.jpg
**2. Check mute status of NLA tracks** **2. Check mute status of NLA tracks**
@ -36,18 +36,18 @@ An NLA track can be `mute` or `unmute`, the exporter will export all
the `mute` NLA track as a separate action, while blends all the `unmute` the `mute` NLA track as a separate action, while blends all the `unmute`
NLA tracks into every action (including the action action) being exported. NLA tracks into every action (including the action action) being exported.
.. image:: img/nla_strip.jpg ![](img/nla_strip.jpg
**3. Export the scene** **3. Export the scene**
Make sure the `Export Stashed Actions` option has been turned on. Make sure the `Export Stashed Actions` option has been turned on.
.. image:: img/stash_action_option.jpg ![](img/stash_action_option.jpg
Then all the stashed actions, as well as the active action, are exported Then all the stashed actions, as well as the active action, are exported
to an AnimationPlayer. to an AnimationPlayer.
.. image:: img/in_godot.jpg ![](img/in_godot.jpg
Constraints Constraints

2
tutorials/assets_pipeline/escn_exporter/index.md
View File

@ -30,7 +30,7 @@ Sometimes you don't want some objects exported (e.g. high-res models used for
baking). An object will not be exported if it is not rendered in the scene. baking). An object will not be exported if it is not rendered in the scene.
This can be set in the outliner: This can be set in the outliner:
.. image:: img/hide.jpg ![](img/hide.jpg
Objects hidden in the viewport will be exported, but will be hidden in the Objects hidden in the viewport will be exported, but will be hidden in the
Godot scene. Godot scene.

2
tutorials/assets_pipeline/escn_exporter/lights.md
View File

@ -11,7 +11,7 @@ Lights
Sun, point and spot lamps are all exported from Blender along with many of their Sun, point and spot lamps are all exported from Blender along with many of their
properties: properties:
.. image:: img/light_properties.jpg ![](img/light_properties.jpg
There are some things to note: There are some things to note:

6
tutorials/assets_pipeline/escn_exporter/material.md
View File

@ -20,7 +20,7 @@ exporter will fall back to exporting the material from Blender.
Where the exporter searches for the `.tres` file is determined by the "Material Where the exporter searches for the `.tres` file is determined by the "Material
Search Paths" option: Search Paths" option:
.. image:: img/material_search.jpg ![](img/material_search.jpg
This can take the value of: This can take the value of:
- Project Directory - Attempts to find the `project.Godot` and recursively - Project Directory - Attempts to find the `project.Godot` and recursively
@ -62,8 +62,8 @@ The default configuration of material exporting would keep all the materials int
the `escn` file. There is an option which could enable generating external `.material` the `escn` file. There is an option which could enable generating external `.material`
file when the `escn` file opens in Godot. file when the `escn` file opens in Godot.
.. image:: img/external_mat_option.jpg ![](img/external_mat_option.jpg
`.material` file can be assigned to any material slot to be a external resource. `.material` file can be assigned to any material slot to be a external resource.
.. image:: img/gd_dot_material.jpg ![](img/gd_dot_material.jpg

8
tutorials/assets_pipeline/escn_exporter/physics.md
View File

@ -4,7 +4,7 @@ Physics properties
Exporting physics properties is done by enabling "Rigid Body" in Blender's Exporting physics properties is done by enabling "Rigid Body" in Blender's
physics tab: physics tab:
.. image:: img/enable_physics.png ![](img/enable_physics.png)
.. important:: .. important::
By default, a single Blender object with rigid body enabled will export as By default, a single Blender object with rigid body enabled will export as
@ -17,7 +17,7 @@ Blender only has the concept of "Active" and "Passive" rigid bodies. These
turn into Static and RigidBody nodes. To create a kinematic body, enable the turn into Static and RigidBody nodes. To create a kinematic body, enable the
"animated" checkbox on an "Active" body: "animated" checkbox on an "Active" body:
.. image:: img/body_type.jpg ![](img/body_type.jpg
Collision shapes Collision shapes
---------------- ----------------
@ -27,7 +27,7 @@ of the collision shapes are also not present. However, almost all of the
options in Blender's rigid body collision and rigid body dynamics interfaces options in Blender's rigid body collision and rigid body dynamics interfaces
are supported: are supported:
.. image:: img/collision_shapes.jpg ![](img/collision_shapes.jpg
There are the following caveats: There are the following caveats:
- Not all of the collision shapes are supported. Only `Mesh`, `Convex - Not all of the collision shapes are supported. Only `Mesh`, `Convex
@ -51,7 +51,7 @@ graphical meshes, but by default, the exporter will export a mesh along with the
collision shape. To only export the collision shape, set the object's maximum collision shape. To only export the collision shape, set the object's maximum
draw type to Wire: draw type to Wire:
.. image:: img/col_only.png ![](img/col_only.png)
This will also influence how the object is shown in Blender's viewport. This will also influence how the object is shown in Blender's viewport.
Most of the time, you want your collision geometry to be shown see-through when Most of the time, you want your collision geometry to be shown see-through when

2
tutorials/assets_pipeline/escn_exporter/skeleton.md
View File

@ -1,7 +1,7 @@
Skeleton Skeleton
======== ========
.. image:: img/armature.jpg ![](img/armature.jpg
Rest Bone Rest Bone
--------- ---------

2
tutorials/assets_pipeline/exporting_3d_scenes.md
View File

@ -18,7 +18,7 @@ program such as Blender, and then bring it back into Godot.
To export a scene in the editor go to **Project > Tools > Export GLTF...** To export a scene in the editor go to **Project > Tools > Export GLTF...**
.. image:: img/gltf_godot_export.png ![](img/gltf_godot_export.png)
Limitations Limitations
----------- -----------

12
tutorials/assets_pipeline/import_process.md
View File

@ -33,7 +33,7 @@ To change the import parameters of an asset in Godot (again, keep in mind
import parameters are only present in non-native Godot resource types) import parameters are only present in non-native Godot resource types)
select the relevant resource in the filesystem dock: select the relevant resource in the filesystem dock:
.. image:: img/asset_workflow1.png ![](img/asset_workflow1.png)
Then, after adjusting the parameters, press "Reimport". These parameters Then, after adjusting the parameters, press "Reimport". These parameters
will only be used for this asset and on future reimports. will only be used for this asset and on future reimports.
@ -51,7 +51,7 @@ those specific parameters changed. To do this, select every asset you want
to reimport in the file system. In the import tab there will now be a to reimport in the file system. In the import tab there will now be a
checkbox to the left of every import parameter. checkbox to the left of every import parameter.
.. image:: img/reimport_multiple.png ![](img/reimport_multiple.png)
Select the checkbox of the parameters you want to change on your imported Select the checkbox of the parameters you want to change on your imported
assets, then change the parameters normally. Finally, click the reimport assets, then change the parameters normally. Finally, click the reimport
@ -71,11 +71,11 @@ Files generated
Importing will add an extra `<asset>.import` file, containing the import Importing will add an extra `<asset>.import` file, containing the import
configuration. Make sure to commit these to your version control system! configuration. Make sure to commit these to your version control system!
.. image:: img/asset_workflow4.png ![](img/asset_workflow4.png)
Additionally, extra assets will be preset in the hidden `res://.import` folder: Additionally, extra assets will be preset in the hidden `res://.import` folder:
.. image:: img/asset_workflow5.png ![](img/asset_workflow5.png)
If any of the files present in this folder is erased (or the whole folder), the If any of the files present in this folder is erased (or the whole folder), the
asset or assets will be reimported automatically. As such, committing this folder asset or assets will be reimported automatically. As such, committing this folder
@ -90,7 +90,7 @@ Some source assets can be imported as different types of resources.
For this, select the relevant type of resource desired and For this, select the relevant type of resource desired and
press "Reimport": press "Reimport":
.. image:: img/asset_workflow2.png ![](img/asset_workflow2.png)
Changing default import parameters Changing default import parameters
@ -101,7 +101,7 @@ Changing the defaults per project can be achieved by using the
"Preset.." Menu. Besides some resource types offering presets, "Preset.." Menu. Besides some resource types offering presets,
the default setting can be saved and cleared too: the default setting can be saved and cleared too:
.. image:: img/asset_workflow3.png ![](img/asset_workflow3.png)
Simplicity is key! Simplicity is key!
------------------ ------------------

2
tutorials/assets_pipeline/importing_audio_samples.md
View File

@ -54,7 +54,7 @@ This saves SFX artists the need to add reverb to the sound effects,
reducing their size greatly and ensuring correct trimming. Say no to SFX reducing their size greatly and ensuring correct trimming. Say no to SFX
with baked reverb! with baked reverb!
.. image:: img/reverb.png ![](img/reverb.png)
As you can see above, sound effects become huge with reverb added. As you can see above, sound effects become huge with reverb added.

12
tutorials/assets_pipeline/importing_images.md
View File

@ -19,7 +19,7 @@ Godot can import the following image formats:
- Supports HDR (highly recommended for panorama skies). - Supports HDR (highly recommended for panorama skies).
- JPEG (`.jpg`, `.jpeg`) - JPEG (`.jpg`, `.jpeg`)
- Doesn't support transparency per the format's limitations. - Doesn't support transparency per the format's limitations.
- PNG (`.png`) - PNG (`.png)`)
- Precision is limited to 8 bits per channel upon importing (no HDR images). - Precision is limited to 8 bits per channel upon importing (no HDR images).
- Truevision Targa (`.tga`) - Truevision Targa (`.tga`)
- SVG (`.svg`, `.svgz`) - SVG (`.svg`, `.svgz`)
@ -45,7 +45,7 @@ efficient.
Import options are vast: Import options are vast:
.. image:: img/image_import1.png ![](img/image_import1.png)
Detect 3D Detect 3D
~~~~~~~~~ ~~~~~~~~~
@ -96,11 +96,11 @@ advantages and disadvantages (|good| = best, |bad| = worst):
| Load Time | |regular| Normal | |bad| Slow | |bad| Slow | |good| Fast | | Load Time | |regular| Normal | |bad| Slow | |bad| Slow | |good| Fast |
+----------------+------------------------+-------------------------------+-------------------------+------------------------------------------------------+ +----------------+------------------------+-------------------------------+-------------------------+------------------------------------------------------+
.. |bad| image:: img/bad.png .. |bad| image:: img/bad.png)
.. |good| image:: img/good.png .. |good| image:: img/good.png)
.. |regular| image:: img/regular.png .. |regular| image:: img/regular.png)
HDR Mode HDR Mode
~~~~~~~~ ~~~~~~~~
@ -193,7 +193,7 @@ Fix Alpha Border
This puts pixels of the same surrounding color in transition from transparency to non transparency. It helps mitigate the outline effect when exporting images This puts pixels of the same surrounding color in transition from transparency to non transparency. It helps mitigate the outline effect when exporting images
from Photoshop and the like. from Photoshop and the like.
.. image:: img/fixedborder.png ![](img/fixedborder.png)
It's a good idea to leave it on by default, unless specific values are needed. It's a good idea to leave it on by default, unless specific values are needed.

10
tutorials/assets_pipeline/importing_scenes.md
View File

@ -133,7 +133,7 @@ import a scene with:
* External scenes: Save each of the root nodes of the imported scenes as a separate scene. * External scenes: Save each of the root nodes of the imported scenes as a separate scene.
* Single scene: A single scene file with everything built in. * Single scene: A single scene file with everything built in.
.. image:: img/scene_import1.png ![](img/scene_import1.png)
As different developers have different needs, this import process is highly customizable. As different developers have different needs, this import process is highly customizable.
@ -142,7 +142,7 @@ Import options
The importer has several options, which will be discussed below: The importer has several options, which will be discussed below:
.. image:: img/scene_import2.png ![](img/scene_import2.png)
Nodes Nodes
~~~~~ ~~~~~
@ -303,7 +303,7 @@ Godot provides many options regarding how animation data is dealt with. Some exp
3DS Max or Maya, need many animations put into the same timeline or, at worst, put 3DS Max or Maya, need many animations put into the same timeline or, at worst, put
each animation in a separate file. each animation in a separate file.
.. image:: img/scene_import3.png ![](img/scene_import3.png)
Import of animations is enabled by default. Import of animations is enabled by default.
@ -399,7 +399,7 @@ if the source asset changes (source `.dae`, `.gltf`, `.obj` file re-exported fro
It is possible, however, to make local modifications by using *Scene Inheritance*. Try to open the imported scene and the It is possible, however, to make local modifications by using *Scene Inheritance*. Try to open the imported scene and the
following dialog will appear: following dialog will appear:
.. image:: img/scene_import4.png ![](img/scene_import4.png)
In inherited scenes, the only limitations for modifications are: In inherited scenes, the only limitations for modifications are:
@ -466,7 +466,7 @@ On import, it will create a `staticbody` with
a collision node as a child. The collision node will have one of a number of predefined shapes, a collision node as a child. The collision node will have one of a number of predefined shapes,
depending on Blender's empty draw type: depending on Blender's empty draw type:
.. image:: img/3dimp_BlenderEmptyDrawTypes.png ![](img/3dimp_BlenderEmptyDrawTypes.png)
- Single arrow will create a `rayshape`. - Single arrow will create a `rayshape`.
- Cube will create a `boxshape`. - Cube will create a `boxshape`.

2
tutorials/assets_pipeline/importing_translations.md
View File

@ -117,6 +117,6 @@ Select the `.csv` file and access the **Import** dock to define import
options. You can toggle the compression of the imported translations, and options. You can toggle the compression of the imported translations, and
select the delimiter to use when parsing the CSV file. select the delimiter to use when parsing the CSV file.
.. image:: img/import_csv.png ![](img/import_csv.png)
Be sure to click **Reimport** after any change to these options. Be sure to click **Reimport** after any change to these options.

10
tutorials/audio/audio_buses.md
View File

@ -49,7 +49,7 @@ Audio buses
Audio buses can be found in the bottom panel of the Godot editor: Audio buses can be found in the bottom panel of the Godot editor:
.. image:: img/audio_buses1.png ![](img/audio_buses1.png)
An *audio bus* (also called an *audio channel*) can be considered a place that An *audio bus* (also called an *audio channel*) can be considered a place that
audio is channeled through on the way to playback through a device's speakers. audio is channeled through on the way to playback through a device's speakers.
@ -65,7 +65,7 @@ the left. The destination bus can be specified for each of the non-master audio
buses. Routing always passes audio from buses on the right to buses further buses. Routing always passes audio from buses on the right to buses further
to the left. This avoids infinite routing loops. to the left. This avoids infinite routing loops.
.. image:: img/audio_buses2.png ![](img/audio_buses2.png)
In the above image, the output of *Bus 2* has been routed to the *Master* bus. In the above image, the output of *Bus 2* has been routed to the *Master* bus.
@ -75,7 +75,7 @@ Playback of audio through a bus
To test passing audio to a bus, create an AudioStreamPlayer node, load an To test passing audio to a bus, create an AudioStreamPlayer node, load an
AudioStream and select a target bus for playback: AudioStream and select a target bus for playback:
.. image:: img/audio_buses3.png ![](img/audio_buses3.png)
Finally, toggle the **Playing** property to **On** and sound will flow. Finally, toggle the **Playing** property to **On** and sound will flow.
@ -89,7 +89,7 @@ Adding effects
Audio buses can contain all sorts of effects. These effects modify the sound in Audio buses can contain all sorts of effects. These effects modify the sound in
one way or another and are applied in order. one way or another and are applied in order.
.. image:: img/audio_buses4.png ![](img/audio_buses4.png)
Try them all out to get a sense of how they alter sound. Here follows a short Try them all out to get a sense of how they alter sound. Here follows a short
description of the available effects: description of the available effects:
@ -281,7 +281,7 @@ There is no need to disable buses manually when not in use. Godot detects
that the bus has been silent for a few seconds and disables it (including that the bus has been silent for a few seconds and disables it (including
all effects). all effects).
.. figure:: img/audio_buses5.png .. figure:: img/audio_buses5.png)
Disabled buses have a blue VU meter instead of a red-green one. Disabled buses have a blue VU meter instead of a red-green one.

16
tutorials/audio/audio_streams.md
View File

@ -26,7 +26,7 @@ played back often.
AudioStreamPlayer AudioStreamPlayer
----------------- -----------------
.. image:: img/audio_stream_player.png ![](img/audio_stream_player.png)
This is the standard, non-positional stream player. It can play to any bus. This is the standard, non-positional stream player. It can play to any bus.
In 5.1 sound setups, it can send audio to stereo mix or front speakers. In 5.1 sound setups, it can send audio to stereo mix or front speakers.
@ -34,7 +34,7 @@ In 5.1 sound setups, it can send audio to stereo mix or front speakers.
AudioStreamPlayer2D AudioStreamPlayer2D
------------------- -------------------
.. image:: img/audio_stream_2d.png ![](img/audio_stream_2d.png)
This is a variant of AudioStreamPlayer, but emits sound in a 2D positional This is a variant of AudioStreamPlayer, but emits sound in a 2D positional
environment. When close to the left of the screen, the panning will go left. environment. When close to the left of the screen, the panning will go left.
@ -47,12 +47,12 @@ When close to the right side, it will go right.
different reverb or sound qualities to handle action happening in a different reverb or sound qualities to handle action happening in a
particular parts of your game world. particular parts of your game world.
.. image:: img/audio_stream_2d_area.png ![](img/audio_stream_2d_area.png)
AudioStreamPlayer3D AudioStreamPlayer3D
------------------- -------------------
.. image:: img/audio_stream_3d.png ![](img/audio_stream_3d.png)
This is a variant of AudioStreamPlayer, but emits sound in a 3D positional This is a variant of AudioStreamPlayer, but emits sound in a 3D positional
environment. Depending on the location of the player relative to the screen, environment. Depending on the location of the player relative to the screen,
@ -60,7 +60,7 @@ it can position sound in stereo, 5.1 or 7.1 depending on the chosen audio setup.
Similar to AudioStreamPlayer2D, an Area can divert the sound to an audio bus. Similar to AudioStreamPlayer2D, an Area can divert the sound to an audio bus.
.. image:: img/audio_stream_3d_area.png ![](img/audio_stream_3d_area.png)
Unlike for 2D, the 3D version of AudioStreamPlayer has a few more advanced options: Unlike for 2D, the 3D version of AudioStreamPlayer has a few more advanced options:
@ -74,13 +74,13 @@ and wet audio to separate buses. This is useful when you have several reverb
configurations for different types of rooms. This is done by enabling this type configurations for different types of rooms. This is done by enabling this type
of reverb in the **Reverb Bus** section of the Area's properties: of reverb in the **Reverb Bus** section of the Area's properties:
.. image:: img/audio_stream_reverb_bus.png ![](img/audio_stream_reverb_bus.png)
At the same time, a special bus layout is created where each area receives the At the same time, a special bus layout is created where each area receives the
reverb info from each area. A Reverb effect needs to be created and configured reverb info from each area. A Reverb effect needs to be created and configured
in each reverb bus to complete the setup for the desired effect: in each reverb bus to complete the setup for the desired effect:
.. image:: img/audio_stream_reverb_bus2.png ![](img/audio_stream_reverb_bus2.png)
The Area's **Reverb Bus** section also has a parameter named **Uniformity**. The Area's **Reverb Bus** section also has a parameter named **Uniformity**.
Some types of rooms bounce sounds more than others (like a warehouse), so Some types of rooms bounce sounds more than others (like a warehouse), so
@ -96,7 +96,7 @@ perceived as an increase or decrease in the pitch of the emitted sound.
Godot can track velocity changes in the AudioStreamPlayer3D and Camera nodes. Godot can track velocity changes in the AudioStreamPlayer3D and Camera nodes.
Both nodes have this property, which must be enabled manually: Both nodes have this property, which must be enabled manually:
.. image:: img/audio_stream_doppler.png ![](img/audio_stream_doppler.png)
Enable it by setting it depending on how objects will be moved: Enable it by setting it depending on how objects will be moved:
use **Idle** for objects moved using `_process`, or **Physics** use **Idle** for objects moved using `_process`, or **Physics**

Some files were not shown because too many files have changed in this diff Show More