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

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

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

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

../../_images/ui_main_menu_design_final_result.png

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

Download the project files: ui_main_menu_design.zip and extract the archive. Import the start/ project in Godot to follow this tutorial. The end/ folder contains the final result. You’ll find all the sprites in the start/assets/main_menu folder.

Примітка

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

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

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

../../_images/ui_design_rough.png

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

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

  1. The graphics might skew the players“ perception of the experience and you’ll miss out on valuable feedback.
  2. If the User Experience doesn’t work, you’ll have to redo some sprites.

Порада

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

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

  1. Build it all in a single scene, and eventually save some branches as reusable scenes.
  2. Build template scenes for reusable components and create specific components that inherit from your base scenes.

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

../../_images/ui_main_menu_placeholder_assets.png

The files you’ll find in Godot. The graphics look cleaner than on the rough design, but they’re still placeholders.

Design the main menu

Before we jump into the editor, we want to plan how we’ll nest containers based on our mockup image.

Break down the UI mockup

Here are my three rules of thumb to find the right containers:

  1. Break down the UI into nested boxes, from the largest that contains everything, to the smallest ones, that encompass one widget, like a bar with its label, a panel or a button.
  2. If there’s some padding around an area, use a MarginContainer.
  3. If the elements are arranged in rows or columns, use an HBoxContainer or VBoxContainer.

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

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

../../_images/ui_mockup_break_down.png

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

Порада

Containers adapt to the window’s resolution and width-to-height ratio. Although we could place UI elements by hand, containers are faster, more precise, and responsive.

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

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

We have to add a root node before we can save the scene. Your UI’s root should be the outermost container or element. In this case it’s a MarginContainer. MarginContainer is a good starting point for most interfaces, as you often need padding around the UI. Press Meta + S to save the scene to the disk. Name it MainMenu.

Select the MarginContainer again, and head to the inspector to define the margins“ size. Scroll down the Control class, to the Custom Constants section. Unfold it. Set the margins as such:

  • Margin Right (Поле справа): 120
  • Margin Top (Поле зверху): 80
  • Margin Left (Поле зліва): 120
  • Margin Bottom (Поле знизу): 80

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

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

Select the MarginContainer, and create the UI elements as TextureRect nodes. We need:

  1. назва і логотип,
  2. три варіанти тексту в якості окремих вузлів,
  3. інформація про версію,
  4. і ілюстрація головного меню.

Click the Add Node button or press Meta + A on your keyboard. Start to type TextureRect to find the corresponding node and press enter. With the new node selected, press Meta + D five times to create five extra TextureRect instances.

Click each of the nodes to select it. In the inspector, find the Texture property and click [empty] > Load. A file browser opens and lets you pick a sprite to load into the texture slot.

../../_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 behaviour, I recommend to favour box containers.

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

../../_images/ui_main_menu_containers_step_1.png

You should have four nested containers and the TextureRect nodes sitting aside from it.

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

../../_images/ui_main_menu_containers_step_2.png

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

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

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

To center the characters on the right, first select the CenterContainer. Then in the Inspector, scroll down to the Size Flags category and click on the field to the right of the Vertical property, and check Expand in addition to Fill. Do the same for the Horizontal property. This makes the CenterContainer expand into all available space while respecting its neighbour VBoxContainer. Finally, drag and drop the Characters node into the CenterContainer. The Characters element will center automatically.

../../_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 Meta + A 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.

Break down the UI mockup

Чутливий користувацький інтерфейс означає, що наші інтерфейси масштабуються під всі типи екранів. Екрани телевізорів та екрани комп’ютера мають різні розміри та співвідношення. У 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.