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

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

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

Вы научитесь разрабатывать UI эффективно, а так же использовать «Узлы управления Godot». Эта страница фокусируется на визуальной части: все что вы можете сделать с помощью редактора. Для того, чтобы научиться писать код для шкалы здоровья, читайте Управление игровым интерфейсом из кода

../../_images/ui_main_menu_design_final_result.png

Графический интерфейс, который вы будете создавать

Загрузите файлы проекта: ui_main_menu_design.zip и распакуйте полученный архив. Импортируйте проект start/` в Godot чтобы продолжить изучение этого руководства. Каталог ``end/ содержит результат этого примера. Вы найдете все спрайты в каталоге start/assets/main_menu.

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

Для проектирования хорошего пользовательского интерфейса следует начать с наброска: начните с бумажной версии и сфокусируйтесь на размещении компонентов пользовательского интерфейса, их размерах и взаимодействии с игроком. Не тратьте время на создание финального варианта графики на этом этапе. Далее подготовьте спрайты-заглушки и разместите из в Godot. Вы должны убедиться в том, что разработанный интерфейс удобен и понятен даже в таком виде.

../../_images/ui_design_rough.png

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

Заполнители не должны быть уродливыми, но вам следует стараться использовать простую графику для них. Избегайте специальных эффектов, анимаций и излишне детализированных иллюстраций до тех пор, пока ваш UI не используется игроками. В противном случае:

  1. Слишком сильный упор на графику на этой стадии может исказить восприятие тестерами вашего интерфейса и вы лишитесь ценных отзывов
  2. Если пользовательский интерфейс работает не должным образом, переделайте часть спрайтов-заглушек

Совет

Всегда старайтесь в начале сделать интерфейс рабочим с простым текстом и графикой. Вы всегда сможете изменить текстуры. Профессиональные UX-дизайнеры используют в работе простые контуры и серые тона. Отказавшись от красивой графики и ярких цветов на этом этапе вам будет гораздо проще подобрать размеры и разместить элементы интерфейса.

Существует два способа проектирования пользовательского интерфейса в Godot. Вы можете:

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

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

../../_images/ui_main_menu_placeholder_assets.png

Графика выглядит лучше, чем в грубом дизайне, но является еще незавершенной

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

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

Краш-тест UI макета

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

  1. Разбейте пользовательский интерфейс на вложенные контейнеры, от большого, в котором содержится все, до маленького, содержащего один виджет с полоской состояния и ее названием, панелью или кнопкой
  2. Если есть некоторые отступы вокруг участка, используйте MarginContainer
  3. Если элементы, расположены в строках или столбцах, используйте HBoxContainer или VBoxContainer

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

Главное меню, это крупнейшее окно всей игры. Есть отступы между краями окна и первого элемента: это должен быть MarginContainer. Затем, экран разделяется на две колонки, так что мы будем использовать HBoxContainer. В левой колонке мы будем управлять строками с помощью VBoxContainer. И в правой колонке будет иллюстрация в центре CenterContainer.

../../_images/ui_mockup_break_down.png

Блоки интерфейса разбиты с помощью трёх правил

Совет

Контейнеры адаптируются к разрешению окна и соотношению ширины к высоте. Хотя мы могли бы разместить элементы 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 toolbar above the Viewport, open the Layout menu and select the last option, Full Rect.

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

Выберите``MarginContainer`` и создайте узел TextureRect. Нам нужно:

  1. Название или логотип
  2. Три варианта текста, как отдельные узлы
  3. Информация о версии
  4. И иллюстрация главного меню

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

Щелкните на каждый из узлов, чтобы выбрать его. В инспекторе щелкните значок Texture справа от свойства Texture и выберите Load. Откроется проводник, который позволяет выбрать спрайт для загрузки в слот текстуры.

../../_images/ui_texturerect_load_texture.png

Файловый проводник позволяет находить и загружать текстуры

Repeat the operation for all TextureRect nodes. You should have the logo, the illustration, the three menu options and the version note, each as a separate node. Then, double click on each of the nodes in the Scene tab to rename them. Nothing has been placed in containers yet so this should look messy.

../../_images/ui_main_menu_6_texturerect_nodes.png

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

Примечание

Если вы хотите добавить возможность локализации вашей игры, используйте Labels для опций меню вместо TextureRect.

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

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

Выберите MarginContainer и добавьте HBoxContainer. Затем, нам нужны два контейнера, как дети нашего HBoxContainer: VBoxContainer для опций меню слева, и CenterContainer для картинки справа.

../../_images/ui_main_menu_containers_step_1.png

Вы должны иметь четыре вложенных контейнеров и TextureRect узлы, находящиеся вне.

В дереве узлов выберите все узлы TextureRect, которые должны идти с левой стороны: логотип, параметры и информация о версии. Перетащите их в VBoxContainer. Затем перетащите узел с картинкой в CenterContainer. Узлы должны позиционироваться автоматически.

../../_images/ui_main_menu_containers_step_2.png

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

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

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

Чтобы центрировать картинку справа, мы будем использовать CenterContainer. Добавьте узел CenterContainer в качестве дочернего элемента HBoxContainer. Затем в инспекторе, прокрутите вниз до Size Flags и нажмите на поле справа от Vertical свойства, и выбрать Expand. Сделайте то же самое для свойства Horizontal. Наконец перетащить картинку в CenterContainer. Картинка будет центрирована автоматически.

../../_images/ui_main_menu_containers_step_3.png

Узел character будет центрирован в правой половине экрана, как только вы поместите его внутрь CenterContainer

Чтобы добавить пространство между меню и логотипом слева, мы будем использовать один последний контейнер и его флаги размера(size flags). Выберите VBoxContainer и нажмите Ctrl+A, чтобы добавить в него новый узел. Добавьте второй VBoxContainer и назовите его «MenuOptions». Выберите все три варианта меню, Continue, NewGame и``Options``, и перетащите их в новый VBoxContainer. Макет UI должен едва измениться, если вообще изменится.

../../_images/ui_main_menu_containers_step_4.png

Поместите новый контейнер между двумя другими узлами

Теперь мы сгруппировали варианты меню вместе, мы можем сказать их контейнерам расшириться как можно больше вертикально. Выберите узел MenuOptions. В инспекторе прокрутите вниз до категории Size Flags. Нажмите на поле справа от свойства Vertical и установите флажок Expand. Контейнер расширится, чтобы взять все доступное вертикальное пространство. Но он уважает своих соседей, Logo и``Version``.

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

../../_images/ui_main_menu_containers_step_5.png

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

Чтобы отодвинуть их друг от друга, давайте добавим некоторое разделение между параметрами меню. Разверните категорию Custom Constants``которая ниже ``Size Flags и щелкните на поле рядом с параметром Separation. Установите его на 30. После нажатия клавиши Enter, свойство Separation становится активным и Godot добавляет 30 пикселей между MenuOptions.

../../_images/ui_main_menu_design_final_result.png

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

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

Поздравляем с завершением! Вы можете скачать final menu, чтобы сравнить с вашим собственным. В следующем курсе уроков вы создадите UI игры с шкалами и инвентарем.

Краш-тест UI макета

Гибкий пользовательский интерфейс - это способ сделать так, чтобы наши UI элементы менялись в зависимости от разных экранов. Экраны TV и компьютерных дисплеев имеют различные размеры и соотношения. В Godot мы используем контейнеры для управления позицией и размера элемента UI.

Порядок, в котором вы разберёте вопросы. Чтобы убедиться, что UI хорошо адаптируется к разным соотношениям экрана, выберите корневой узел, нажмите клавишу Q, чтобы активировать «Режим Выделения». Выберите контейнер, нажмите и перетащите один из углов контейнера, чтобы изменить его размер. Компоненты UI должны «течь» внутри него.

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

Вы можете изменить режим масштабирования в настройках проекта: выберите меню Проект-> Параметры проекта. В левом столбце найдите категорию Display. Нажмите на подкатегорию Window. В правой части окна вы найдете раздел Stretch. Три параметра, Mode, Aspect и Shrink управляют размером экрана. Для получения дополнительной информации см.: Multiple resolutions.