mirror of
https://github.com/stan220/godot-docs.git
synced 2026-09-08 16:28:59 +00:00
Images: always use relative 'img/' paths, without './' prefix
Move some files from root '/img' folder to the location where they are actually used.
This commit is contained in:
|
Before Width: | Height: | Size: 208 KiB After Width: | Height: | Size: 208 KiB |
@@ -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
|
||||
structure and the servers.
|
||||
|
||||
.. image:: /img/architecture_diagram.jpg
|
||||
.. image:: img/architecture_diagram.jpg
|
||||
|
||||
Debugging the editor with gdb
|
||||
-----------------------------
|
||||
|
||||
@@ -59,14 +59,14 @@ options for a class called ``PlayerController``.
|
||||
You've probably stored a node in a variable before, and typed a dot to
|
||||
be left with no autocomplete suggestions:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_code_completion_dynamic.png
|
||||
.. figure:: img/typed_gdscript_code_completion_dynamic.png
|
||||
:alt: code completion options for dynamic
|
||||
|
||||
This is due to dynamic code. Godot cannot know what node or value type
|
||||
you're passing to the function. If you write the type explicitly
|
||||
however, you will get all public methods and variables from the node:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_code_completion_typed.png
|
||||
.. figure:: img/typed_gdscript_code_completion_typed.png
|
||||
:alt: code completion options for typed
|
||||
|
||||
In the future, typed GDScript will also increase code performance:
|
||||
@@ -200,7 +200,7 @@ node: ``($Timer as Timer)``, ``($Player as KinematicBody2D)``, etc.
|
||||
Godot will ensure the type works and if so, the line number will turn
|
||||
green at the left of the script editor.
|
||||
|
||||
.. figure:: ./img/typed_gdscript_safe_unsafe_line.png
|
||||
.. figure:: img/typed_gdscript_safe_unsafe_line.png
|
||||
:alt: Unsafe vs Safe Line
|
||||
|
||||
Unsafe line (line 7) vs Safe Lines (line 6 and 8)
|
||||
|
||||
@@ -11,7 +11,7 @@ to runtime errors.
|
||||
You can configure warnings in the Project Settings under the section
|
||||
called **Gdscript**:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_warning_system_settings.png
|
||||
.. figure:: img/typed_gdscript_warning_system_settings.png
|
||||
:alt: Warning system project settings
|
||||
|
||||
Warning system project settings
|
||||
@@ -19,7 +19,7 @@ called **Gdscript**:
|
||||
You can find a list of warnings for the active GDScript file in the
|
||||
script editor's status bar. The example below has 3 warnings:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_warning_example.png
|
||||
.. figure:: img/typed_gdscript_warning_example.png
|
||||
:alt: Warning system example
|
||||
|
||||
Warning system example
|
||||
@@ -30,7 +30,7 @@ right of the warning's description. Godot will add a comment above the
|
||||
corresponding line and the code won't trigger the corresponding warning
|
||||
anymore:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_warning_system_ignore.png
|
||||
.. figure:: img/typed_gdscript_warning_system_ignore.png
|
||||
:alt: Warning system ignore example
|
||||
|
||||
Warning system ignore example
|
||||
@@ -45,7 +45,7 @@ all warnings. Head to the ``GDScript`` section of the Project Settings to
|
||||
turn on this option. Here's the same file as the previous example with
|
||||
warnings as errors turned on:
|
||||
|
||||
.. figure:: ./img/typed_gdscript_warning_system_errors.png
|
||||
.. figure:: img/typed_gdscript_warning_system_errors.png
|
||||
:alt: Warnings as errors
|
||||
|
||||
Warnings as errors
|
||||
|
||||
@@ -170,9 +170,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
|
||||
interfaces over your 3D world.
|
||||
|
||||
.. |image0| image:: ./img/engine_design_01.png
|
||||
.. |image1| image:: ./img/engine_design_02.png
|
||||
.. |image2| image:: ./img/engine_design_03.png
|
||||
.. |image3| image:: ./img/engine_design_visual_script.png
|
||||
.. |image4| image:: ./img/engine_design_fsm_plugin.png
|
||||
.. |image5| image:: ./img/engine_design_rpg_in_a_box.png
|
||||
.. |image0| image:: img/engine_design_01.png
|
||||
.. |image1| image:: img/engine_design_02.png
|
||||
.. |image2| image:: img/engine_design_03.png
|
||||
.. |image3| image:: img/engine_design_visual_script.png
|
||||
.. |image4| image:: img/engine_design_fsm_plugin.png
|
||||
.. |image5| image:: img/engine_design_rpg_in_a_box.png
|
||||
|
||||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
@@ -170,7 +170,7 @@ as well as how it interacts with other nodes: children, parent, siblings,
|
||||
and so on. The local scope of the script is the node. In other words, the script
|
||||
inherits the functions provided by that node.
|
||||
|
||||
.. image:: /img/brainslug.jpg
|
||||
.. image:: img/brainslug.jpg
|
||||
|
||||
|
||||
.. _doc_scripting_handling_a_signal:
|
||||
|
||||
@@ -8,7 +8,7 @@ game Graphical User Interface (GUI) with reusable UI components: a life bar, an
|
||||
energy bar, and bomb and emerald counters. By the end of this tutorial,
|
||||
you'll have a game GUI, ready to control with GDscript or VisualScript:
|
||||
|
||||
.. figure:: ./img/ui_gui_design_final_result.png
|
||||
.. figure:: img/ui_gui_design_final_result.png
|
||||
|
||||
The final result
|
||||
|
||||
@@ -48,7 +48,7 @@ of one another inside a ``VBoxContainer``. And we'll need a last
|
||||
``HBoxContainer`` in the right column to place the bomb and emerald
|
||||
counters side-by-side.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_containers_structure.png
|
||||
.. figure:: img/ui_gui_step_tutorial_containers_structure.png
|
||||
|
||||
We get a clean UI layout with only 4 containers
|
||||
|
||||
@@ -90,7 +90,7 @@ Add a ``VBoxContainer`` as a child of ``HBoxContainer`` and name it ``Bars``. Se
|
||||
``HBoxContainer`` again and this time, add another ``HBoxContainer`` as a child of it.
|
||||
Call it ``Counters``. With these four containers, we have the base for our GUI scene.
|
||||
|
||||
.. figure:: ./img/ui_gui_containers_structure_in_godot.png
|
||||
.. figure:: img/ui_gui_containers_structure_in_godot.png
|
||||
|
||||
You should have 4 containers that look like this
|
||||
|
||||
@@ -127,7 +127,7 @@ Name it ``Count``. Inside of it, add three nodes:
|
||||
|
||||
To add the nodes as siblings, always select the ``Count`` node first.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_template_1.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_template_1.png
|
||||
|
||||
Your scene tree should look like this. We're ready to throw in some
|
||||
textures
|
||||
@@ -136,7 +136,7 @@ Our scene is still empty. It's time to throw in some textures. To load
|
||||
the textures, head to the FileSystem dock to the left of the viewport.
|
||||
Browse down to the res://assets/GUI folder.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_textures_in_FileSystem_tab.png
|
||||
.. figure:: img/ui_gui_step_tutorial_textures_in_FileSystem_tab.png
|
||||
|
||||
You should see a list of textures that we'll use to skin our
|
||||
interface.
|
||||
@@ -156,7 +156,7 @@ the ``Text`` property and type ``10``. This way, we can see both nodes
|
||||
in the viewport. They should stack up in the top-left corner of their
|
||||
parent ``MarginContainer``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_label_stacked.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_label_stacked.png
|
||||
|
||||
If you select both nodes, you should see something like this
|
||||
|
||||
@@ -174,7 +174,7 @@ them inside a regular Control or another UI element. We'll use the
|
||||
the ``Title`` and ``Number``, and drag and drop them onto
|
||||
``Background``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_nesting_inside_background.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_nesting_inside_background.png
|
||||
|
||||
By using the Background node as the two textures' parent, we take
|
||||
control away from the Count MarginContainer
|
||||
@@ -190,7 +190,7 @@ text should snap to the center of the ``Background``'s right edge.
|
||||
Resize the node horizontally, so it takes the right half of the
|
||||
``Background`` and there's a bit of padding with the right edge.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_placed_title_and_label.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_placed_title_and_label.png
|
||||
|
||||
Here's how the nodes' bounding boxes should look in the viewport.
|
||||
Keep it rough, you don't need to place them too precisely for now.
|
||||
@@ -222,7 +222,7 @@ baseline, click on the font field under the ``Custom Font`` category
|
||||
again and tweak the ``Bottom`` property until the text aligns with the
|
||||
``Title`` node. I used a value of ``2`` pixels.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_number_baseline.png
|
||||
.. figure:: img/ui_gui_step_tutorial_number_baseline.png
|
||||
|
||||
With a Bottom value of 2 pixels, the Number aligns with the Title
|
||||
|
||||
@@ -245,7 +245,7 @@ up.
|
||||
|
||||
With only five ``Control`` nodes, our first bar is ready to use.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_final.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_final.png
|
||||
|
||||
That's it, our life bar is ready. This last part was quick, wasn't
|
||||
it? That's thanks to our robust container setup.
|
||||
@@ -268,7 +268,7 @@ number nodes. The ``Title`` node is a ``TextureRect``, so it's what we
|
||||
need to display the icon. In the scene tree, select the ``Title`` node,
|
||||
and rename it to ``Icon``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_counter_design_1.png
|
||||
.. figure:: img/ui_gui_step_tutorial_counter_design_1.png
|
||||
|
||||
Here's how your node tree should look so far
|
||||
|
||||
@@ -280,7 +280,7 @@ nodes. Click the Layout menu in the toolbar at the top of the viewport
|
||||
and select ``Full Rect``. Both nodes will update to fit
|
||||
the size of the ``Background``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_counter_design_2.png
|
||||
.. figure:: img/ui_gui_step_tutorial_counter_design_2.png
|
||||
|
||||
The nodes anchor to the entire Background, but their position is off
|
||||
|
||||
@@ -290,7 +290,7 @@ and center of the ``Background``. Select the ``Number`` node, change its
|
||||
resize its left edge a bit to add some padding between the left
|
||||
edge of the ``Background`` and the text.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_counter_design_3.png
|
||||
.. figure:: img/ui_gui_step_tutorial_counter_design_3.png
|
||||
|
||||
The Number node aligned to the left and centre
|
||||
|
||||
@@ -308,7 +308,7 @@ the ``Background``'s right edge. Open the Layout menu again and select
|
||||
``Center Right``. Move the icon up so it is centered vertically with the
|
||||
``Background``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_counter_design_4.png
|
||||
.. figure:: img/ui_gui_step_tutorial_counter_design_4.png
|
||||
|
||||
The bomb icon anchors to the Background's right edge. Resize the
|
||||
Counter container to see the Icon node stick to its right side
|
||||
@@ -326,7 +326,7 @@ can. Select the ``Bars`` node and scroll down to the ``Size Flags`` category. In
|
||||
the ``Horizontal`` category, check the ``Expand`` value. The ``Bars`` node
|
||||
should resize and push the counter to the right side of the screen.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_counter_design_5.png
|
||||
.. figure:: img/ui_gui_step_tutorial_counter_design_5.png
|
||||
|
||||
An expanding container eats all the space it can from its parent,
|
||||
pushing everything else along the way
|
||||
@@ -365,7 +365,7 @@ the one next to ``Bar`` to open the corresponding scene. Resize the
|
||||
and placed the Control nodes, we're ready to inherit this template and
|
||||
create the life bar. It's the same for the ``Counter``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_bar_template_scene.png
|
||||
.. figure:: img/ui_gui_step_tutorial_bar_template_scene.png
|
||||
|
||||
With no extra changes, our Bar is ready to use
|
||||
|
||||
@@ -456,7 +456,7 @@ will be affected by any property we change. You can try to change the
|
||||
size to a huge value like ``40`` and switch back to the ``LifeBar`` or
|
||||
the ``Bar`` scenes. You will see the text increased in size.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_1.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_EnergyBar_1.png
|
||||
|
||||
If we change the font resource, all the nodes that use it are
|
||||
affected
|
||||
@@ -467,7 +467,7 @@ and screwdriver icon on the top right of the inspector. In the drop-down
|
||||
menu, select the ``Make Sub-Resources Unique`` option. Godot will find
|
||||
all the resources this node uses and create unique copies for us.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_2.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_EnergyBar_2.png
|
||||
|
||||
Use this option to create unique copies of the resources for one node
|
||||
|
||||
@@ -483,7 +483,7 @@ Scroll down to the ``Custom Font`` section and open ``Font``. Lower the
|
||||
adjust the ``Bottom`` spacing value to align the text's baseline with
|
||||
the EP label on the left.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_3.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_EnergyBar_3.png
|
||||
|
||||
The EP Count widget, with a smaller font than its HP counterpart
|
||||
|
||||
@@ -504,7 +504,7 @@ makes it a bit large. Select it and in the ``Rect`` section, change the
|
||||
automatically and the ``Title`` and ``Number`` nodes should reposition
|
||||
as well.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_EnergyBar_4.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_EnergyBar_4.png
|
||||
|
||||
The Count looks better now it's a bit smaller
|
||||
|
||||
@@ -524,7 +524,7 @@ Let us now take care of the counters. Go to
|
||||
base. Rename the root node as ``BombCounter`` too.
|
||||
Save the new scene as ``BombCounter.tscn``. That's all for this scene.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_counters_1.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_counters_1.png
|
||||
|
||||
The bomb counter is the same as the original Counter scene
|
||||
|
||||
@@ -539,7 +539,7 @@ Shift the emerald icon a bit to the right and down. Use the Arrow
|
||||
Keys on the keyboard to nudge its position. Save, and we're done with
|
||||
all the UI elements.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_design_counters_2.png
|
||||
.. figure:: img/ui_gui_step_tutorial_design_counters_2.png
|
||||
|
||||
The emerald counter should look something like this
|
||||
|
||||
@@ -552,14 +552,14 @@ In the FileSystem dock, find the ``LifeBar.tscn`` and drag and drop it
|
||||
onto the ``Bars`` container in the scene tree. Do the same for the
|
||||
``EnergyBar``. You should see them align vertically.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_1.png
|
||||
.. figure:: img/ui_gui_step_tutorial_assemble_final_gui_1.png
|
||||
|
||||
The LifeBar and the EnergyBar align automatically
|
||||
|
||||
Now, drag and drop the ``BombCounter.tscn`` and ``EmeraldCounter.tscn`` scenes onto the
|
||||
``Counters`` node. They'll resize automatically.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_2.png
|
||||
.. figure:: img/ui_gui_step_tutorial_assemble_final_gui_2.png
|
||||
|
||||
The nodes resize to take all the available vertical space
|
||||
|
||||
@@ -570,7 +570,7 @@ in ``Counter.tscn``, we need to change the ``Size Flags`` on the
|
||||
the ``Vertical`` property, and check ``Shrink Center`` so the container
|
||||
centers inside the ``HBoxContainer``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_3.png
|
||||
.. figure:: img/ui_gui_step_tutorial_assemble_final_gui_3.png
|
||||
|
||||
Now both counters have a decent size
|
||||
|
||||
@@ -588,7 +588,7 @@ value as on the LifeBar. The ``Count`` should now have some margin on
|
||||
the left. If you save and go back to the GUI scene, it will be aligned
|
||||
vertically with the ``LifeBar``.
|
||||
|
||||
.. figure:: ./img/ui_gui_step_tutorial_assemble_final_gui_4.png
|
||||
.. figure:: img/ui_gui_step_tutorial_assemble_final_gui_4.png
|
||||
|
||||
The 2 bars align perfectly
|
||||
|
||||
@@ -616,7 +616,7 @@ the context of the game.
|
||||
Congratulations for getting to the end of this long tutorial. You can
|
||||
find the final project here: :download:`ui_gui_design.zip <files/ui_gui_design.zip>`.
|
||||
|
||||
.. figure:: ./img/ui_gui_design_final_result.png
|
||||
.. figure:: img/ui_gui_design_final_result.png
|
||||
|
||||
The final result
|
||||
|
||||
|
||||
@@ -216,7 +216,7 @@ right and bottom edges. On the other hand, margins represent a distance
|
||||
to the anchor position in pixels, while anchors are relative to the
|
||||
parent container's size.
|
||||
|
||||
.. figure:: ./img/ui_anchor_and_margins.png
|
||||
.. figure:: img/ui_anchor_and_margins.png
|
||||
|
||||
Margins are relative to the anchor position, which is relative to the
|
||||
anchors. In practice, you'll often let the container update margins
|
||||
|
||||
@@ -162,4 +162,4 @@ You may have some luck accelerating the approval process by messaging the
|
||||
moderators/assetlib reviewers on IRC (the ``#godotengine-atelier`` channel on Freenode),
|
||||
or the official Discord server.
|
||||
|
||||
.. |image0| image:: ./img/assetlib_submit.png
|
||||
.. |image0| image:: img/assetlib_submit.png
|
||||
|
||||
@@ -171,18 +171,18 @@ which will take you through the same package installation procedure as with the
|
||||
assets downloaded directly via Godot that we just covered.
|
||||
|
||||
|
||||
.. |image0| image:: ./img/assetlib_website.png
|
||||
.. |image1| image:: ./img/assetlib_search.png
|
||||
.. |image2| image:: ./img/assetlib_asset.png
|
||||
.. |image3| image:: ./img/assetlib_register-login.png
|
||||
.. |image4| image:: ./img/assetlib_register.png
|
||||
.. |image5| image:: ./img/assetlib_login.png
|
||||
.. |image6| image:: ./img/assetlib_login_header.png
|
||||
.. |image7| image:: ./img/assetlib_editor_workspace.png
|
||||
.. |image8| image:: ./img/assetlib_editor.png
|
||||
.. |image9| image:: ./img/assetlib_editor_asset.png
|
||||
.. |image10| image:: ./img/assetlib_editor_download.png
|
||||
.. |image11| image:: ./img/assetlib_editor_installer.png
|
||||
.. |image12| image:: ./img/assetlib_editor_installer_error.png
|
||||
.. |image13| image:: ./img/assetlib_editor_installer_success.png
|
||||
.. |image14| image:: ./img/assetlib_editor_projects.png
|
||||
.. |image0| image:: img/assetlib_website.png
|
||||
.. |image1| image:: img/assetlib_search.png
|
||||
.. |image2| image:: img/assetlib_asset.png
|
||||
.. |image3| image:: img/assetlib_register-login.png
|
||||
.. |image4| image:: img/assetlib_register.png
|
||||
.. |image5| image:: img/assetlib_login.png
|
||||
.. |image6| image:: img/assetlib_login_header.png
|
||||
.. |image7| image:: img/assetlib_editor_workspace.png
|
||||
.. |image8| image:: img/assetlib_editor.png
|
||||
.. |image9| image:: img/assetlib_editor_asset.png
|
||||
.. |image10| image:: img/assetlib_editor_download.png
|
||||
.. |image11| image:: img/assetlib_editor_installer.png
|
||||
.. |image12| image:: img/assetlib_editor_installer_error.png
|
||||
.. |image13| image:: img/assetlib_editor_installer_success.png
|
||||
.. |image14| image:: img/assetlib_editor_projects.png
|
||||
|
||||
Reference in New Issue
Block a user