2020-06-08
158
После того, как вы создали и настроили оболочку и логику вашего Виджета, вам нужно вызвать и показать его из нужного Блупринта для того, что ваш виджет появился на экране.
В примере выше вы можете видеть простую последовательность, которая создает виджет, записывает его в переменную(для последующего доступа) и добавляет на экран пользователя. Создание виджета происходит путем вызова блока Create Widget, в котором устанавливается класс виджета(какий именно виджет) и «владелец» виджета(Player Controller), а на выходе в Return Value получаете созданный виджет. После создания, виджет нужно отобразить на экране, что можно сделать вызовом блока Add to Viewport.
Что бы убрать виджет с экрана, воспользуйтесь блоком Remove from Parent
Добавление виджетов в виджеты
Вместо того, что бы использовать Add to Viewport и каждый раз добавлять виджеты на экран, вы можете добавить виджеты в другой виджет постредством блока Add Child
В примере выше показано, как виджет с Scroll Box добавляется к созданному виджету Main Menu, используя ноду Add Child.
Add Child блок делает родителем виджета, который был присоеденен, поэтому при вызове Add to Viewport родительского виджета, наследуемые виджеты (Дети) автоматически будут показаны на экране. Для того, что бы убрать виджет из другого, воспользуйтесь блоком Remove Child.
Типы элементов
Внутри редактора виджетов у вас есть доступ к различным элементам, из которых вы собираете ваш виджет. Все они расположены на Pallete панели и сортированы по категориям. Все эти элементы можно перенести на окно дизайнера посредством Драг&Дроп’а.
В данной документации данные элементы будут называться элементами однако их официальное название — Widget.
Список элементов Виджета
Common
Элементы в данной категории используются чаще всего.
| Border | Данный элемент представляет собой блок, который может содержать только один дочерний элемент. Так же поддерживает установку фона |
| Button | Кнопка с понятным фукнкционалом нажатия. Поддерживает один дочерний элемент, в который вы можете поместить дополнительный элемент, что бы придать кнопке особый вид. |
| Check Box | Чекбокс, который позволяет пользователю включать/выключать что либо. |
| Image | Элемент, который позволяет отобразить Slate Bruch, текстуру или материал на интерфейсе пользователя. |
| Named Slot | Слот, который позволяет расположить в себе другой, ранее созданный виджет. |
| Progress Bar | Полоса прогресса (сленг: Прогресс бар), который показывает процент чего либо. Подходит для жизней, опыта и так далее. |
| Slider | Простой слайдер, который можно перетаскивать, устанавливая значение от 0 до 1. |
| Text | Простой текст, который можно разместить на пользовательском интерфейсе. Может использоваться как для однострочных названий, так и для многострочных текстов. |
| Text Box | Данный элемент позволяет пользователю ввести текст. Поддерживает только однострочный текст. |
Input
Данные элементы предназначены для ввода какой-либо информации пользователем.
| Combo Box (String) | Данный элемент позволяет создать выпадающее меню с различными опциями для выбора. |
| Spin Box | Блок для ввода цифрового значения. Так же поддерживает изменение значение путем заддержки кнопки мыши и перетаскивании. |
| Text Box (Multi-Line) | Данный элемент позволяет пользователю ввести текст. Поддерживает многострочный текст |
Panel
Элементы для организации других по определенным правилам, например в табличном виде или друг за другом
| Canvas Panel | Панель для свободного размещения элементов внутри себя. Так же поддерживает якоря, для выравнивания элементов и Z-Order, который позволяет установить, какие элементы будут поверх других. |
| Grid Panel | Таблица с возможностю установки неравномерного размера ячеек. Схоже с тегом < Table > в html. |
| Horizontal Box | Упорядочивает элементы в горизонтальном порядке |
| Overlay | Элемент, который служит для установки одного элемента на другой или просто для организации порядка элементов |
| Scale Box | Панель, которая маштабирует дочерний контент равномерно, не изменяя его пропорций. |
| Scroll Box | Панель с возможностью прокрутки внутренних элементов. Полезно, когда кол-во дочерних элементов достигает большого количества. |
| Uniform Grid Panel | Таблица с равномерным размером ячеек, которая так же поддерживает отступы между ячейками. |
| Vertical Box | Упорядочивает элементы в вертикальном порядке. |
| Widget Switcher | Панель, которая позволяет переключать видимость дочерних элементов. |
| Wrap Box | Панель, упорядочивающая элементы справа налево. Все эелменты, которые не помещаются, автоматически переносятся на следующую строку. |
Primitive
| Circular Throbber | Прокручивает установленные картинки по кругу. Подойдет для создании загрузочной анимации. |
| Editable Text | Поле для ввода текста без фона. Поддерживает только однострочный текст. |
| Editable Text (Multi-Line) | Поле для ввода текста без фона. Поддерживает многострочный текст. |
| Menu Anchor | Элемент, который позволяет установить якорь и положение для открытия контекстного меню |
| Native Widget Host | Панель, для установки Slate виджета. |
| Spacer | Панель для того, что бы устанавливать отступы между виджетами. Не имеет визуального представления и невидима в игре. |
| Throbber | Анимированный элемент для отображения нескольких картинок, которые увеличиваются и уменьшаются с течением времени. |
Якоря UMG
Якоря используются для определения местоположения требуемого виджета UI на Canvas Panel и сохранении свей позиции на экранах различых размеров. Якоря нормализованны, что означает, что их позиция рассчитывается не в пикселях от угла экрана, а в процентном соотношении между 0;0 (верхний левый угол) и 1;1 (правый нижний угол).
Если у вас есть Canvas Panel и необходимо к ней добавить UI Widgets, то вы можете выбрать позицию якоря из готовых пресетов или вручную указать в настройках Min/Max. Учитывайте, что если элемент вашего виджета находится не внутри Canvas Panel, то якоря или позицию вы установить не сможете, так как эта возможность свойственна только дочерним элементам Канвас панели.
Как работают якоря
Внутри нижепоказанной жёлтой рамки находится якорь на Canvas панели.
На изображении ниже у нас имеется кнопка расположенная на canvas панели и якорь находящийся в положении по умолчанию (левый верхний угол).
Вертикальная жёлтая линия указывает кнопке, на сколько необходимо передвинутся по оси Y основываясь на размер и положение Canvas панели, начиная с левого верхнего угла вьюпорта. Горизонтальная жёлтая линия указывает кнопке, на сколько необходимо передвинутся по оси X, начиная с левого верхнего угла вьюпорта. В левом нижнем углу окна (внутри жёлтой рамки) указан размер canvas области с которой вы работаете.
Кликните по Screen Size кнопке, чтобы измениить текущее разрешение. Эта функция нужна для проверки того как будет выгледть ваш виджет на мониторах с разными разрешениями и соотношениями сторон.
При запуске игры, в зависимости от размеров экрана, мы могли бы видеть что-то вроде нижепредставленнорго, где желтая рамка представляет собой якорь.
Основываясь на размере вьюпорта, кнопка смещается по экрану.
Если мы переместим якорь в правый нижний угол …
И запустим режим игры с тем же разрешением экрана …
Кнопка сдвигается, что бы не выйти за пределы экрана, из-за положения якоря в правом нижнем углу (жёлтая рамка).
Данный пример показывает, как вы можете указать местоположение якоря и как это скажется на отображении виджета на экране. Вы также можете разделить якорь для указания того, как он должен отображатся на разных разрешениях.
