Дизайн інтерфейсу за допомогою вузлів 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

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

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

Як і будь-які властивості, ви можете редагувати 4 точки прив'язки в Інспекторі, але це не самий зручний спосіб. Коли ви вибираєте вузол контролю, над вікном перегляду, на панелі інструментів, з’являється меню макета (компонування). Воно дає вам список піктограм для встановлення всіх 4 якорів одним клацанням, замість того, щоб використовувати 4 властивості інспектора. Меню макета буде видно лише тоді, коли ви вибрали вузол контролю.

../../_images/layout_menu.png

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

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

Кожна прив'язка - це значення від 0 до 1. Для лівої та верхньої прив'язки значення 0 означає, що краї вузла будуть вирівнюватись по лівому та верхньому краю його предка без будь-якого поля. Для правого та нижнього країв значення 1 означає, що вони будуть вирівнюватись з правим і нижнім краєм предка. З іншого боку, поля представляють відстань до положення прив'язки в пікселях, тоді як прив'язки відносно розміру батьківського контейнера.

../../_images/ui_anchor_and_margins.png

Поля відносно положення прив'язок, положення яких відносне контейнеру. На практиці ви часто дозволяєте контейнеру оновлювати поля для вас

Поля змінюються разом з прив'язкою

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

../../_images/control_node_margin.png

Поля на контейнері CenterContainer встановлені на прив'язці "Повний прямокутник"

Спробуйте змінити прив'язки, або вкладати свої контрольні вузли всередину контейнерів: поля будуть оновлені. Вам рідко потрібно буде редагувати поля вручну. Завжди намагайтеся спочатку знайти підходящий контейнер; Godot поставляється з вузлами для вирішення всіх загальних для вас випадків. Потрібно додати простір між полоскою здоров'я та рамкою екрана? Використовуйте MarginContainer. Хочете скласти вертикальне меню? Використовуйте VBoxContainer. Детальніше про них нижче.

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

Кожен вузол контролю має Size Flags. Вони розповідають контейнерам, як слід змінювати елементи інтерфейсу. Якщо ви додасте галочку "Fill" до властивості Horizontal, або Vertical, обмежувальне поле вузла займе весь простір, який зможе, але воно поважатиме його братів та сестер і збереже їх розмір. Якщо в HBoxContainer є 3 вузли TextureRect, з галочками "Fill" на обох осях, вони займають третину наявного простору, але не більше. Контейнер візьме на себе вузол і змінить його розмір автоматично.

../../_images/textureframe_in_box_container_fill.png

3 елементи інтерфейсу в HBoxContainer вирівняні горизонтально

Галочка "Expand" дозволяє елементу інтерфейсу зайняти весь простір, який він може, і потиснути своїх побратимів. Його обмежувальний прямокутник розшириться до країв його предка, або поки його розширення не заблокує інший вузол інтерфейсу.

../../_images/textureframe_in_box_container_expand.png

Той самий приклад, що і вище, але центральний вузол має галочку "Expand"

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

Автоматична організація вузлів контролю з контейнерами

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

У контейнерів є кілька спеціальних властивостей для управління тим, як вони розташовують елементи інтерфейсу. Щоб змінити їх, перейдіть до розділу Custom Constants (Власні константи) в інспекторі.

5 найкорисніших контейнерів

Якщо ви створюєте інструменти, вам можуть знадобитися всі контейнери. Але для більшості ігор буде достатньо декількох:

  • MarginContainer, щоб додати поля навколо частини інтерфейсу користувача

  • CenterContainer, центрує своїх нащадків у своїй обмежувальній коробці

  • VboxContainer і HboxContainer розташовують елементи інтерфейсу в рядках або стовпцях

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

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

../../_images/five_containers_centercontainer.png

CenterContainer в дії. Шкала здоров'я знаходиться в центрі його батьківського контейнера.

MarginContainer додає поле з будь-якої сторони вузлів-нащадків. Додайте MarginContainer, який охоплює все вікно перегляду, щоб додати розділення між краєм вікна та інтерфейсом користувача. Ви можете встановити поле у верхній, лівій, правій, або нижній частині контейнера. Не потрібно встановлювати галочку: натисніть відповідне поле та введіть будь-яке число. Він активується автоматично.

../../_images/five_containers_margincontainer.png

MarginContainer додає 40-піксельний відступ навколо ігрового інтерфейсу користувача

Є два BoxContainers: VBoxContainer і HBoxContainer. Ви не можете додати сам вузол BoxContainer, оскільки це допоміжний клас, але ви можете використовувати вертикальні та горизонтальні контейнери. Вони розташовують вузли, або рядками, або стовпцями. Використовуйте їх для вирівнювання предметів у магазині, або для складання складних сіток із рядками та стовпцями різного розміру, оскільки ви можете вкладати їх як забажаєте.

../../_images/five_containers_boxcontainer.png

HBoxContainer горизонтально вирівнює елементи інтерфейсу користувача

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

GridContainer дозволяє розташовувати елементи інтерфейсу користувача за сіткою. Ви можете лише керувати кількістю стовпців, які він має, і він встановлюватиме кількість рядків самостійно, виходячи з кількості нащадків. Якщо у вас дев'ять нащадків і три стовпчики, у вас буде 9 ÷ 3 = 3 ряди. Додайте ще трьох нащадків, і у вас буде чотири ряди. Іншими словами, це створить нові рядки, коли ви додасте більше текстур і кнопок. Як і коробчасті контейнери, він має дві властивості, які встановлюють вертикальне та горизонтальне розділення між рядками та стовпцями відповідно.

../../_images/five_containers_gridcontainer.png

GridContainer з 2 стовпцями. Він розміщує кожен стовпець автоматично.

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