UEngine.Ru

Расположенные вдоль нижней части 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 мигает. После выполненных шагов, вы должны получить примерно такой результат.

1. Настройка главного меню, включают в себя Vertical Box, содержащая кнопки на экране.
   
2. Нажмите на кнопку New в окне Animations и дайте анимации имя, например StartAnimation.
   
3. Нажмите кнопку Auto Key в окне Timeline.
   
4. Переместите Timeline Bar в 0.00 на шкале, а затем нажмите на вертикальных Vertical Box содержащую вашу кнопку
5. Удерживая Ctrl, нажмите в центре медальона Widget (желтая стрелка) и перетащите Vertical Box вниз от экрана (1).
   
   Это позволит добавить ключевые кадры для текущего местоположения на временной шкале (2).
6. На панели Details в Vertical Box кликните по Anchors и выберите опцию внизу в центре.
   
7. Переместите Timeline Bar в 1,00 затем, удерживая Ctrl, нажмите и переместите Vertical Box так,что бы его было полностью видно.
8. На панели Details в Vertical Box клините по Якорю и выберите опцию Центр.
   
9. В окне Animations, нажмите кнопку New, чтобы добавить анимацию, называемую BlinkingButton.
   
   Убедитесь, что Auto Key не выбрано.
10. Переместитесь по Timeline Bar в 1.00 и нажмите на кнопку Start чтобы его выбрать.
11. В разделе Appearance в панели Details, нажмите Add Key кнопку рядом с Background Color.
    
12. Переместите Timeline Bar на 2.00, затем измените Background Color и добавьте еще один ключевой кадр.
    
13. Временная шкала должна выглядеть, как показано ниже для анимации BlinkingButton.
    
14. Перейдите на вкладку Graph, а затем перетащить обе переменные этой анимации и создайте граф как ниже.
    
    Здесь мы указываем, когда Blueprint Виджета построен — играть Start Animation (наши кнопки поднимаются из нижней части экрана). С помощью ноды Set Timer , мы вызываем Custom Event , называемое StartBlinking, каждые 2 секунды (нода Set Timer установлена на повтор). Наше событие StartBlinking будет воспроизводить анимацию Blinking Button каждые 2 секунды (измение цвета Start Button с белого на зелёный).
15. Теперь создайте Widget Blueprint в Level Blueprint или в Character Blueprint.
    
    В нашем MyCharacter Blueprint, вы создаём виджет содержащий анимацию и UI разметку главного меню и добавляем его во вьюпорт используя ноду Add to Viewport.