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

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 создан с помощью своей же технологии создания интерфейсов

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

  • The five most useful control nodes to build your games“ interface
  • Как работать с UI элементами
  • Как эффективно разместить и упорядочить Ваш пользовательский интерфейс с использованием контейнеров
  • Пять самых используемых контейнеров (позже вы можете изучить больше о контейнерах на странице GUI Containers).

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

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

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

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

  1. Привязка (Anchor)
  2. Ограничительные рамки
  3. Focus and focus neighbor
  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) scales the texture to fit the node’s bounding rectangle, only if expand property is true; otherwise, it behaves like Keep mode. Default mode for backwards compatibility.
  • Scale scales the texture to fit the node’s bounding rectangle.
  • Tile makes the texture repeat, but it won’t scale.
  • Keep and Keep Centered force the texture to remain at its original size, in the top left corner or the center of the frame respectively.
  • Keep Aspect and Keep Aspect Centered scales the texture but force it to remain its original aspect ratio, in the top left corner or the center of the frame respectively.
  • Keep Aspect Covered works just like Keep Aspect Centered but the shorter side fits the bounding rectangle and the other one clips to the node’s limits.

As with Sprite nodes, you can modulate the TextureRect’s color. Click the Modulate property and use the color picker.

../../_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. С другой стороны, у вас есть макет меню. Он помогает вам закрепить, разместить и изменить размер элемента внутри его родителя.

The two approaches are not always compatible. Because a container controls its children, you cannot use the layout menu on them. Each container has a specific effect, so you may need to nest several of them to get a working interface. With the layout approach you work from the bottom up, on the children. As you don’t insert extra containers in the scene it can make for cleaner hierarchies, but it’s harder to arrange items in a row, column, grid, etc.

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

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

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

../../_images/anchor_property.png

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

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

Like any properties, you can edit the 4 anchor points in the Inspector, but this is not the most convenient way. When you select a control node, the layout menu appears above the viewport, in the toolbar. It gives you a list of icons to set all 4 anchors with a single click, instead of using the inspector’s 4 properties. The layout menu will only show up when you select a control node.

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

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

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

Containers automatically arrange all children Control nodes including other containers in rows, columns, and more. Use them to add padding around your interface or center nodes in their bounding rectangles. All built-in containers update in the editor, so you can see the effect instantly.

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

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

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

  • MarginContainer, для добавления полей вокруг частей пользовательского интерфейса
  • CenterContainer, to center its children in its bounding box
  • VboxContainer and HboxContainer, чтобы упорядочить элементы пользовательского интерфейса в строках или столбцах
  • GridContainer, упорядочивает узлы Controls в виде сетки

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

../../_images/five_containers_centercontainer.png

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

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

../../_images/five_containers_margincontainer.png

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

There are two BoxContainers: VBoxContainer and HBoxContainer. You cannot add the BoxContainer node itself, as it is a helper class, but you can use vertical and horizontal box containers. They arrange nodes either in rows or columns. Use them to line up items in a shop, or to build complex grids with rows and columns of different sizes, as you can nest them to your heart’s content.

../../_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 колонками. Он вычисляет их размер автоматически.

Godot’s UI system is complex, and has a lot more to offer. To learn how to design more advanced interfaces, head to the GUI section of the docs.