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

Computer displays, mobile phones, and TV screens come in all shapes and sizes. To ship a game, you’ll need to support different screen ratios and resolutions. It can be hard to build responsive interfaces that adapt to all platforms. Thankfully, Godot comes with robust tools to design and manage a responsive User Interface.

../../_images/godot_editor_ui.png

Редактор Godot создан с помощью своей же технологии создания интерфейсов

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

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

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

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

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

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

  1. Привязка (Anchor)
  2. Ограничительные рамки
  3. Фокус и фокус соседей
  4. Флаги размера
  5. Поле
  6. Настраиваемая тема пользовательского интерфейса

Когда Вы изучите основы узлов контроля, у Вас не уйдет много времени на изучение всех узлов контроля, которые выходят из них.

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

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

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

  1. Label: для отображения текста
  2. TextureRect: используется, в основном, для картинок заднего плана, или для чего угодно, что является статическим изображением
  3. TextureProgress: для шкал жизни, загрузки, горизонтальных, вертикальных или радиальный
  4. NinePathRect: для растяжимых панелей
  5. TextureButton: для создания кнопок
../../_images/five_most_common_nodes.png

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

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, но более короткая сторона совпадает с ограничивающим прямоугольником, а другая отсекается границами узла.

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

../../_images/five_common_nodes_textureframe.png

TextureRect модулируется с помощью красного цвета

«TextureButton»

TextureButton как TextureRect, кроме него имеется 5 слотов текстуры: одна для каждого из состояний кнопки. Большую часть времени вы будете использовать Normal, Pressed и Hover textures. Фокусировка полезна, если ваш интерфейс слушает ввод с клавиатуры. Шестой слот изображения (Click Mask) позволяет определить кликабельную область, используя 2-битное, чистое черно-белое изображение.

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

../../_images/five_common_nodes_texturebutton.png

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

«TextureProgress»

TextureProgress накладывается слоями из 3 спрайтов, чтобы создать шкалу прогресса. Нижняя и верхняя текстуры, как сэндвич, накрывают текстуру прогресса, которая отображает значение.

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

To animate the bar, you’ll want to look at the Range section. Set the Min and Max properties to define the range of the gauge. For instance, to represent a character’s life, you’ll want to set Min to 0, and Max to the character’s maximum life. Change the Value property to update the bar. If you leave the Min and Max values to the default of 0 and 100, and set the Value property to 40, 40% of the Progress texture will show up, and 60% of it will stay hidden.

../../_images/five_common_nodes_textureprogress.png

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

Ярлык

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

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

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

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

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

../../_images/anchor_property.png

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

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

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

../../_images/layout_menu.png

Макет меню в окне просмотра

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

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

../../_images/ui_anchor_and_margins.png

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

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

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

../../_images/control_node_margin.png

Отступы на CenterContainer установлены в режиме полной привязки «Full Rect» в макет меню на верхней панели инструментов

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

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

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

../../_images/textureframe_in_box_container_fill.png

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

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

../../_images/textureframe_in_box_container_expand.png

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

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

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

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

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

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 в документации.