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

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

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

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

Вы научитесь разрабатывать UI эффективно, а так же использовать узлы Control 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

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

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

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

  2. Если пользовательский интерфейс не заработает должным образом, придется переделывать часть спрайтов.

Совет

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

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

  1. Создать интерфейс в одной сцене и позже сохранить некоторые его части в отдельные сцены для многоразового использования.

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

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

../../_images/ui_main_menu_placeholder_assets.png

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

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

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

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

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

  1. Разбейте пользовательский интерфейс на вложенные контейнеры, от большого, в котором содержится всё, до маленького, содержащего один виджет, например с полоской состояния и ее названием, панелью или кнопкой.

  2. Если вокруг области есть какие-то отступы, используйте MarginContainer.

  3. Если элементы расположены в строках или столбцах, используйте HBoxContainer или VBoxContainer.

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

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

../../_images/ui_mockup_break_down.png

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

Совет

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

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

Примечание

Это руководство основано на размере окна 1366 × 768. Чтобы изменить размер базового окна проекта, откройте Проект > Нстройки проекта в верхней части редактора, затем измените Display > Window > Size > Width на 1366 и Display > Window > Size > Height на 768.

Если вы забудете изменить размер окна, якоря и контейнеры могут вести себя не так, как ожидалось.

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

Мы должны добавить корневой узел, прежде чем мы сможем сохранить сцену. Корневой элемент UI должен быть самым внешним контейнером или элементом. В данном случае это MarginContainer. MarginContainer является хорошей отправной точкой для большинства интерфейсов, так как часто требуется заполнение вокруг UI. Нажмите Ctrl + S (Cmd + S на macOS), чтобы сохранить сцену на диск. Назовите её MainMenu.

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

  • Margin Right: 120

  • Margin Top: 80

  • Margin Left: 120

  • Margin Bottom: 80

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

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

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

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

  2. три варианта текста, как отдельные узлы,

  3. информация о версии,

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

Нажмите кнопку Добавить узел (Add Node) или нажмите 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.

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

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

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

../../_images/ui_main_menu_containers_step_1.png

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

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

../../_images/ui_main_menu_containers_step_2.png

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

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

  1. Картинка справа не центрирована.

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

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

../../_images/ui_main_menu_containers_step_3.png

Картинка будет центрирована в правой половине экрана, как только вы поместите её внутрь CenterContainer.

Для разметки пунктов меню и логотипа слева мы будем использовать один последний контейнер и флаги его размеров. Выберите 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, свойство Separation становится активным и Godot добавляет 30 пикселей между MenuOptions.

../../_images/ui_main_menu_design_final_result.png

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

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

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

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

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

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

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

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