Добавление виджетов в виджеты

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

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

Основываясь на размере вьюпорта, кнопка смещается по экрану.

Если мы переместим якорь в правый нижний угол …

И запустим режим игры с тем же разрешением экрана …

Кнопка сдвигается, что бы не выйти за пределы экрана, из-за положения якоря в правом нижнем углу (жёлтая рамка).

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

Заготовки положения якорей

Для расположения виджета на Canvas Panel, вы можете выбрать ранее заготовленные якоря с Details панели виджета.

Это, возможно, наиболее основные и частые способы указания местонахождения якоря в вашем виджете, и должны подходить вам в большинстве случаев. Серебрянная рамка показывает местонахождение якоря и переместит его туда как только вы выберите эту позицию. Для примера, если вам нужно удерживать что-то по центру экрана всё время, вы можете разместить ваш виджет по центру canvas panel, после чего выбрать опцию с центральным якорем.

Это полезно, когда вы хотите растянуть что-то вдоль экрана (показано ниже).

Здесь мы выделили место для якоря вдоль нижней части canvas.

Растяжение отражается и на самой иконке якоря, теперь вместо одной целой — две половинки.

Вы можете разбить якорь на части, потянув за одном из краёв.

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

И будет выглядеть так, при разных разрешениях экрана:

Или даже так:

Установка якорей вручную

В дополнении к существующим заготовкам, вы можете вручную указать местоположение якоря. Это удобно в тех случаях, если нужно расположить один виджет относительно другого; ниже продемонтрирован пример.

На картинке выше у нас имееться виджет картинки и Progress Barа внутри canvas панели, который в свою очередь находится внутри другой canvas панели. Canvas панель содержит в себе Image элемент и Progress Bar, закреплённые в левом верхнем углу экрана. Это может быть использовано, к примеру, чтобы показать картинку персонажа игрока и его полоску здоровья.

Ниже Progress Bar (а также картинка, хотя это не показано) закреплены к верхнему левому углу canvas панели в которой они находятся.

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

Теперь вы можете видеть на изображении ниже, как мы растягиваем правую сторону canvas панели, Progress Bar растягивается, но расстояние от правой стороны остается прежним.

Теперь проблема состоит в том, что когда мы изменили размер canvas панели с нашим виджетом в ней, виджет картинки не остался на прежней позиции, а съехал немного в сторону.

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

Выше, мы закрепили якорь в левом верхнем углу вместе с Progress Bar. Теперь мы изменим размер canvas панели содержащей 2 виджета…

Виджет картинки остался на фиксированном расстоянии от Progress Bar’а. Теперь другая проблема, если мы сожмем нашу панель Canvas с виджетами внутри…

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

Выше мы установили наш якорь и теперь изменяя размер Canvas панели, картинка вместе с Progress Bar’ом изменяют свой размер и не вылезают за границу.

Пространство слева/справа от картинки остается неизменным, но как насчёт сверху/снизу? Так как мы растянули canvas панель вниз, то картинка больше не центрирована с Progress Bar’ом.

Ещё одно изменение якоря может исправить это. Тут мы указали, на сколько мы хотим, чтобы картинка была отодвинута от верха и низа по отношению к Progress Bar’у.

И теперь, когда мы изменяем размер canvas панели в любом направлении, картинка изменяется в размере и остаётся на позиции по отношении к Progress Bar’у, который также растягивается.

Шрифты

Данная страница расскажет, как импортировать свои шрифты используя Font Editor, и использовать их в Unreal Motion Graphics (UMG) UI Designer.

Ассеты шрифтов

Шрифты в UE4 классифицируются как ассеты шрифтов использующие 2 методы кеширования: Runtime - который находится в форме составного шрифта; Offline - старый метод предрасчитанного шрифтового атласа. Вы можете переключится между двумя этими методами, открыв ассет шрифта в редакторе шрифтов (это простейший способ сконвертировать существующий шрифт старого формата в новый, без его замены).