Дизайн интерфейса с помощью узлов Control

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

../../_images/godot_editor_ui.png

Редактор Godot создан при помощи собственных средств редактирования UI (пользовательского интерфейса)

Это руководство поможет вам начать разработку UI. Вы узнаете:

  • Пять наиболее полезных узлов для создания ваших игровых интерфейсов

  • Как работать с якорями элементов UI

  • Как эффективно разместить и упорядочить ваш пользовательский интерфейс с помощью контейнеров

  • Пять наиболее распространенных контейнеров (узнать о контейнерах больше вы сможете на странице документации GUI Контейнеры).

Чтобы изучить, как управлять интерфейсом и подключать его к другим скриптам, прочтите Создание пользовательского интерфейса своей первой игры в Godot.

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

Узлы Control имеют уникальные свойства, позволяющие им хорошо взаимодействовать друг с другом. Другие визуальные узлы, такие как Node2D и Sprite, не имеют таких возможностей. Поэтому, чтобы облегчить себе жизнь при создании своих пользовательских интерфейсов, используйте узлы Control везде, где это возможно.

Все узлы контроля имеют одни и те же основные свойства:

  1. Якорь (Anchor)

  2. Ограничительный прямоугольник (Rect)

  3. Фокус и фокус соседей (Focus)

  4. Флаги размера (Size Flags)

  5. Отступ (Margin)

  6. Настраиваемая тема пользовательского интерфейса (Theme)

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

Пять наиболее распространенных элементов UI

Godot поставляется с десятками узлов Control. Многие из них нужны для помощи в создании плагинов и приложений редактора.

Для большинства игр вам понадобится всего пять типов элементов UI и несколько Контейнеров. Вот пять узлов Control:

  1. Label: для отображения текста

  2. TextureRect: используется в основном для заднего плана или всего, что должно быть статическим изображением

  3. TextureProgress: для полос здоровья, загрузки, горизонтальных, вертикальных или радиальных

  4. NinePatchRect: для масштабируемых панелей

  5. TextureButton: для создания кнопок

../../_images/five_most_common_nodes.png

Пять наиболее распространенных узлов Control для дизайна UI

TextureRect

TextureRect отображает текстуру или изображение внутри пользовательского интерфейса. Он похож на узел Sprite, но предлагает несколько режимов масштабирования. Настройте свойство Stretch Mode, чтобы изменить его поведение:

  • Scale On Expand (Compat) масштабирует текстуру в соответствии с ограничивающим прямоугольником узла, только если свойство expand имеет значение true; в противном случае оно ведет себя, как в режиме Keep. Режим по умолчанию для обратной совместимости.

  • Scale масштабирует текстуру в соответствии с ограничивающим прямоугольником узла.

  • Tile повторяет текстуру, но не масштабирует.

  • Keep и Keep Centered заставляют текстуру оставаться в исходном размере в левом верхнем углу или в центре кадра соответственно.

  • Keep Aspect и Keep Aspect Centered масштабируют текстуру, но заставляют ее сохранять исходное соотношение сторон в левом верхнем углу или в центре кадра соответственно.

  • Keep Aspect Covered работает так же, как Keep Aspect Centered, но более короткая сторона совпадает с ограничивающим прямоугольником, а другая отсекается границами узла.

Как и в случае с узлами Sprite, вы можете модулировать цвет TextureRect. Щелкните свойство Modulate и используйте средство выбора цвета.

../../_images/five_common_nodes_textureframe.png

TextureRect модулирован красным цветом

TextureButton

TextureButton похож на TextureRect, за исключением того, что он имеет 6 слотов для текстур: по одному для каждого состояния кнопки. В большинстве случаев вы будете использовать текстуры Normal (нормальное состояние), Pressed (нажатое) и Hover (при наведении). Focused (сфокусированное) полезно, если ваш интерфейс принимает ввод с клавиатуры. Шестой слот изображения, Click Mask (маска нажатия), позволяет определить доступную для клика область, используя 1-битное изображение, состоящее только из черного и белого цветов.

В разделе Base Button вы найдете несколько флажков, которые изменяют поведение кнопки. Когда Toggle Mode включен, кнопка при нажатии будет переключаться между активным и нормальным состояниями. Disabled делает ее отключенной по умолчанию — в этом случае она будет использовать текстуру Disabled. TextureButton имеет несколько общих свойств с рамкой текстуры: у него есть свойство Modulate для изменения цвета и режимы Resize и Stretch для изменения его поведения масштабирования.

../../_images/five_common_nodes_texturebutton.png

TextureButton и его 5 слотов текстуры

TextureProgress

TextureProgress накладывает до 3 слоев спрайтов для создания шкалы прогресса. Текстуры Under (нижняя) и Over (верхняя) сэндвичем прокладывают между собой текстуру Progress (прогресса), которая отображает значение шкалы.

Свойство Mode контролирует направление, в котором растет шкала прогресса: горизонтально, вертикально или радиально. Если вы установите его на радиальное, то свойства Initial Angle и Fill Degrees позволят вам ограничить диапазон датчика.

Чтобы анимировать шкалу, вам стоит взглянуть на раздел Range. Настройте свойства Min и Max для определения диапазона датчика. Например, чтобы изобразить жизнь персонажа, вам стоит установить Min на 0, а Max на максимальное количество жизни персонажа. Изменяйте свойство Value для обновления шкалы. Если вы оставите значения Min и Max по умолчанию на 0 и 100 и установите свойство Value на 40, то покажется 40% текстуры Progress, а 60% останутся скрытыми.

../../_images/five_common_nodes_textureprogress.png

Шкала TextureProgress, заполнено на две трети

Label (Надпись)

Label выводит текст на экран. Все его свойства вы найдете в разделе Label, в Инспекторе. Напишите текст в свойстве Text и проверьте значение свойства Autowrap, если вы хотите, чтобы он соответствовал размеру текстового поля. Если Autowrap выключен, вы не сможете изменять масштаб узла. Вы можете выровнять текст горизонтально и вертикально при помощи свойств Align и Valing соответственно.

../../_images/five_common_nodes_label.png

Скриншот элемента Label

NinePatchRect

NinePatchRect разделяет текстуру на 3 строки и 3 столбца. Центральная и боковые плитки масштабируют текустуру, а углы — никогда. Полезно создавать панели, диалоговые окна и масштабируемые фоны для вашего пользовательского интерфейса.

../../_images/five_common_nodes_ninepatchrect.png

NinePatchRect отмасштабирован с использованием свойства min_size

Есть два способа создания отзывчивых интерфейсов

Есть два способа создания масштабируемых и гибких интерфейсов в Godot:

  1. Размещать UI элементы точно при помощи якорей: Используйте меню Layout для размещения и изменения размера UI элемента относительно его родителя.

  2. Автоматически выстраивайте узлы управления с контейнерами: Используйте узлы-контейнеры для автоматического масштабирования и размещения элементов пользовательского интерфейса.

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

По мере создания интерфейсов для ваших игр и инструментов, вы развиваете чувство того, что лучше подходит в конкретной ситуации.

Размещайте элементы интерфейса точно при помощи якорей

У управляющих узлов есть позиция и размер, но они также имеют якоря и отступы. Якоря определяют начало координат (ориентир) для левого, верхнего, правого и нижнего краёв узла. Изменив любой из 4 якорей, можно сдвинуть ориентир для отступов.

../../_images/anchor_property.png

Свойство "якорь"

Как изменять якорь

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

../../_images/layout_menu.png

Меню макета расположения в окне просмотра

Якоря относительны к родительскому контейнеру

Каждый якорь — это значение между 0 и 1. Для левого и верхнего якорей, что значится как 0, без каких-либо отступов края узла будут выровнены по левому и верхнему краям его родителя. Для правого и нижнего краёв, что значится как 1, они будут выровнены по правому и нижнему краям родительского контейнера. С другой стороны, отступы представляют собой расстояние до позиции якоря в пикселях, в то время как якоря относительны размеру родительского контейнера.

../../_images/ui_anchor_and_margins.png

Отступы относительны к позиции якоря, которая относительна якорям. На практике, вы зачастую позволяете контейнеру обновлять отступы за вас

Отступы изменяются вместе с якорем

Отступы обновляются автоматически, когда вы перемещаете или изменяете размер управляющего узла. Они представляют собой расстояние от краёв управляющего узла до его якоря, который относителен родительскому управляющему узлу или контейнеру. Вот почему ваши управляющие узлы всегда должны быть внутри контейнера, что мы и увидим через мгновение. Если родитель отсутствует, то отступы будут относительны собственному ограничивающему прямоугольнику узла, установленному в разделе "Rect" в Инспекторе.

../../_images/control_node_margin.png

Отступы для CenterContainer установлены на якорь "Полный прямоугольник"

Попробуйте поизменять якоря или вложить ваши узлы Control внутрь контейнеров — отступы обновятся. Вам нечасто потребуется редактировать отступы вручную. Сначала всегда пробуйте найти контейнер; Godot предоставляет узлы для решения всех распространенных случаев за вас. Нужно добавить пространство между шкалой здоровья и границей экрана? Используйте узел MarginContainer. Хотите сделать вертикальное меню? Используйте узел VBoxContainer. Подробнее об этом ниже.

Используйте размерные тэги, чтобы влиять на то, как элементы интерфейса будут заполнять доступное пространство

Каждый узел управления имеет флаги размера (Size Flags). Они сообщают контейнерам, как элементы пользовательского интерфейса должны масштабироваться. Если добавить флаг "Fill" (заполнить) на свойство Horizontal (горизонталь) или Vertical (вертикаль), ограничивающий прямоугольник узла займет всё возможное пространство, но он будет уважать своих братьев и сестёр и сохранит свои размеры. Если в HBoxContainer есть 3 узла TextureRect с флагами "Fill" на обеих осях, то каждый из них займет до трети свободного пространства, но не более. Контейнер возьмёт на себя узел и автоматически изменит его размер.

../../_images/textureframe_in_box_container_fill.png

3 элемента интерфейса в HBoxContainer выровнены по горизонтали

Флаг "Expand" позволяет элементу интерфейса заполнить всё возможное пространство и растолкать своих братьев и сестёр. Его ограничивающий прямоугольник будет расти до краёв родительского элемента или пока он не будет заблокирован другим узлом интерфейса.

../../_images/textureframe_in_box_container_expand.png

Такой же пример как и выше, но центральный узел имеет флаг "Expand"

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

Автоматическая организация управляющих узлов с контейнерами

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

Контейнеры имеют несколько специальных свойств, чтобы контролировать упорядочивание элементов пользовательского интерфейса. Чтобы изменить их, перейдите в раздел «Пользовательские константы» (Custom Constants) в Инспекторе.

5 наиболее полезных контейнеров

Если вы создаёте инструменты, то вам могут понадобиться все контейнеры. Но для большинства игр достаточно нескольких:

  • MarginContainer, для добавления полей вокруг частей пользовательского интерфейса

  • CenterContainer, центрирует своих детей в ограниченных рамках

  • VboxContainer and HboxContainer, чтобы упорядочить элементы пользовательского интерфейса в строках или столбцах

  • GridContainer, упорядочивает узлы Controls в виде сетки

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

../../_images/five_containers_centercontainer.png

CenterContainer в действии. Шкала здоровья находится внутри его родительского контейнера.

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

../../_images/five_containers_margincontainer.png

MarginContainer добавляет 40-пиксельный отступу вокруг игрового пользовательского интерфейса(GUI)

Есть два BoxContainers: VBoxContainer и HBoxContainer. Вы не можете добавить сам узел BoxContainer, так как он является вспомогательным классом, но вы можете использовать вертикальные и горизонтальные контейнеры. Они упорядочивают узлы в строках или столбцах. Используйте их для выравнивания предметов в магазине или для создания сложных сеток с строками и столбцами разных размеров, так как вы можете вложить их в ваше ядро.

../../_images/five_containers_boxcontainer.png

HBoxContainer горизонтально выравнивает элементы пользовательского интерфейса

VBoxContainer автоматически выравнивает свои дочерние элементы в колонку. Один за другим. Для задания разделителя меж ними, используется параметр разделителя. HBoxContainer выравнивает элементы UI в строку. Он похож на VBoxContainer, но с дополнительным методом add_spacer, позволяющим добавлять узел контроля отступа для первого или последнего элементов, прямо из скрипта.

GridContainer позволяет упорядочивать элементы пользовательского интерфейса в виде сетки. Вы можете контролировать только количество столбцов, он будет устанавливать количество строк сам по себе, на основе подсчета его дочерних элементов. Если у вас девять дочерних элементов и три столбца, у вас будет 9÷3 = 3 строки. Добавьте еще три дочерних элемена, и у вас будет четыре ряда. Другими словами, он будет создавать новые строки по мере добавления текстур и кнопок. Как и box container'ы, он имеет два свойства для установки вертикального и горизонтального разделения между строками и столбцами соответственно.

../../_images/five_containers_gridcontainer.png

GridContainer с 2 колонками. Он вычисляет их размер автоматически.

Система UI в Godot сложна и включает гораздо больше, чем описано здесь. Для получения подробной информации о том, как разрабатывать более продвинутые UI, обратитесь к разделу GUI section в документации.