Дизайн титульного екрана

У наступних двох уроках ви поетапно побудуєте дві чутливі сцени інтерфейсу, використовуючи систему інтерфейсу двигуна:

  1. Головне меню.

  2. Ігровий інтерфейс із шкалою здоров'я, енергії, лічильниками бомб та грошей.

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

../../_images/ui_main_menu_design_final_result.png

Графічний інтерфейс, який ви будете створювати.

Завантажте файли проєкту: ui_main_menu_design.zip і витягніть архів. Імпортуйте проєкт start/ у Godot, щоб виконати цей урок. end/ містить кінцевий результат. В теці start/assets/main_menu ви знайдете всі спрайти.

Примітка

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

Як розробляти свій ігровий інтерфейс

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

../../_images/ui_design_rough.png

Приблизний план або макет інтерфейсу

Заповнювачі не повинні бути негарними, але ви повинні підтримувати графіку простою та чистою. Уникайте спеціальних ефектів, анімації та детальних ілюстрацій, перш ніж гравці почнуть використовувати ваш інтерфейс. Інакше:

  1. Графіка може викривити у гравців сприйняття гри, і ви втратите позитивні відгуки.

  2. Якщо інтерфейс не працює належним чином, вам доведеться переробити деякі спрайти.

Порада

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

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

  1. Створити все в одній сцені, а згодом зберегти деякі її гілки, як окремі сцени, для багаторазового використання.

  2. Побудувати шаблони сцен для багаторазових компонентів та створити конкретні компоненти на основі цих шаблонів.

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

../../_images/ui_main_menu_placeholder_assets.png

Файли, які ви знайдете в Godot. Графіка виглядає краще, ніж на чернетці, але все ще потребує вдосконалення.

Проєктування головного меню

Перш ніж зайти в редактор, слід, на основі нашого макета, спланувати, як вкладати контейнери.

Розбивання макета інтерфейсу

Ось три правила, завдяки яким я підбираю правильні контейнери:

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

  2. Якщо навколо області є якийсь простір, використовуйте MarginContainer.

  3. Якщо елементи розташовані в рядках, або стовпцях, використовуйте HBoxContainer, або VBoxContainer.

Цих правил достатньо, щоб почати і успішно працювати з простими інтерфейсами.

В головному меню найбільшим полем є все вікно гри. Між краями вікна та першими компонентами є відступи: це має бути a MarginContainer. Потім екран розбивається на два стовпці, тому ми будемо використовувати HBoxContainer. У лівому стовпці ми будемо керувати рядками з допомогою VBoxContainer. І в правому стовпці ми будемо центрувати ілюстрацію з допомогою CenterContainer.

../../_images/ui_mockup_break_down.png

Інтерфейсні блоки, розбиті за допомогою трьох правил.

Порада

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

Підготовка сцени головного меню

Примітка

Цей урок базується на розмірі вікна 1366×768. Щоб змінити базовий розмір вікна проекта, відкрийте Проект > Налаштування проекта в верхній частині редактора і змініть Display > Window > Size > Width на 1366 і Display > Window > Size > Height на 768.

Якщо ви забудете змінити розмір вікна, прив'язки, чи контейнери можуть повести себе не так, як очікувалося.

Створимо головне меню. Ми побудуємо його в одній сцені. Щоб створити порожню сцену, натисніть Сцена> Нова сцена.

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

Виберіть MarginContainer ще раз і перейдіть до інспектора, щоб визначити розмір полів (відступів). Прокрутіть клас Control вниз до розділу Custom Constants. Розгорніть його. Встановіть поля:

  • Margin Right (Поле справа): 120

  • Margin Top (Поле зверху): 80

  • Margin Left (Поле зліва): 120

  • Margin Bottom (Поле знизу): 80

Ми хочемо, щоб контейнер помістився у вікно. На панелі інструментів над вікном перегляду відкрийте меню Макет ** та виберіть останній варіант **Увесь прямокутник.

Додавання спрайтів до інтерфейсу

Виберіть MarginContainer, і створіть такі вузли інтерфейсу як TextureRect. Нам потрібні:

  1. назва і логотип,

  2. три варіанти тексту в якості окремих вузлів,

  3. інформація про версію,

  4. і ілюстрація головного меню.

Натисніть кнопку Додати вузол, або натисніть Ctrl+A (Cmd + A на macOS) на клавіатурі. Почніть вводити, TextureRect, щоб знайти відповідний вузол, і натисніть клавішу Enter. Вибравши новий вузол, натисніть Ctrl+D (Cmd + D на macOS) п'ять раз, щоб створити п'ять додаткових екземплярів TextureRect.

Клацніть кожен з вузлів, щоб вибрати його. У інспекторі знайдіть властивість Texture та натисніть [порожньо]> Завантажити. Відкриється браузер файлів і дозволить вибрати спрайт для встановлення текстури.

../../_images/ui_texturerect_load_texture.png

Браузер файлів дозволяє знаходити та завантажувати текстури.

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

../../_images/ui_main_menu_6_texturerect_nodes.png

Шість вузлів із завантаженими текстурами.

Примітка

Якщо ви хочете підтримати локалізацію гри, використовуйте Labels для параметрів меню замість TextureRect.

Додавання контейнерів для автоматичного розміщення елементів інтерфейсу

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, it's recommended to favor box containers.

Виберіть MarginContainer і додайте HBoxContainer. Далі нам потрібні два контейнери, які будуть нащадками HBoxContainer: VBoxContainer для параметрів меню зліва та CenterContainer для ілюстрації праворуч.

../../_images/ui_main_menu_containers_step_1.png

У вас повинно бути чотири вкладених контейнери та вузли TextureRect, поруч.

У дереві вузлів виберіть усі TextureRect вузли, які мають бути з лівого боку: логотип, параметри меню (Continue, NewGame, Options) та примітку до версії. Перетягніть їх у VBoxContainer. Вузли повинні розташовуватися автоматично.

../../_images/ui_main_menu_containers_step_2.png

Контейнери автоматично розміщують і змінюють розмір текстур

У нас залишаються дві проблеми:

  1. Ілюстрація праворуч не по центру.

  2. Між логотипом та іншими елементами інтерфейсу немає місця.

Для центрування ілюстрації праворуч спочатку виберіть значок CenterContainer. Потім у Інспекторі прокрутіть униз до категорії Size Flags, натисніть на поле праворуч від властивості Vertical та поставте прапорець Expand на додаток до Fill. Зробіть те саме для властивості Horizontal. Це змушує CenterContainer розширюватися на весь доступний простір, поважаючи свого сусіда VBoxContainer. Нарешті, перетягніть вузол ілюстрації у CenterContainer. Елемент Characters буде централізовано автоматично.

../../_images/ui_main_menu_containers_step_3.png

Вузол з картинкою центрований в правій половині екрана після розміщення всередині CenterContainer.

Щоб додати простору між меню і логотипом, ми використаємо ще один контейнер VBoxContainer і його прапорці розмірів (Size Flags). Виберіть VBoxContainer і натисніть Ctrl+A (Cmd + A на macOS), щоб додати в нього новий вузол. Додайте другий VBoxContainer та назвіть його MenuOptions. Виберіть усі три параметри меню Continue, NewGame і Options та перетягніть їх всередину нового VBoxContainer. Макет інтерфейсу повинен ледь змінитися, якщо він взагалі зміниться.

../../_images/ui_main_menu_containers_step_4.png

Помістіть новий контейнер між іншими двома вузлами, щоб зберегти макет інтерфейсу користувача.

Тепер, коли ми згрупували параметри меню разом, ми можемо змусити їх контейнер розширитись, щоб зайняти якомога більше вертикального простору. Виберіть вузол MenuOptions. У Інспекторі прогорніть униз до розділу Size Flags. Клацніть на полі праворуч від властивості Vertical і встановіть галочку Expand на додаток до Fill. Контейнер розширюється, щоб зайняти весь доступний вертикальний простір, поважаючи своїх сусідів, елементи Logo та Version.

Щоб центрувати вузли у VBoxContainer, прогорніть до вершини Інспектора та змініть властивість Alignment (Вирівнювання) на Center.

../../_images/ui_main_menu_containers_step_5.png

Параметри меню повинні розташовуватися по центрі вертикалі в лівій колонці інтерфейсу користувача.

На завершення додамо відступи між параметрами меню. Розкрийте категорію Custom Constants під Size Flags та натисніть поле поруч із параметром Separation. Встановіть його на 30. Після натискання клавіші Enter, властивість розділення стане активною, і Godot додасть 30 пікселів між параметрами меню.

../../_images/ui_main_menu_design_final_result.png

Кінцевий інтерфейс.

Без єдиного рядка коду ми маємо точне та чутливе головне меню.

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

Розбивання макета інтерфейсу

Чутливий користувацький інтерфейс означає, що наші інтерфейси масштабуються під всі типи екранів. Екрани телевізорів та екрани комп'ютера мають різні розміри та співвідношення. У Godot ми використовуємо контейнери для контролю положення та розміру елементів інтерфейсу.

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

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

Ви можете змінити режим масштабування у параметрах проекту: натисніть Проект> Параметри проекту у верхньому меню. У лівій колонці вікна шукайте розділ Display ("Відображення"). Клацніть на підрозділ Window. У правій частині вікна ви знайдете розділ Stretch (Розтягування). Три налаштування Mode (Режим), Aspect (Аспект), і Shrink (Зменшення), керують розміром екрана. Для отримання додаткової інформації дивіться Multiple resolutions.