|
@@ -6,12 +6,12 @@ GUI tutorial
|
|
|
Introduction
|
|
|
~~~~~~~~~~~~
|
|
|
|
|
|
-If there is something that most programmers hate with passion, that is
|
|
|
+If there is something that most programmers hate with passion, it is
|
|
|
programming graphical user interfaces (GUIs). It's boring, tedious and
|
|
|
-unchallenging. Several aspects make matters worse such as:
|
|
|
+unchallenging. Several aspects make matters worse, such as:
|
|
|
|
|
|
-- Pixel alignment of UI elements is difficult (so it looks just like
|
|
|
- the designer intends).
|
|
|
+- Pixel alignment of UI elements is difficult (such that it looks just
|
|
|
+ like the designer intends).
|
|
|
- UIs are changed constantly due to design and usability issues that
|
|
|
appear during testing.
|
|
|
- Handling proper screen re-sizing for different display resolutions.
|
|
@@ -19,7 +19,7 @@ unchallenging. Several aspects make matters worse such as:
|
|
|
|
|
|
GUI programming is one of the leading causes of programmer burnout.
|
|
|
During the development of Godot (and previous engine iterations),
|
|
|
-several techniques and philosophies for UI development were put in
|
|
|
+several techniques and philosophies for UI development were put into
|
|
|
practice, such as immediate mode, containers, anchors, scripting, etc.
|
|
|
This was always done with the main goal of reducing the stress
|
|
|
programmers had to face while putting together user interfaces.
|
|
@@ -40,7 +40,7 @@ provides user interface functionality descends from it.
|
|
|
|
|
|
When controls are put in a scene tree as a child of another control,
|
|
|
it's coordinates (position, size) are always relative to the parent.
|
|
|
-This sets the basis for editing complex user interface quickly and
|
|
|
+This sets the basis for editing complex user interfaces quickly and
|
|
|
visually.
|
|
|
|
|
|
Input and drawing
|
|
@@ -51,9 +51,9 @@ Controls receive input events by means of the
|
|
|
callback. Only one control, the one in focus, will receive
|
|
|
keyboard/joypad events (see
|
|
|
:ref:`Control.set_focus_mode() <class_Control_set_focus_mode>`
|
|
|
-and :ref:`Control.grab_focus() <class_Control_grab_focus>`.)
|
|
|
+and :ref:`Control.grab_focus() <class_Control_grab_focus>`).
|
|
|
|
|
|
-Mouse Motion events are received by the control directly below the mouse
|
|
|
+Mouse motion events are received by the control directly below the mouse
|
|
|
pointer. When a control receives a mouse button pressed event, all
|
|
|
subsequent motion events are received by the pressed control until that
|
|
|
button is released, even if the pointer moves outside the control
|
|
@@ -62,14 +62,14 @@ boundary.
|
|
|
Like any class that inherits from :ref:`CanvasItem <class_CanvasItem>`
|
|
|
(Control does), a :ref:`CanvasItem._draw() <class_CanvasItem__draw>`
|
|
|
callback will be received at the beginning and every time the control
|
|
|
-needs to be redrawn (programmer needs to call
|
|
|
+needs to be redrawn (the programmer needs to call
|
|
|
:ref:`CanvasItem.update() <class_CanvasItem_update>`
|
|
|
to enqueue the CanvasItem for redraw). If the control is not visible
|
|
|
(yet another CanvasItem property), the control does not receive any
|
|
|
input.
|
|
|
|
|
|
In general though, the programmer does not need to deal with drawing and
|
|
|
-input events directly when building UIs, (that is more useful when
|
|
|
+input events directly when building UIs (that is more useful when
|
|
|
creating custom controls). Instead, controls emit different kinds of
|
|
|
signals with contextual information for when action occurs. For
|
|
|
example, a :ref:`Button <class_Button>` emits
|
|
@@ -84,7 +84,7 @@ way to get the picture on how controls works, as they are not as
|
|
|
complex as it might seem.
|
|
|
|
|
|
Additionally, even though Godot comes with dozens of controls for
|
|
|
-different purposes, it happens often that it's just easier to attain a
|
|
|
+different purposes, it happens often that it's easier to attain a
|
|
|
specific functionality by creating a new one.
|
|
|
|
|
|
To begin, create a single-node scene. The node is of type "Control" and
|
|
@@ -114,9 +114,9 @@ Add a script to that node, with the following code:
|
|
|
tapped=true
|
|
|
update()
|
|
|
|
|
|
-Then run the scene. When the rectangle is clicked/tapped, it will go from
|
|
|
-blue to red. That synergy between the events and drawing is pretty much
|
|
|
-how most controls work internally.
|
|
|
+Then run the scene. When the rectangle is clicked/tapped, it will change
|
|
|
+color from blue to red. That synergy between the events and the drawing
|
|
|
+is pretty much how most controls work internally.
|
|
|
|
|
|
.. image:: /img/ctrl_normal.png
|
|
|
|
|
@@ -125,7 +125,7 @@ how most controls work internally.
|
|
|
UI complexity
|
|
|
~~~~~~~~~~~~~
|
|
|
|
|
|
-As mentioned before, Godot includes dozens of controls ready for using
|
|
|
+As mentioned before, Godot includes dozens of controls ready for use
|
|
|
in a user interface. Such controls are divided in two categories. The
|
|
|
first is a small set of controls that work well for creating most game
|
|
|
user interfaces. The second (and most controls are of this type) are
|
|
@@ -143,22 +143,22 @@ be skinned easily with regular textures.
|
|
|
- :ref:`Label <class_Label>`: Node used for showing text.
|
|
|
- :ref:`TextureFrame <class_TextureFrame>`: Displays a single texture,
|
|
|
which can be scaled or kept fixed.
|
|
|
-- :ref:`TextureButton <class_TextureButton>`: Displays a simple texture
|
|
|
- buttons, states such as pressed, hover, disabled, etc. can be set.
|
|
|
+- :ref:`TextureButton <class_TextureButton>`: Displays a simple textured
|
|
|
+ button, states such as pressed, hover, disabled, etc. can be set.
|
|
|
- :ref:`TextureProgress <class_TextureProgress>`: Displays a single
|
|
|
textured progress bar.
|
|
|
|
|
|
Additionally, re-positioning of controls is most efficiently done with
|
|
|
anchors in this case (see the :ref:`doc_size_and_anchors` tutorial for more
|
|
|
-info).
|
|
|
+information).
|
|
|
|
|
|
In any case, it will happen often that even for simple games, more
|
|
|
-complex UI behaviors will be required. An example of this is a scrolling
|
|
|
+complex UI behaviors are required. An example of this is a scrolling
|
|
|
list of elements (for a high score table, for example), which needs a
|
|
|
:ref:`ScrollContainer <class_ScrollContainer>`
|
|
|
and a :ref:`VBoxContainer <class_VBoxContainer>`.
|
|
|
These kind of more advanced controls can be mixed with the regular ones
|
|
|
-seamlessly (they are all controls anyway).
|
|
|
+seamlessly (they are all controls after all).
|
|
|
|
|
|
Complex UI controls
|
|
|
~~~~~~~~~~~~~~~~~~~
|
|
@@ -173,4 +173,4 @@ another set of scenarios, most commonly:
|
|
|
|
|
|
Re-positioning controls for these kind of interfaces is more commonly
|
|
|
done with containers (see the :ref:`doc_size_and_anchors` tutorial for more
|
|
|
-info).
|
|
|
+information).
|