Rename GUI to User Interface (UI)
@@ -21,7 +21,7 @@ By setting various properties on this object, you can control how individual cha
|
||||
Tutorials
|
||||
---------
|
||||
|
||||
- :doc:`../tutorials/gui/bbcode_in_richtextlabel`
|
||||
- :doc:`../tutorials/ui/bbcode_in_richtextlabel`
|
||||
|
||||
- `https://github.com/Eoin-ONeill-Yokai/Godot-Rich-Text-Effect-Test-Project <https://github.com/Eoin-ONeill-Yokai/Godot-Rich-Text-Effect-Test-Project>`__
|
||||
|
||||
|
||||
@@ -37,7 +37,7 @@ Sets :ref:`mouse_filter<class_Control_property_mouse_filter>` to :ref:`MOUSE_FIL
|
||||
Tutorials
|
||||
---------
|
||||
|
||||
- :doc:`../tutorials/gui/index`
|
||||
- :doc:`../tutorials/ui/index`
|
||||
|
||||
- :doc:`../tutorials/2d/custom_drawing_in_2d`
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ A custom effect for use with :ref:`RichTextLabel<class_RichTextLabel>`.
|
||||
Tutorials
|
||||
---------
|
||||
|
||||
- :doc:`../tutorials/gui/bbcode_in_richtextlabel`
|
||||
- :doc:`../tutorials/ui/bbcode_in_richtextlabel`
|
||||
|
||||
- `https://github.com/Eoin-ONeill-Yokai/Godot-Rich-Text-Effect-Test-Project <https://github.com/Eoin-ONeill-Yokai/Godot-Rich-Text-Effect-Test-Project>`__
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ Rich text can contain custom text, fonts, images and some basic formatting. The
|
||||
Tutorials
|
||||
---------
|
||||
|
||||
- :doc:`../tutorials/gui/bbcode_in_richtextlabel`
|
||||
- :doc:`../tutorials/ui/bbcode_in_richtextlabel`
|
||||
|
||||
- `GUI Rich Text/BBcode Demo <https://godotengine.org/asset-library/asset/132>`__
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ Theme resources can alternatively be loaded by writing them in a ``.theme`` file
|
||||
Tutorials
|
||||
---------
|
||||
|
||||
- :doc:`../tutorials/gui/gui_skinning`
|
||||
- :doc:`../tutorials/ui/gui_skinning`
|
||||
|
||||
Properties
|
||||
----------
|
||||
|
||||
@@ -95,7 +95,7 @@ The main documentation for the site is organized into the following sections:
|
||||
tutorials/inputs/index
|
||||
tutorials/io/index
|
||||
tutorials/i18n/index
|
||||
tutorials/gui/index
|
||||
tutorials/ui/index
|
||||
tutorials/rendering/index
|
||||
tutorials/shaders/index
|
||||
tutorials/networking/index
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
.. _doc_user_interface:
|
||||
|
||||
User Interface (UI)
|
||||
===================
|
||||
|
||||
In this section of the tutorial we explain the basics of creating a graphical
|
||||
user interface (GUI) in Godot.
|
||||
|
||||
UI building blocks
|
||||
------------------
|
||||
|
||||
Like everything else in Godot the user interface is built using nodes, specifically
|
||||
:ref:`Control <class_Control>` nodes. There are many different types of controls
|
||||
which are useful for creating specific types of the GUI. For simplicity we can
|
||||
separate them into two groups: content and layout.
|
||||
|
||||
Typical content controls include:
|
||||
|
||||
* :ref:`Buttons <class_Button>`
|
||||
* :ref:`Labels <class_Label>`
|
||||
* :ref:`LineEdits <class_LineEdit>` and :ref:`TextEdits <class_TextEdit>`
|
||||
|
||||
Typical layout controls include:
|
||||
|
||||
* :ref:`BoxContainers <class_BoxContainer>`
|
||||
* :ref:`MarginContainers <class_MarginContainer>`
|
||||
* :ref:`ScrollContainers <class_ScrollContainer>`
|
||||
* :ref:`TabContainers <class_TabContainer>`
|
||||
* :ref:`Popups <class_Popup>`
|
||||
|
||||
The following pages explain the basics of using such controls.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-gui-basics
|
||||
|
||||
size_and_anchors
|
||||
gui_containers
|
||||
custom_gui_controls
|
||||
gui_navigation
|
||||
control_node_gallery
|
||||
|
||||
GUI skinning and themes
|
||||
-----------------------
|
||||
|
||||
Godot features an in-depth skinning/theming system for control nodes. The pages in this section
|
||||
explain the benefits of that system and how to set it up in your projects.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-gui-skinning
|
||||
|
||||
gui_skinning
|
||||
gui_using_theme_editor
|
||||
|
||||
Control node tutorials
|
||||
----------------------
|
||||
|
||||
The following articles cover specific details of using particular control nodes.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-control-nodes-tutorials
|
||||
|
||||
bbcode_in_richtextlabel
|
||||
BIN
tutorials/ui/files/skin_assets.zip
Normal file
|
Before Width: | Height: | Size: 7.2 KiB After Width: | Height: | Size: 7.2 KiB |
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 52 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 17 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 6.4 KiB After Width: | Height: | Size: 6.4 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
BIN
tutorials/ui/img/sb1.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
tutorials/ui/img/sb2.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
BIN
tutorials/ui/img/skinbuttons1.png
Normal file
|
After Width: | Height: | Size: 27 KiB |
BIN
tutorials/ui/img/skinbuttons2.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 392 KiB After Width: | Height: | Size: 392 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
BIN
tutorials/ui/img/themeci.png
Normal file
|
After Width: | Height: | Size: 5.4 KiB |
BIN
tutorials/ui/img/themeci2.png
Normal file
|
After Width: | Height: | Size: 2.9 KiB |
BIN
tutorials/ui/img/themeci3.png
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
36
tutorials/ui/index.rst
Normal file
@@ -0,0 +1,36 @@
|
||||
User Interface (UI)
|
||||
===================
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-gui-basics
|
||||
|
||||
size_and_anchors
|
||||
gui_containers
|
||||
custom_gui_controls
|
||||
gui_navigation
|
||||
control_node_gallery
|
||||
|
||||
GUI skinning and themes
|
||||
-----------------------
|
||||
|
||||
Godot features an in-depth skinning/theming system for control nodes. The pages in this section
|
||||
explain the benefits of that system and how to set it up in your projects.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-gui-skinning
|
||||
|
||||
gui_skinning
|
||||
gui_using_theme_editor
|
||||
|
||||
Control node tutorials
|
||||
----------------------
|
||||
|
||||
The following articles cover specific details of using particular control nodes.
|
||||
|
||||
.. toctree::
|
||||
:maxdepth: 1
|
||||
:name: toc-control-nodes-tutorials
|
||||
|
||||
bbcode_in_richtextlabel
|
||||