Дизайн інтерфейсу за допомогою вузлів Control

Комп'ютерні дисплеї, мобільні телефони та телевізійні екрани бувають різних форм та розмірів. Щоб випустити гру, вам потрібно буде підтримувати різні співвідношення екрана та роздільну здатність. Побудувати чуйні інтерфейси, які адаптуються до всіх платформ, буває складно. На щастя, Godot поставляється із надійними інструментами для розробки та керування чуйним інтерфейсом користувача.

../../_images/godot_editor_ui.png

Інтерфейс Godot розроблений за допомогою своєї ж технології створення інтерфейсів

Цей посібник допоможе розпочати роботу з проєктним інтерфейсом користувача. Ви вивчите:

  • П'ять найкорисніших вузлів управління для створення інтерфейсу ваших ігор

  • Як працювати з якорем елементів інтерфейсу

  • Як дієво розмістити та упорядкувати свій інтерфейс користувача за допомогою контейнерів

  • П'ять найпоширеніших контейнерів (ви можете дізнатися більше про контейнери на сторінці документації GUI Containers).

Щоб дізнатися, як керувати інтерфейсом та підключати його до інших скриптів, читайте Build your first game UI in Godot.

Щоб створити інтерфейс користувача, ви будете використовувати вузли Control (вузли управління). Це вузли із зеленими значками у редакторі. Їх десятки, для створення чого завгодно - від смужок здоров'я до складних програм. Сам редактор Godot побудований за допомогою вузлів Control.

Control вузли мають унікальні властивості, що дозволяють їм добре працювати один з одним. Інші візуальні вузли, такі як Node2D і Sprite, не мають цих можливостей. Таким чином, щоб не ускладнювати собі життя, під час створення ваших інтерфейсів, використовуйте вузли Control, всюди де це тільки можливо.

Усі вузли управління мають однакові основні властивості:

  1. Прив'язка

  2. Обмежувальний прямокутник (Rect)

  3. Фокус і фокус сусідів (Focus)

  4. Прапорці розміру (Size Flags)

  5. Поле

  6. Налаштовувана тема призначеного для користувача інтерфейсу (Theme)

Як тільки ви засвоїте основи вузла Control, вам знадобиться менше часу, для вивчення решти вузлів, які виходять за рамки них.

5 найпоширеніших елементів інтерфейсу

Godot поставляється з десятками вузлів Control. Багато з них тут для того, щоб допомогти вам створити плагіни та програми редактора.

Для більшості ігор вам знадобиться лише п'ять типів інтерфейсу користувача. Ось ці п'ять вузлів Control:

  1. Label (Мітка): для відображення тексту

  2. TextureRect (Квадрат текстури): використовується в основному для фонів, або всього, що має статичне зображення

  3. TextureProgress: для смужок життя, завантаження, горизонтальних, вертикальних, або радіальних

  4. NinePatchRect: для масштабованих панелей

  5. TextureButton: для створення кнопок

../../_images/five_most_common_nodes.png

5 найпоширеніших вузлів управління для дизайну інтерфейсу

TextureRect

TextureRect відображає текстуру, або зображення, всередині інтерфейсу користувача. Він схожий на вузол Sprite (Спрайт), але пропонує кілька режимів масштабування. Режим масштабування можна змінити у властивості Stretch Mode (Режим розтягування):

  • Scale On Expand (compat) масштабує текстуру, щоб відповідати обмежувальному прямокутнику вузла, лише якщо властивість expand є true; в іншому випадку він поводиться як в режимі Keep. Режим за замовчуванням для зворотної сумісності.

  • Scale масштабує текстуру, щоб відповідати обмежувальному прямокутнику вузла.

  • Tile повторює текстуру, але не масштабує.

  • Keep і Keep Centered змушує текстуру залишатися у своєму початковому розмірі в лівому верхньому кутку, або по центру кадра.

  • Keep Aspect і Keep Aspect Centered масштабує текстуру, але змушує її залишати початкове співвідношення сторін у верхньому лівому куті, або в центрі кадру.

  • Keep Aspect Covered працює так само як ``Keep Aspect Centered``але коротша сторона поєднується з обмежувальним прямокутником, а інша відсікається межами вузла.

Як і у вузлах Sprite, ви можете модулювати колір TextureRect. Клацніть на властивість Modulate та скористайтесь інструментом вибору кольору.

../../_images/five_common_nodes_textureframe.png

TextureRect модульований червоним кольором

TextureButton

TextureButton схожий на TextureRect, за винятком того, що він має для текстур 5 гнізд : по одному для кожного стану кнопки. Більшу частину часу ви будете використовувати гнізда Normal (нормальний), Pressed (натиснутий), і Hover (наведений курсор). Focused корисно, якщо ваш інтерфейс прослуховує введення клавіатури. Шостий слот зображення, Click Mask (маска клацання), дозволяє визначити область для натискання, використовуючи 2-бітне, чисте чорно-біле зображення.

У розділі Base Button (Основи кнопки) ви знайдете кілька прапорців, які змінюють поведінку кнопки. Коли Toggle Mode увімкнено, кнопка буде переключатися між активним та нормальним станами при натисканні. Disabled робить його відключеним за замовчуванням, і в цьому випадку він буде використовувати текстуру Disabled. TextureButton ділиться кількома властивостями з кадром текстури: вона має властивість modulate для зміни кольору, а також режими Resize і Stretch для зміни поведінки масштабування.

../../_images/five_common_nodes_texturebutton.png

TextureButton і його 5 гнізд текстури

TextureProgress

TextureProgress накладається шарами до 3 спрайтів для створення панелі прогресу. Текстури Under і Over утворюють бутерброд всередині якого текстура Progress, яка відображає значення смужки.

Mode керує напрямком, в якому росте шкала: по горизонталі, по вертикалі, або в радіальному напрямку. Якщо встановити його на радіальне, властивості Initial Angle та Fill Degrees дозволяють обмежити діапазон заповнення.

Щоб анімувати шкалу, вам потрібно заглянути в розділ Range (Діапазон). Встановіть Min і Max властивості, щоб визначити діапазон шкали. Наприклад, щоб представити життя персонажа, вам варто встановити Min в 0, і Max на максимальне життя персонажа. Змініть властивість Value для оновлення шкали. Якщо залишити Min і Max значення за замовчуванням 0 і 100, та встановіть властивість Value на 40, то 40% від текстури Progress буде відображатися, а 60% буде залишатися прихованою.

../../_images/five_common_nodes_textureprogress.png

TextureProgress шкала, заповнена на дві третіх

Мітка

Label друкує текст на екрані. Ви знайдете всі його властивості в розділі Label (Мітка), в Інспекторі. Введіть текст у властивість Text та встановіть прапорець Autowrap, якщо ви хочете, щоб вона відповідала розміру текстового поля. Якщо Autowrap вимкнено, ви не зможете масштабувати вузол. Ви можете вирівняти текст по горизонталі та по вертикалі у властивостях Align та Valign.

../../_images/five_common_nodes_label.png

Зображення Label (мітки)

NinePatchRect

NinePatchRect ділить плитку текстури на 3 рядки та 3 стовпці. Центр і боки плитки масштабуються, а кути ні. Це корисно для створення панелей, діалогових вікон та масштабованих фонів для вашого інтерфейсу.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect масштабується за допомогою властивості min_size

Існує два способи створення інтерфейсів

В Godot є два способи створення масштабованих і гнучких інтерфейсів:

  1. Розміщення елементів за допомогою прив'язок: Використовуйте меню Макет, щоб розмістити та змінити розмір елемента інтерфейсу відносно предка.

  2. Автоматичне впорядкування вузлів контролю з допомогою контейнерів: Використовуйте вузли контейнерів для автоматичного масштабування та розміщення елементів інтерфейсу.

Ці два способи не завжди сумісні. Оскільки контейнер контролює своїх нащадків, ви не можете використовувати на них меню компонування. Кожен контейнер має специфічний ефект, тому вам може знадобитися вкласти декілька з них, щоб отримати робочий інтерфейс. В меню компонування ви працюєте знизу вгору, над дітьми. Оскільки ви не вставляєте зайвих контейнерів у сцену, меню компонування дозволяє створити більш чисті ієрархії, але в ньому складніше розташовувати елементи в рядку, стовпці, сітці тощо.

Створюючи інтерфейси для своїх ігор та інструментів, ви з часом зрозумієте для якої ситуації який спосіб підходить краще.

Розміщення елементів інтерфейсу з допомогою прив'язок

Контрольні вузли мають позицію та розмір, але вони також мають прив'язки та поля. Прив'язки визначають початок, або опорну точку, для лівого, верхнього, правого та нижнього країв вузла. Змініть будь-яку з 4 прив'язок, щоб змінити опорну точку поля.

../../_images/anchor_property.png

Властивість прив'язки

Як змінити прив'язку

Like any properties, you can edit the 4 anchor points in the Inspector, but this is not the most convenient way. When you select a control node, the layout menu appears above the viewport, in the toolbar. It gives you a list of icons to set all 4 anchors with a single click, instead of using the inspector's 4 properties. The layout menu will only show up when you select a control node.

../../_images/layout_menu.png

Меню макета у вікні перегляду

Прив'язки відносно батьківського контейнера

Each anchor is a value between 0 and 1. For the left and top anchors, a value of 0 means that without any margin, the node's edges will align with the left and top edges of its parent. For the right and bottom edges, a value of 1 means they'll align with the parent container's 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.

../../_images/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 for you

Margins change with the anchor

Margins update automatically when you move or resize a control node. They represent the distance from the control node's edges to its anchor, which is relative to the parent control node or container. That's why your control nodes should always be inside a container, as we'll see in a moment. If there's no parent, the margins will be relative to the node's own bounding Rectangle, set in the Rect section, in the inspector.

../../_images/control_node_margin.png

Margins on a CenterContainer set to the "Full Rect" anchor

Try to change the anchors or nest your Control nodes inside Containers: the margins will update. You'll rarely need to edit the margins manually. Always try to find a container to help you first; Godot comes with nodes to solve all the common cases for you. Need to add space between a lifebar and the border of the screen? Use the MarginContainer. Want to build a vertical menu? Use the VBoxContainer. More on these below.

Use size tags to change how UI elements fill the available space

Every control node has Size Flags. They tell containers how the UI elements should scale. If you add the "Fill" flag to the Horizontal or Vertical property, the node's bounding box will take all the space it can, but it'll respect its siblings and retain its size. If there are 3 TextureRect nodes in an HBoxContainer, with the "Fill" flags on both axes, they'll each take up to a third of the available space, but no more. The container will take over the node and resize it automatically.

../../_images/textureframe_in_box_container_fill.png

3 UI elements in an HBoxContainer, they align horizontally

The "Expand" flag lets the UI element take all the space it can, and push against its siblings. Its bounding rectangle will grow against the edges of its parent, or until it's blocked by another UI node.

../../_images/textureframe_in_box_container_expand.png

The same example as above, but the center node has the "Expand" size flag

Вам знадобиться певна практика, щоб зрозуміти теги розмірів, оскільки їх ефект може змінитися досить сильно, залежно від налаштування інтерфейсу.

Arrange control nodes automatically with containers

Containers automatically arrange all children Control nodes including other containers in rows, columns, and more. Use them to add padding around your interface or center nodes in their bounding rectangles. All built-in containers update in the editor, so you can see the effect instantly.

Containers have a few special properties to control how they arrange UI elements. To change them, navigate down to the Custom Constants section in the Inspector.

The 5 most useful containers

If you build tools, you might need all of the containers. But for most games, a handful will be enough:

  • MarginContainer, to add margins around parts of the UI

  • CenterContainer, to center its children in its bounding box

  • VboxContainer and HboxContainer, to arrange UI elements in rows or columns

  • GridContainer організовує вузли Control у вигляді сітки

CenterContainer зосереджує всіх своїх нащадків всередині свого обмежувального прямокутника. Його ви зазвичай використовуєте для титульних екранів, якщо ви хочете, щоб варіанти (опції) залишалися в центрі вікна перегляду. Оскільки він центрує все, вам часто потрібно буде мати один контейнер, вкладений всередині нього. Якщо ви замість цього використовуєте текстури та кнопки, вони будуть складатися в купу.

../../_images/five_containers_centercontainer.png

CenterContainer in action. The life bar centers inside its parent container.

The MarginContainer adds a margin on any side of the child nodes. Add a MarginContainer that encompasses the entire viewport to add a separation between the edge of the window and the UI. You can set a margin on the top, left, right, or bottom side of the container. No need to tick the checkbox: click the corresponding value box and type any number. It will activate automatically.

../../_images/five_containers_margincontainer.png

The MarginContainer adds a 40px margin around the Game User Interface

There are two BoxContainers: VBoxContainer and HBoxContainer. You cannot add the BoxContainer node itself, as it is a helper class, but you can use vertical and horizontal box containers. They arrange nodes either in rows or columns. Use them to line up items in a shop, or to build complex grids with rows and columns of different sizes, as you can nest them to your heart's content.

../../_images/five_containers_boxcontainer.png

The HBoxContainer horizontally aligns UI elements

VBoxContainer automatically arranges its children into a column. It puts them one after the other. If you use the separation parameter, it will leave a gap between its children. HBoxContainer arranges UI elements in a row. It's similar to the VBoxContainer, with an extra add_spacer method to add a spacer control node before its first child or after its last child, from a script.

The GridContainer lets you arrange UI elements in a grid-like pattern. You can only control the number of columns it has, and it will set the number of rows by itself, based on its children's count. If you have nine children and three columns, you will have 9÷3 = 3 rows. Add three more children and you'll have four rows. In other words, it will create new rows as you add more textures and buttons. Like the box containers, it has two properties to set the vertical and horizontal separation between the rows and columns respectively.

../../_images/five_containers_gridcontainer.png

A GridContainer with 2 columns. It sizes each column automatically.

Система користувацького інтерфейсу Godot є складною і пропонує багато іншого. Щоб дізнатися, як проєктувати більш досконалі інтерфейси, перейдіть до GUI section у документах.