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

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

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

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

../../_images/ui_main_menu_design_final_result.png

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

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

Примітка

Прочитайте спочатку Design interfaces with the Control nodes, щоб дізнатися, як працює система користувацького інтерфейсу 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

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

Порада

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

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

Примітка

This tutorial is based on a window size of 1366×768. To change the project's base window size, open Project > Project Settings at the top of the editor then change Display > Window > Size > Width to 1366 and Display > Window > Size > Height to 768.

If you forget to change the window size, anchors and containers may not behave as expected.

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

Ми повинні додати кореневий вузол, перш ніж зможемо зберегти сцену. Кореневий вузол вашого інтерфейсу повинен бути самим зовнішнім контейнером, або елементом. В даному випадку це 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.

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

Наше головне меню має деякі поля по краях екрана. Воно розділене на дві частини: зліва ви маєте логотип та параметри меню. Праворуч у вас є ілюстрація. Для поділу ми можемо використовувати один з двох контейнерів: HSplitContainer, або HBoxContainer. Ці контейнери ділять область на дві: ліву і праву, або верхню і нижню сторони. Вони також дозволяють користувачеві змінювати розмір лівої та правої областей за допомогою інтерактивної шкали. З іншого боку, HBoxContainer просто розділяється на стільки колонок, скільки має нащадків. Хоча ви можете дезактивувати можливість зміни розміру Split контейнера, я рекомендую надавати перевагу box контейнерам.

Виберіть 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.

To space out the menu options and the logo on the left, we'll use one final container and its size flags. Select the VBoxContainer and press Ctrl + A (Cmd + A on macOS) to add a new node inside it. Add a second VBoxContainer and name it MenuOptions. Select all three menu options, Continue, NewGame and Options, and drag and drop them inside the new VBoxContainer. The UI's layout should barely change, if at all.

../../_images/ui_main_menu_containers_step_4.png

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

Now we grouped the menu options together, we can tell their container to expand to take as much vertical space as possible. Select the MenuOptions node. In the Inspector, scroll down to the Size Flags category. Click on the field to the right of the Vertical property, and check Expand in addition to Fill. The container expands to take all the available vertical space while respecting its neighbors, the Logo and Version elements.

To center the nodes in the VBoxContainer, scroll to the top of the Inspector and change the Alignment property to Center.

../../_images/ui_main_menu_containers_step_5.png

The menu options should center vertically in the UI's left column.

To wrap things up, let's add some separation between the menu options. Expand the Custom Constants category below Size Flags, and click the field next to the Separation parameter. Set it to 30. Once you press enter, the Separation property becomes active and Godot adds 30 pixels between menu options.

../../_images/ui_main_menu_design_final_result.png

The final interface.

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

Congratulations for getting there! You can download the final menu ui_main_menu_design.zip to compare with your own. In the next tutorial, you'll create a Game User Interface with bars and item counters.

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

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

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press Q to activate the Select Mode, select the container and click and drag on one of the container's corners to resize it. The UI components should flow inside of it.

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

You can change the scale mode in the project settings: click Project > Project Settings in the top menu. In the window's left column, look for the Display category. Click on the Window sub-category. On the right side of the window, you'll find a Stretch section. The three settings, Mode, Aspect, and Shrink, control the screen size. For more information, see Multiple resolutions.