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:
Rémi Verschelde
2020-06-05 14:38:25 +02:00
parent 6c0250ff36
commit 39dbbb29e1
11 changed files with 59 additions and 59 deletions

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

+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+15 -15
View File
@@ -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