Полезное
Мы Вконтакте
Discord канал
Расположенные вдоль нижней части Widget Blueprint Editor два окна, позволяют контролировать анимации ваших UI виджетов. Первое окно — Animations, позволяет создать треки анимации, которые используются для управления анимацией ваших виджетов. Второе окно — Timeline,позволяет размещать специальные Keyframes которые, собственно, и отвечают за : положение, форму, размер, и т.д. ; элементов виджета в разные временные промежутки.
Для того, чтобы начать работу с анимацией в UMG, вам нужно будет сначала добавить трек анимации. Это может быть сделано путем нажатия кнопки +Animation в окне Animations. После того как вы добавить анимацию (желтая рамка на картинке ниже), вам будет предложено ввести имя для анимации трека.
После добавления трека анимации, Timeline станет активным, и вы можете начать добавлять Animation Keys, которые связаны со значениями, меняюющимися со временем для вашего виджета. Следует также отметить, что вы можете иметь несколько анимационных дорожек для каждого виджета, например, имеющий кнопку перемещения по экрану и вспышкой одновременно.
Есть два способа, в котором вы можете добавить ключи к треку анимации. Первый заключается в использовании флажка Auto Key, расположенной в окне Timeline (желтая рамка на картинке ниже). Это автоматически добавить ключи в Timeline , когда вы внесли коррективы в значения, которые поддерживают ключевые кадры.
Общий рабочий процесс для добавления ключей с помощью опции Auto Key, состоит в том, что вы указываете время ключей в которых будут достигатся требуемые значения для вашего виджета,передвигаясь по Timeline Bar и установливая значения в Details или с помощью сетки (в основном используется для расположения, вращения, или масштаба). После того, как вы установили конечный результат, переместитесь в начало вашей секвенции и установите значение по-умолчанию для вашего виджета. Отмасштабировав таймлайн между двух ключей, вы должны увидеть , что ваши изменения происходят постепенно, в течение определённого периода времени.
Второй метод, которым вы можете добавить ключей — нажав кнопку Add Key рядом с параметром, который поддерживает ключевые кадры.
На изображении выше, значок рядом с каждой из настроек можно нажать — это приведет к тому, что значение Key увеличится на заданное значение в текущей позиции. На рисунке ниже, ключевой кадр для Background Color был добавлен в 0.00 и 2.00, где цвет фона кнопки Widget изменяется от белого до желтого в течении 2 секунд.
Вы можете изменить значение для нескольких ключей в определенное время на временной шкале, удерживая Ctrl и нажимая на клавиши.
Выше мы выбрали каждый из ключей, связанных с положением выртикальным жёлтым выделением, содержащей кнопки, так что мы можем установить их вручную с помощью панели Details. Ввод значений вручную позволяет более точно контролировать, к примеру, перемещение виджета вдоль нужной оси.
При создании анимации, также создаётся переменная для неё. Если вы посмотрите на вкладке Graph под выпадающем меню Animation в окне MyBlueprint, вы увидите все ваши анимации которые вы создали. Удерживая Ctrl и перетащив анимацию в графике, вы сможете давать команды на него, такие как Play или Stop.
Здесь мы указываем нашей Start Animation играть, когда Blueprint Виджет построен.
А здесь мы говорим нашей Blinking Button анимации, остановить воспроизведение, когда наша start_Button нажата.
Ниже два примера анимации, используемые для имитации простого Main Menu, где кнопки поднимаются из нижней части экрана и кнопка Start мигает. После выполненных шагов, вы должны получить примерно такой результат.
Внутри редактора виджетов у вас есть доступ к различным элементам, из которых вы собираете ваш виджет. Все они расположены на Pallete панели и сортированы по категориям. Все эти элементы можно перенести на окно дизайнера посредством Драг&Дроп’а.
В данной документации данные элементы будут называться элементами однако их официальное название — Widget. Мы хотим разделить понятия для того, что бы читающий документацию смог быстро понять, что есть что.
Элементы в данной категории используются чаще всего.
Border | Данный элемент представляет собой блок, который может содержать только один дочерний элемент. Так же поддерживает установку фона |
Button | Кнопка с понятным фукнкционалом нажатия. Поддерживает один дочерний элемент, в который вы можете поместить дополнительный элемент, что бы придать кнопке особый вид. |
Check Box | Чекбокс, который позволяет пользователю включать/выключать что либо. |
Image | Элемент, который позволяет отобразить Slate Bruch, текстуру или материал на интерфейсе пользователя. |
Named Slot | Слот, который позволяет расположить в себе другой, ранее созданный виджет. |
Progress Bar | Полоса прогресса (сленг: Прогресс бар), который показывает процент чего либо. Подходит для жизней, опыта и так далее. |
Slider | Простой слайдер, который можно перетаскивать, устанавливая значение от 0 до 1. |
Text | Простой текст, который можно разместить на пользовательском интерфейсе. Может использоваться как для однострочных названий, так и для многострочных текстов. |
Text Box | Данный элемент позволяет пользователю ввести текст. Поддерживает только однострочный текст. |
Данные элементы предназначены для ввода какой-либо информации пользователем.
Combo Box (String) | Данный элемент позволяет создать выпадающее меню с различными опциями для выбора. |
Spin Box | Блок для ввода цифрового значения. Так же поддерживает изменение значение путем заддержки кнопки мыши и перетаскивании. |
Text Box (Multi-Line) | Данный элемент позволяет пользователю ввести текст. Поддерживает многострочный текст |
Элементы для организации других по определенным правилам, например в табличном виде или друг за другом
Canvas Panel | Панель для свободного размещения элементов внутри себя. Так же поддерживает якоря, для выравнивания элементов и Z-Order, который позволяет установить, какие элементы будут поверх других. |
Grid Panel | Таблица с возможностю установки неравномерного размера ячеек. Схоже с тегом < Table > в html. |
Horizontal Box | Упорядочивает элементы в горизонтальном порядке |
Overlay | Элемент, который служит для установки одного элемента на другой или просто для организации порядка элементов |
Scale Box | Панель, которая маштабирует дочерний контент равномерно, не изменяя его пропорций. |
Scroll Box | Панель с возможностью прокрутки внутренних элементов. Полезно, когда кол-во дочерних элементов достигает большого количества. |
Uniform Grid Panel | Таблица с равномерным размером ячеек, которая так же поддерживает отступы между ячейками. |
Vertical Box | Упорядочивает элементы в вертикальном порядке. |
Widget Switcher | Панель, которая позволяет переключать видимость дочерних элементов. |
Wrap Box | Панель, упорядочивающая элементы справа налево. Все эелменты, которые не помещаются, автоматически переносятся на следующую строку. |
Circular Throbber | Прокручивает установленные картинки по кругу. Подойдет для создании загрузочной анимации. |
Editable Text | Поле для ввода текста без фона. Поддерживает только однострочный текст. |
Editable Text (Multi-Line) | Поле для ввода текста без фона. Поддерживает многострочный текст. |
Menu Anchor | Элемент, который позволяет установить якорь и положение для открытия контекстного меню |
Native Widget Host | Панель, для установки Slate виджета. |
Spacer | Панель для того, что бы устанавливать отступы между виджетами. Не имеет визуального представления и невидима в игре. |
Throbber | Анимированный элемент для отображения нескольких картинок, которые увеличиваются и уменьшаются с течением времени. |
UMG (Unreal Mothin Graphics UI Designer) — это визуальный инструмент для создания элементов пользовательского интерфейса, таких как меню, HUD или остальной интерфейс, который отрисовывается поверх всего остального изображения. В основу UMG входят виджеты(Widget), которые представляют собой набор готовых функций (кнопки, чекбоксы, слайдеры и т.д.), которые могут быть использованы для создания интерфейса. Эти виджеты редактируются в специальном редакторе под названием «Widget Buleprint», который имеет два освновных режима: Дизайнер(Designer), через который вы устанавливаете визуальную составляющую вашего интерфейса и график(Graph), в котором производится создание логики, по которой ваш Виджет будет работать.
Работа с UMG |
Создание и вызов Виджетов |
Типы элементов |
Якоря Canvas Panel |
Анимация |
DPI масштабирование |
Шрифты |
Стилизация |
Слоты |
Что бы начать работу с UMG, вам нужно создать виджет.
По умолчанию при редактировании Виджетов будет открыт редактор в режиме Desiger(Дизайнер). Данный режим отвечает за создание визуальной составляющей вашего виджета, который в последствии будет отображен на экране пользователя.
Нажмите на картинку справа, что бы увидеть числовую разметку.
1. Visual Designer | Окно, в котором происходит настройка вашего виджета в графическом режиме. |
2. Pallete | Список заготовленных элементов виджета, которые могут быть пересены и установлены в редакторе посредством перетаскивания |
3. Hierarchy | Отображает древовидную струкруру компонентов вашего виджета |
4. Sequencer | Панель для создания анимаций компонентов вашего виджета |
5. Details | Отображает настройке выбранного компонента или виджета в целом. |
UMG редактор так же поддерживает создание логики вашего виджета. Вся эта логика создается по системе Blueprint в режиме Graph, в который можно войти, переключив режим на Тулбаре редактора.
Подробнее о Графиках(ссылка на графики в блупринтах).
После того, как вы создали и настроили оболочку и логику вашего Виджета, вам нужно вызвать и показать его из нужного Блупринта для того, что ваш виджет появился на экране.
В примере выше вы можете видеть простую последовательность, которая создает виджет, записывает его в переменную(для последующего доступа) и добавляет на экран пользователя. Создание виджета происходит путем вызова блока 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.