diff --git a/getting_started/step_by_step/ui_introduction_to_the_ui_system.rst b/getting_started/step_by_step/ui_introduction_to_the_ui_system.rst index 48e2297af..a38de6638 100644 --- a/getting_started/step_by_step/ui_introduction_to_the_ui_system.rst +++ b/getting_started/step_by_step/ui_introduction_to_the_ui_system.rst @@ -22,7 +22,8 @@ This guide will get you started with UI design. You will learn: - How to work with the anchor of UI elements - How to efficiently place and arrange your user interface using containers -- The five most common containers +- The five most common containers (at a later time, you can learn more about containers in +the :ref:`GUI Containers` documentation page). To learn how to control the interface and connect it to other scripts, read :ref:`Build your first game UI in Godot `. diff --git a/tutorials/gui/img/container_size_flags.png b/tutorials/gui/img/container_size_flags.png new file mode 100644 index 000000000..e760e17e0 Binary files /dev/null and b/tutorials/gui/img/container_size_flags.png differ diff --git a/tutorials/gui/img/containers_box.png b/tutorials/gui/img/containers_box.png new file mode 100644 index 000000000..91cbd78ef Binary files /dev/null and b/tutorials/gui/img/containers_box.png differ diff --git a/tutorials/gui/img/containers_center.png b/tutorials/gui/img/containers_center.png new file mode 100644 index 000000000..378d6c88d Binary files /dev/null and b/tutorials/gui/img/containers_center.png differ diff --git a/tutorials/gui/img/containers_center_pan.gif b/tutorials/gui/img/containers_center_pan.gif new file mode 100644 index 000000000..fe6393976 Binary files /dev/null and b/tutorials/gui/img/containers_center_pan.gif differ diff --git a/tutorials/gui/img/containers_grid.png b/tutorials/gui/img/containers_grid.png new file mode 100644 index 000000000..b996bc82a Binary files /dev/null and b/tutorials/gui/img/containers_grid.png differ diff --git a/tutorials/gui/img/containers_margin.png b/tutorials/gui/img/containers_margin.png new file mode 100644 index 000000000..eabaf1a7a Binary files /dev/null and b/tutorials/gui/img/containers_margin.png differ diff --git a/tutorials/gui/img/containers_margin_constants.png b/tutorials/gui/img/containers_margin_constants.png new file mode 100644 index 000000000..648a540d6 Binary files /dev/null and b/tutorials/gui/img/containers_margin_constants.png differ diff --git a/tutorials/gui/img/containers_panel.png b/tutorials/gui/img/containers_panel.png new file mode 100644 index 000000000..94e50eae4 Binary files /dev/null and b/tutorials/gui/img/containers_panel.png differ diff --git a/tutorials/gui/img/containers_scroll.png b/tutorials/gui/img/containers_scroll.png new file mode 100644 index 000000000..a61307927 Binary files /dev/null and b/tutorials/gui/img/containers_scroll.png differ diff --git a/tutorials/gui/img/containers_split.png b/tutorials/gui/img/containers_split.png new file mode 100644 index 000000000..d99172c22 Binary files /dev/null and b/tutorials/gui/img/containers_split.png differ diff --git a/tutorials/gui/img/containers_split_drag.gif b/tutorials/gui/img/containers_split_drag.gif new file mode 100644 index 000000000..b54a2c3ed Binary files /dev/null and b/tutorials/gui/img/containers_split_drag.gif differ diff --git a/tutorials/gui/img/containers_tab.png b/tutorials/gui/img/containers_tab.png new file mode 100644 index 000000000..a605541c8 Binary files /dev/null and b/tutorials/gui/img/containers_tab.png differ diff --git a/tutorials/gui/img/godot_containers.png b/tutorials/gui/img/godot_containers.png new file mode 100644 index 000000000..3ef8f5fe4 Binary files /dev/null and b/tutorials/gui/img/godot_containers.png differ diff --git a/tutorials/gui/index.rst b/tutorials/gui/index.rst index 0fc0c8f81..f4643c74c 100644 --- a/tutorials/gui/index.rst +++ b/tutorials/gui/index.rst @@ -8,6 +8,7 @@ GUI gui_skinning custom_gui_controls size_and_anchors + gui_containers bbcode_in_richtextlabel -.. gui_containers + diff --git a/tutorials/viewports/multiple_resolutions.rst b/tutorials/viewports/multiple_resolutions.rst index e26364afe..2909ef62a 100644 --- a/tutorials/viewports/multiple_resolutions.rst +++ b/tutorials/viewports/multiple_resolutions.rst @@ -3,6 +3,46 @@ Multiple resolutions ==================== + +The problem of multiple resolutions +------------------------------------ + +There are often misunderstandings by developers on how to best support +multiple resolutions. For Desktop and Console games this is more or less straightforward, +as most screen aspect ratios are 16:9 and resolutions are standard (720,1080,2k,4k,etc). + +For mobile games at first it was easy. For many years, the iPhone remained using the same +resolution. When *Retina* was implemented, it just doubled the amount of pixel density +(so most developers had assets in both resolutions). + +Nowadays this is no longer the case, as there are plenty of different screen sizes, densities +and aspects for mobile, and non conventional sizes are becoming trendy for Desktop, +such as ultra-wide. + +For 3D games there is not much of a need to support multiple resolutions (from the aesthetical +point of view). Conventionally, the 3D geometyr will just fill whathever is available from +the screen. The main reason one may want to support them is for *performance* reasons (running +in lower resolution to increase performance). + +For 2D and game UIs, this is a different matter, as art needs to be created using specific pixel sizes +in software such as Photoshop, Gimp, Krita, etc. + +Given layouts, aspects, resolutions and pixel densities can change so much, it is no longer possible +to design UIs for every specific screen. Another method must be used. + +One size fits all +----------------- + +The most common approach nowadays is to just use a single *base* resolution and then fit it to everything else. This resolution is how +one expects most players to play the game (given their hardware). For mobile, Google has useful `stats `_ online, +and for desktop, Steam `also does`_. + +As an example, Steam shows that the most common *primary display resolution* is 1920x1080, so a sensible approach would be +to develop a game for this resolution, then handle scaling for different sizes and aspect ratios. + +Godot provides a battery of very powerful tools to do this easily. + + Base size --------- @@ -189,3 +229,12 @@ From scripts To configure stretching at runtime from a script, use the ``get_tree().set_screen_stretch()`` function (see :ref:`SceneTree.set_screen_stretch() `). + +Handling aspect ratios +^^^^^^^^^^^^^^^^^^^^^^ + +Once scaling for different resolutions is accounted for, just make sure that your *user interface* also scales for different aspect ratios. This can be easily done using :ref:`anchors ` and/or :ref:`anchors `. + + + +