Дизайн начального экрана

В следующих двух уроках мы шаг за шагом разберем как создать адаптивный пользовательский интерфейс:

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

You will learn how to design game UIs efficiently, and how to use Godot’s Control nodes. This page focuses on the visual part: everything you do from the editor. To learn how to code a life bar, read Управление игровым интерфейсом из кода

../../_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.

Как разработать UI для вашей игры

To design a good UI, you want to come up with a rough mockup first: a plain drawing version that focuses on the placement of your UI components, their size, and user interaction. Pen and paper is all you need. You shouldn’t use fancy and final graphics at this stage. Then, you only need simple placeholder sprites and you’re good to jump into Godot. You want to make sure the players can find their way around the interface using those placeholders.

../../_images/ui_design_rough.png

Примерный план или макет UI

Placeholder doesn’t have to mean ugly, but you should keep the graphics simple and clean. Avoid special effects, animation, and detailed illustration before you have players playtest your UI. Otherwise:

  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. Создать интерфейс в одной сцене и сохранить некоторые его части в отдельные сцены для многоразового использования
  2. Собрать шаблоны из базовых элементов и создавать определенные компоненты, использую как основу базовые сцены

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

../../_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

Проектирование главного меню

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

Break down the UI mockup

Это мои три правила большого пальца, чтобы подобрать правильный контейнер:

  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. Если есть некоторые отступы вокруг участка, используйте MarginContainer
  3. Если элементы, расположены в строках или столбцах, используйте HBoxContainer или VBoxContainer

Этих правил достаточно, чтобы начать, и хорошо работать с простыми интерфейсами.

For the main menu, the largest box is the entire game window. There’s padding between the edges of the window and the first components: this should be a MarginContainer. Then, the screen is split into two columns, so we’ll use an HBoxContainer. In the left column, we’ll manage the rows with a VBoxContainer. And in the right column, we’ll center the illustration with a CenterContainer.

../../_images/ui_mockup_break_down.png

Interface building blocks, broken down using the three rules of thumb

Совет

Контейнеры адаптируются к разрешению окна и соотношению ширины к высоте. Хотя мы могли бы разместить элементы UI вручную, но использование контейнеров быстрее, точнее и отзывчивее(responsive).

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

Создадим главное меню. Мы построим его в одной сцене. Чтобы создать пустую сцену, нажмите на меню Сцена-> Новая Сцена.

Мы должны добавить корневой узел, прежде чем мы сможем сохранить сцену. Корневой элемент UI должен быть самым внешним контейнером или элементом. В данном случае это MarginContainer. MarginContainer является хорошей отправной точкой для большинства интерфейсов, так как часто требуется заполнение вокруг UI. Нажмите Meta+S, чтобы сохранить сцену на диск. Назовите его ГлавноеМеню.

Снова выберите MarginContainer и переходите в инспектор, чтобы определить размер полей. Прокрутите вниз класс Control, в раздел Custom Constants. Разверните её. Установите такие отступы:

  • Margin Right: 120
  • Margin Top: 80
  • Margin Left: 120
  • Margin Bottom: 80

We want the container to fit the window. In the Viewport, open the Layout menu and select the last option, Full Rect.

Добавление спрайтов

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

  1. Название или логотип
  2. The three text options, as individual nodes
  3. The version note
  4. И иллюстрация главного меню

Нажмите кнопку Добавить узел или нажмите Ctrl+A на клавиатуре. Начните вводить TextureRect, чтобы найти соответствующий узел, и нажмите Enter. Выбрав новый узел, нажмите Ctrl+D пять раз, чтобы создать пять дополнительных экземпляров TextureRect.

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

Шесть узлов с загруженными текстурами

Примечание

If you want to support localization in your game, use Labels for menu options instead of TextureRect.

Добавление контейнеров для автоматического размещения элементов UI

Наше главное меню имеет некоторые отступы по краям экрана. Они делятся на две части: слева, у вас логотип и меню. Справа - персонажи. Мы можем использовать один из двух контейнеров для достижения этого: HSplitContainer или HBoxContainer. Сплит-контейнеры разделяют область на две части: левую и правую или верхнюю и нижнюю стороны. Они также позволяют пользователю изменять размер левой и правой областей с помощью интерактивной шкалой. С другой стороны, HBoxContainer просто разделяется на столько столбцов, сколько у него есть детей. Хотя вы можете отключить изменение размера контейнера, я рекомендую использовать контейнеры для контейнеров.

Выберите 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

In the node tree, select all the TextureRect nodes that should go on the left side: the logo, the menu options and the version note. Drag and drop them into the VBoxContainer. The nodes should position automatically.

../../_images/ui_main_menu_containers_step_2.png

Контейнеры автоматически размещает и изменяет размер текстур

Нам осталось решить две проблемы:

  1. Картинка справа не центрирована
  2. Между логотипом и другими элементами UI нет места

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

The character node centers inside the right half of the screen as soon as you place it inside the 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

Place the new container between the other two nodes to retain the UI’s layout

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. But it respects its neighbors, the Logo and Version elements.

Чтобы центрировать узлы в VBoxContainer`, прокрутите до верхней части инспектора и измените свойство Alignment на Center.

../../_images/ui_main_menu_containers_step_5.png

MenuOption должен центрироваться по вертикали в левом столбце

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

Финальный интерфейс

Без единой строки кода у нас есть точное и отзывчивое главное меню.

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

A responsive User Interface is all about making sure our UIs scale well on all screen types. TV screens and computer displays have different sizes and ratios. In Godot, we use containers to control the position and the size of UI elements.

The order in which you nest matters. To see if your UI adapts nicely to different screen ratios, select the root node, press the Q key 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 the Project menu -> Project Settings. 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.