Design the GUI

Now that you've nailed the basics, we're going to see how to build a game Graphical User Interface (GUI) with reusable UI components: a life bar, an energy bar, and bomb and emerald counters. By the end of this tutorial, you'll have a game GUI, ready to control with GDscript or VisualScript:

../../_images/ui_gui_design_final_result.png

Кінцевий результат

Ви також навчитеся:

  1. Створювати гнучкі компоненти інтерфейсу
  2. Use scene inheritance
  3. Build a complex UI

Download the project files: ui_gui_design.zip and extract the archive. Import the start/ project in Godot to follow this tutorial. The end/ folder contains the final result.

Примітка

You can watch this tutorial as a video on YouTube.

Breaking down the UI

Let's break down the final UI and plan the containers we'll use. As in the Дизайн титульного екрана, it starts with a MarginContainer. Then, we can see up to three columns:

  1. Зліва лічильники здоров'я та енергії
  2. Шкали здоров'я та енергії
  3. Лічильники бомб та смарагдів справа

Але лічильники і шкали зліва є частинами одного і того ж елемента інтерфейсу. В результаті у нас залишається два стовпці:

  1. Шкали здоров'я та енергії зліва
  2. Лічильники бомб та смарагдів справа

This makes it easier to nest containers: we have some margins around the border of the screen using a MarginContainer, followed by an HBoxContainer to manage our two columns. The two bars stack on top of one another inside a VBoxContainer. And we'll need a last HBoxContainer in the right column to place the bomb and emerald counters side-by-side.

../../_images/ui_gui_step_tutorial_containers_structure.png

У нас виходить чистий макет інтерфейсу лише з 4 контейнерами

Нам будуть потрібні додаткові контейнери всередині окремих компонентів інтерфейсу, але наразі ми маємо основну структуру графічного інтерфейсу. Маючи такий план, ми можемо перейти в Godot і створити наш графічний інтерфейс.

Створення базового GUI (графічного інтерфейсу)

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

Поки почнемо з кількох контейнерів.

Створіть нову сцену та додайте MarginContainer. Виберіть вузол і назвіть його GUI.

Ми хочемо, щоб наш інтерфейс прив'язався до верхньої частини екрана. Виберіть вузол GUI і натисніть кнопку Макет у верхній частині вікна перегляду. Виберіть варіант Згори за шириною. Вузол GUI прикріпиться до верхнього краю його предка, за замовчуванням до верхньої частини вікна. Він змінить розмір автоматично по вертикальній осі, щоб звільнити місце для своїх нащадків.

Збережіть сцену як ``GUI.tscn ``. Ми розмістимо в ній увесь графічний інтерфейс.

З вибраним MarginContainer перейдіть до інспектора та прокрутіть униз до розділу Custom Constants. Розгорніть його та встановіть кожну із властивостей Margin на 20 пікселів. Далі додайте вузол HBoxContainer. Він буде містити дві шкали зліва та, окремо, два лічильника справа.

Ми хочемо укласти шкали вертикально всередину HBoxContainer. Додайте до HBoxContainer в нащадки``VBoxContainer`` і назвіть його Bars (Шкали). Виберіть HBoxContainer ще раз, і додайте в нащадки ще один HBoxContainer. Назвіть його Counters. З цими чотирма контейнерами ми маємо базу для нашої сцени GUI.

../../_images/ui_gui_containers_structure_in_godot.png

У вас повинно бути 4 контейнери, які виглядають так

Примітка

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

Створення бази для шкал

Кожна шкала розділена на два піделементи, які вирівнюються по горизонталі: мітка з кількістю здоров’я зліва та сама шкала справа. Знову HBoxContainer ідеальний інструмент для роботи. Виберіть вузол Bars і додайте йому HBoxContainer всередину. Назвіть його Bar.

Для самої мітки потрібно щонайменше три вузли: NinePatchRect для фону, поверх якого ми додамо текстуру зліва, HP, або EP, і Label праворуч для значення. Ми можемо вкласти вузли``Control`` як захочемо. Ми могли б використовувати NinePatchRect в якості предка для двох інших елементів. Але краще використовувати контейнери замість цього, оскільки їх роль полягає в організації компонентів інтерфейсу. Врешті, пізніше, нам все-таки знадобиться MarginContainer, щоб додати простір між кількістю життя та показником. Виберіть Bar і додайте MarginContainer. Назвіть його Count. Всередину нього додайте три вузли:

  1. NinePatchRect з іменем Background
  2. TextureRect з іменем Title
  3. І Label з іменем Number

Щоб додані вузли були побратимами, перед додаванням завжди вибирайте вузол Count.

../../_images/ui_gui_step_tutorial_bar_template_1.png

Ваше дерево сцени повинно виглядати так. Ми готові додати деякі текстури

Наша сцена все ще порожня. Настав час закинути деякі текстури. Щоб завантажити текстури, перейдіть до панелі Файлова система зліва від області перегляду. Перейдіть до теки res://assets/GUI folder.

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

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

Виберіть Background в Сцені. В Інспекторі ви повинні побачити властивість Texture. З панелі Файлова система перетягніть label_HP_bg.png в Texture. Картинка залишиться стиснута. Предок MarginContainer стискає розміри до 0, поки ми не задамо елементам всередині контейнера мінімальний розмір, який треба утримувати. Виберіть вузол Background. У Інспекторі прокрутіть униз до розділу Rect. Встановіть Min Size на (100, 40). Ви повинні побачити, як міняється розмір Background разом з його батьківськими контейнерами.

Далі виберіть Title і перетягніть label_HP.png в його властивість Texture. Виберіть вузол Number, натисніть поле поруч із властивістю Text та введіть 10. Таким чином, ми можемо побачити обидва вузли у вікні перегляду. Вони повинні складатись у верхньому лівому куті свого предка MarginContainer.

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

Якщо вибрати обидва вузли, ви повинні побачити щось подібне

Оскільки у них є контейнер в якості прямого предка, ми не можемо вільно їх переміщувати: вузол Count``буде скидати їх прив'язки, розмір і положення. Спробуйте перемістити та змінити розміри вузлів у вікні перегляду. Потім виберіть будь-яку з трьох текстур і натисніть ``Ctrl + Up, або Ctrl+Down, щоб спробувати впорядкувати їх в Сцені. Вони повернуться до попереднього розміру та положення.

Предки-контейнери контролюють розмір, масштаб, поля та прив'язки їхніх прямих нащадків. Щоб змінити вузли, потрібно вкласти їх у звичайний елемент управління Control, або інший елемент інтерфейсу. Ми будемо використовувати Background в якості предка для Title та Number. Виберіть Title і Number, і перетягніть їх на Background.

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

Використовуючи вузол Background в якості предка, ми відбираємо контроль від Count, який є контейнером MarginContainer

Виберіть Title і в інспекторі змініть його властивість Stretch Mode на Keep Centered. Далі знайдіть розділ Rect в Інспекторі та змініть властивість Size на (50, 40), щоб позначка займала лише ліву половину фону. Далі виберіть вузол Number. У вікні перегляду виберіть меню Макет та клацніть Увесь прямокутник. Вузол відповідно розтягнеться на увесь Background. Поверніться до Інспектора і змініть його властивість Align на Right, а властивість Valign на Center. Текст повинен прилягати до центру правого краю Background. Змініть розмір вузла по горизонталі, щоб він зайняв праву половину Background, але з правого краю залишився невеликий відступ.

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

Ось як повинні виглядати межі вузлів у вікні перегляду. Наразі не потрібно розміщувати їх дуже точно.

Зміна шрифта в Label

Шрифт мітки занадто малий. Нам потрібно його змінити. Виберіть вузол Number в Інспекторі, прокрутіть до Control та знайдіть розділ Custom Font. Клацніть поле поруч із властивістю Font та натисніть на New Dynamic Font. Клацніть на полі ще раз та виберіть Редагувати.

Ви попадете в ресурс Dynamic Font. Розгорніть розділ Font та натисніть поле поруч із Font Data. Натисніть кнопку Завантажити. У браузері файлів перейдіть до папки Assets/Font та двічі клацніть на Comfortaa-Bold.ttf, щоб відкрити його. Ви повинні побачити оновлення шрифту у вікні перегляду. Розгорніть розділ налаштувань Settings, щоб змінити розмір шрифту. Встановіть властивість Size на більш високе значення, наприклад 24, або 28.

Тепер нам потрібно вирівняти нижній край числа з нижнім краєм текстури HP зліва. Для цього, все ще в ресурсі DynamicFont, ви можете налаштувати властивість Bottom в розділі Extra Spacing. Тут можна відрегулювати відступ від тексту до нижнього краю. Клацніть вузол Number на вкладці Сцена, щоб повернутися до властивостей вузла та змінити Valign на Bottom. Щоб відкоригувати нижню лінію тексту, ще раз натисніть на поле шрифту в розділі Custom Font і підлаштуйте властивість Bottom, так щоб текст вирівнявся з вузлом Title. Я використав значення 2.

../../_images/ui_gui_step_tutorial_number_baseline.png

При значенні Bottom в 2 пікселя Number вирівнюється з Title

Цим ми закінчили найважчу частину GUI. Вітаю! Перейдемо до більш простих вузлів.

Додавання шкали прогресса

Нам потрібен останній елемент, щоб завершити нашу шкалу здоров'я: сам показник. Godot поставляється з вузлом TextureProgress, у якому є все, що нам потрібно.

Виберіть вузол Bar і додайте до нього TextureProgress. Назвіть його Gauge. У інспекторі розгорніть розділ Textures. Перейдіть до Файлової системи і перетягніть текстуру lifebar_bg.png на Under. Зробіть те ж саме з зображенням lifebar_fill.png і перетягніть його на Progress. Під класом Range у інспекторі змініть властивість Value на 50 щоб побачити, як показник заповнюється.

Маючи лише п'ять вузлів Control, наша перша шкала готова до використання.

../../_images/ui_gui_step_tutorial_bar_final.png

Наша шкала здоров'я готова. Ця остання частина була швидкою, чи не так? Це завдяки нашій надійній установці контейнерів.

Розробка лічильників бомб та смарагдів

Лічильники бомб та смарагдів схожі на вузол шкали Count. Тож ми продублюємо його і використаємо як шаблон.

У вузлі Bar виберіть Count і натисніть Ctrl + D, щоб його дублювати. Перетягніть новий вузол у Counters HBoxContainer в нижню частину дерева сцени. Ви можете побачити, як його розмір автоматично зміниться. Не хвилюйтеся з цього приводу зараз, ми скоро виправимо розмір.

Перейменуйте вузол Count2 у Counter. На відміну від шкал, ми хочемо, щоб число було зліва, а значок - справа. Налаштування однакове: нам потрібні вузли фону (NinePatchRect), заголовка та числа. Вузол Title є TextureRect, так що це те , що нам потрібно , щоб відобразити значок. У дереві сцен виберіть вузол Title та перейменуйте його на Icon.

../../_images/ui_gui_step_tutorial_counter_design_1.png

Ось як має виглядати ваше дерево вузлів на даний момент

Вибравши вузол Icon, у інспекторі прокрутіть доверху, щоб побачити Texture. З панелі Файлова система виберіть bombs_icon.png. Перетягніть його в гніздо Texture. На вкладці Сцена виберіть вузли Icon і Number. Клацніть меню Макет на панелі інструментів у верхній частині вікна перегляду та виберіть Увесь прямокутник. Обидва вузли оновляться відносно розміру Background.

../../_images/ui_gui_step_tutorial_counter_design_2.png

Вузли прив'язуються до всього Background, але їх положення вимкнено

Let's change the Number's align properties to move it to the left and center of the Background. Select the Number node, change its Align property to left and the Valign property to center. Then resize its left edge a bit to add some padding between the left edge of the Background and the text.

../../_images/ui_gui_step_tutorial_counter_design_3.png

The Number node aligned to the left and center

Щоб перекрити піктограму та фон, нам потрібно кілька налаштувань. По-перше, наш фон трохи надто високий. Це тому, що він знаходиться у контейнері поля (MarginСontainer), який контролюється самим верхнім вузлом GUI. Виберіть вузол GUI у верхній частині дерева сцени та зменшіть його по вертикалі, щоб він був максимально тонким. Ви побачите, що показник не дозволяє вам зробити його занадто маленьким. Контейнер не може бути меншим, ніж мінімальний розмір його нащадків. Поля контейнера також беруться до уваги.

Виберіть Icon, натисніть меню Макет та виберіть Full Rect, щоб центрувати його повторно. Нам потрібно, щоб він прикріпився до правого краю Background. Відкрийте меню Макет ще раз та виберіть За центром праворуч. Перемістіть піктограму вгору, щоб вона була розташована по центрі вертикалі разом з Background.

../../_images/ui_gui_step_tutorial_counter_design_4.png

Піктограма бомби прив'язується до правого краю фону. Змініть розмір контейнера Counter, щоб побачити, як вузол Icon притримується правої сторони

Оскільки ми дублювали Counter з Count шрифт вузла Number зламався. Виберіть вузол Number ще раз, перейдіть до властивості Font і клацніть по ресурсу DynamicFont. У розділі Extra Spacing змініть значення Bottom на 0, щоб скинути базову лінію шрифту. Зараз наш лічильник працює як очікувалося.

Давайте прив'яжемо Counters до правого краю вікна перегляду. Для цього нам потрібно налаштувати контейнер Bars так, щоб він зайняв весь наявний горизонтальний простір, який зможе. Виберіть вузол Bars і прокрутіть вниз до розділу Size Flags. У підрозділі Horizontal позначте Expand. Вузол Bars повинен змінити розмір і потиснути лічильник до правої сторони екрану.

../../_images/ui_gui_step_tutorial_counter_design_5.png

Расширившийся контейнер, з'їдає у свого предка увесь простір, який зможе, посуваючи все інше в сторону

Перетворення шкали та лічильника на багаторазові елементи інтерфейсу

У нас одна шкала і один лічильник. Але нам їх треба по дві штуки кожного. Пізніше нам може знадобитися змінити дизайн шкал, або їх функціональність. Було б чудово, якби ми могли мати одну сцену для зберігання шаблону елемента інтерфейсу та дочірні сцени для роботи над варіантами. Godot дозволяє нам це робити із спадковими сценами.

Давайте збережемо Counter і Bar, як окремі сцени , які ми будемо використовувати для створення LifeBar, EnergyBar, BombCounter і EmeraldCounter. Виберіть HBoxContainer Bar. Клацніть правою кнопкою миші та натисніть на Зберегти гілку як Сцену. Збережіть сцену під назвою Bar.tscn. Ви повинні побачити, як вся гілка перетворюється в один вузол.

Порада

Сцена - це дерево вузлів. Верхній вузол - корінь дерева , а нащадки внизу ієрархії - це листя. Будь-який вузол, крім кореня, разом із одним, або кількома нащадками - це гілка. Ми можемо інкапсулювати гілки вузлів в окремі сцени, або завантажити та об'єднати їх з інших сцен в активну. Клацніть правою кнопкою миші на будь-якому вузлі на панелі Сцена та виберіть Зберегти гілку як Сцену``або ``Merge from Scene (З'єднати зі сценою).

Потім виберіть вузол Counter і зробіть те саме. Збережіть гілку як сцену під назвою Counter.tscn. Праворуч від вузлів новостворених сцен у дереві сцени з’являється нова іконка сцени. Клацніть на одну з них поруч з Bar, щоб відкрити відповідну сцену. Змініть розмір вузла Bar так, щоб його обмежувальне поле відповідало його вмісту. Тепер, коли ми назвали і розмістили вузли управління, ми готові успадкувати цей шаблон і створити шкалу здоров'я. Те ж саме треба зробити для Counter.

../../_images/ui_gui_step_tutorial_bar_template_scene.png

Без додаткових змін наша шкала готова до використання

Використання успадкування сцен для створення решти елементів

Нам потрібні дві шкали, які працюють однаково: вони повинні містити мітку, з деяким значенням, зліва, і горизонтальний показник справа. Єдина відмінність полягає в тому, що один має мітку HP і зелений, а другий називається EP і жовтий. Godot дає нам потужний інструмент для створення шаблонів, які можна повторно використовувати для створення всіх шкал у грі: спадкові сцени.

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

Спадкові сцени допомагають нам підтримувати чистоту сцени GUI. Зрештою, у нас будуть лише контейнери та один вузол для кожного компонента інтерфейсу.

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

Поруч із властивостями, які ви перекриєте, з'явиться значок перезавантаження. Клацніть його, щоб відновити значення до стандартної сцени предка.

Примітка

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

Успадкування сцени Bar для створення LifeBar (Шкали здоров'я)

Перейдіть до Сцена -> Нова успадкована сцена до створення нового типу Bar. Виберіть сцену Bar і відкрийте її. Ви повинні побачити нову вкладку [не збережену], таку ж як ваша сцена Bar, але з усіма вузлами, крім кореня сірого кольору. Натисніть Ctrl + S`(:kbd:`Cmd + S на macOS), щоб зберегти нову успадковану сцену та назвіть її LifeBar.

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

Ви не можете перейменувати сірі вузли. Це говорить вам, що у них є батьківська сцена

Спочатку перейменуйте корінь, або вузол верхнього рівня, на LifeBar. Ми завжди хочемо, щоб назва кореня описувала зміст компоненту інтерфейсу. Назва відрізнятиме цю шкалу від EnergyBar, яку ми створимо далі. Інші вузли всередині сцени повинні описувати структуру компонента широкими термінами, тому що вони працюють з усіма успадкованими сценами. Наприклад наші вузли TextureProgress і Number.

Примітка

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

Розробка EnergyBar (Шкали енергії)

Ми вже створили LifeBar з основної сцени Bar. Тепер нам потрібна EnergyBar.

Давайте створимо нову успадковану сцену та ще раз виберемо сцену Bar.tscn і відкриємо її. Двічі клацніть на кореневому вузлі Bar та перейменуйте його на EnergyBar. Збережіть нову сцену як EnergyBar.tscn. Нам потрібно замінити текстуру HP на EP та змінити текстури на показнику.

Перейдіть до панелі Файлова система, виберіть вузол Title у дереві сцени та перетягніть файл label_EP.png в гніздо текстури. Виберіть вузол Number і змініть властивість Text на інше значення, наприклад 14.

Ви помітите, що текстура EP менша, ніж у HP. Ми повинні оновити розмір шрифту Number, щоб він краще підходив. Шрифт - це ресурс. На всі вузли у всьому проекті, які використовують цей ресурс, впливатиме будь-яка властивість, яку ми змінимо. Ви можете спробувати змінити розмір на величезне значення , наприклад 40 і повернувшись назад на LifeBar, або в сцену Bar. Ви побачите, що текст збільшився в розмірі.

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

Зміни в ресурсі шрифту вплинуть на всі вузли, які ним користуються

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

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

Використовуйте цей параметр для створення унікальних копій ресурсів для одного вузла

Порада

Коли ви дублюєте вузол з дерева сцена, з допомогою Ctrl + D (Cmd + D на macOS), оригінальний вузол ділиться своїми ресурсами з дублікатом. Вам потрібно скористатися параметром Зробити суб-ресурси унікальними, перш ніж ви зможете налаштувати ресурси дублікату, не впливаючи на оригінальний вузол.

Прокрутіть униз до розділу``Custom Font`` та відкрийте Font. Зменшіть значення Size до меншого значення, наприклад 20, або 22. Можливо, вам також знадобиться відрегулювати значення інтервалу Bottom для вирівнювання базової лінії тексту з міткою EP зліва.

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

Віджет EP Count з меншим шрифтом, ніж його аналог HP

Тепер виберіть вузол TextureProgress. Перетягніть energy_bar_bg.png файл у гніздо Under і зробіть те саме для energy_bar_fill.png та перетягніть його на гніздо текстури Progress.

Ви можете змінити розмір вузла по вертикалі, щоб його обмежувальний прямокутник відповідав показнику. Зробіть те ж саме з вузлом Count, щоб його розмір вирівнявся з розміром шкали. Оскільки мінімальний розмір TextureProgress встановлений на основі його текстур, ви не зможете зменшити розмір вузла Count менше нього. Такий же розмір буде мати контейнер Bar. Ви також можете зменшити його масштаб.

І останнє, але не менш важливе, контейнер Background має мінімальний розмір, що робить його трохи більшим. Виберіть його та в розділі Rect змініть властивість Min Size до 80 пікселів. Він повинен змінити розмір автоматично разом із вузлами Title та Number.

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Count виглядає тепер краще тому, що став трохи менший

Порада

Розмір вузла Count впливає на положення TextureProgress. Поки ми не вирівняли наші смуги вертикально, нам краще використовувати лівий край Counter для зміни розміру нашої мітки EP. Таким чином, і Count від EnergyBar, і Count від LifeBar шириною сто пікселів, тому обидва показники будуть ідеально вирівнюватися.

Підготовка лічильників бомб та смарагдів

Давайте тепер подбаємо про лічильники. Перейдіть до Сцена -> Нова успадкована сцена та виберіть Counter.tscn, як основу. Перейменуйте кореневий вузол на BombCounter. Збережіть нову сцену як BombCounter.tscn. Це все для цієї сцени.

../../_images/ui_gui_step_tutorial_design_counters_1.png

Лічильник бомб такий же, як і в оригінальній сцені Counter

Перейдіть знову до Сцена -> Нова успадкована сцена і виберіть Counter.tscn ще раз. Перейменуйте кореневий вузол на EmeraldCounter і збережіть сцену як EmeraldCounter.tscn. Тут нам потрібно замінити значок бомби на значок смарагду. З панелі Файлова система перетягніть emeralds_icon.png на гніздо Texture вузла Icon. Icon вже прив'язаний до правого краю вузла Background, ми можемо змінити його положення, і він змінить масштаб та переміститься разом з контейнером EmeraldCounter. Зсуньте значок смарагду трохи праворуч і вниз за допомогою кнопок зі стрілками на клавіатурі. Збережіть сцену. І на цьому ми закінчили з усіма елементами інтерфейсу.

../../_images/ui_gui_step_tutorial_design_counters_2.png

Лічильник смарагдів повинен виглядати приблизно так

Додавання компонентів інтерфейсу до кінцевого GUI (графічного інтерфейсу)

Час додати всі елементи інтерфейсу до основної сцени GUI. Знову відкрийте сцену GUI.tscn і видаліть вузли Bar та Counter. На панелі Файлова система знайдіть LifeBar.tscn і перетягніть його на контейнер Bars у дереві сцен. Зробіть те ж саме з EnergyBar.tscn. Вони повинні вирівнятися по вертикалі.

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBar та EnergyBar автоматично вирівнюються

Тепер перетягніть сцени BombCounter.tscn і EmeraldCounter.tscn на вузол Counters. Вони автоматично змінять розмір.

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

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

Щоб дозволити EmeraldCounter та BombCounter використовувати розмір, визначений нами в Counter.tscn, нам потрібно змінити Size Flags у контейнері Counters. Виберіть вузол Counters і розгорніть розділ Size Flags в Інспекторі. Зніміть прапорець Fill для властивості Vertical та встановіть Shrink Center, щоб контейнер знаходиться в центрі .

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

Тепер обидва лічильники мають правильний розмір

Порада

Змініть властивість Min Size контейнера Counters, щоб контролювати висоту фону лічильників.

У нас залишилася одна невелика проблема з міткою EP на EnergyBar: 2 шкали повинні розташовуватися вертикально. Клацніть піктограму сцени поруч із вузлом EnergyBar, щоб відкрити його сцену. Виберіть Count вузол і прокрутіть вниз до розділу Custom Constants. Там змініть Margin Left на 20. У розділі Rect встановіть Min Size вузла назад на 100, те саме значення, що і в LifeBar. Тепер Count має деякий відступ зліва. Якщо ви збережете сцену та повернетесь до сцени GUI, він буде вирівняний вертикально з LifeBar.

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

2 шкали ідеально вирівнюються

Примітка

Ми могли так налаштувати EnergyBar раніше. Але тепер ви знаєте, що можете будь-коли повернутися до будь-якої сцени, налаштувати її та побачити, як зміни вплинуть на увесь проект!

Розміщення графічного інтерфейсу на макеті гри

На завершення уроку, ми вставимо графічний інтерфейс в макет гри.

Перейдіть на панель Файлова система та відкрийте LevelMockup.tscn.

Перетягніть сцену GUI.tscn прямо під вузол bg, але вище Characters. Графічний інтерфейс буде масштабуватись, щоб відповідати всій області перегляду. Перейдіть до меню Макет і виберіть варіант За центром згори, щоб він прив'язався до верхнього краю вікна гри. Потім змініть розмір GUI, щоб зробити його якомога меншим по вертикалі. Тепер ви можете побачити, як виглядає інтерфейс у контексті гри.

Вітаємо з завершенням цього довгого уроку. Ви можете знайти готовий проект тут:ui_gui_design.zip <files/ui_gui_design.zip>.

../../_images/ui_gui_design_final_result.png

Кінцевий результат

Примітка

Заключна примітка про чутливий дизайн. Якщо змінити розмір графічного інтерфейсу, ви побачите, що вузли рухаються, але текстури та текст не будуть масштабуватися. GUI також має мінімальний розмір, виходячи з текстур всередині нього. В іграх нам не потрібно, щоб інтерфейс був настільки гнучким, як веб-сайт. Ви майже ніколи не будете підтримувати орієнтацію екрану як ландшафтну, так і портретну. Це те й інше. У ландшафтній орієнтації найпоширеніші співвідношення коливаються від 4: 3 до 16: 9. Вони близькі один одному. Ось чому для елементів графічного інтерфейсу досить переміщатися горизонтально лише тоді, коли ми змінюємо розмір вікна.