Анимирование интерфейса

Используйте Sequencer в UMG для анимирования виджетов. Виджеты анимируются на основе значений, введённых в параметре материала.

Настройка виджета

В качестве виджета используется виджет «Управление заданиями» из примера в уроке «Настройка параметров материала в UMG».

Создайте виджет устройства «Управление заданиями», если у вас нет готового виджета. Затем выполните следующие действия:

1. Добавьте Текстовый блок с текстом +1 поверх существующего виджета «Управление заданиями». Так значение шкалы устранений будет увеличиваться в зависимости от количества устранённых зомби.

   

2. В разделе Отрисовка для параметра Непрозрачность отрисовки этого текстового блока установите значение 0,0.

   

3. Виджет готов к анимированию.

Настройка анимации

Чтобы добавить анимацию в интерфейс, откройте Sequencer в Графе событий, чтобы анимировать значок и «+1». После этого настроим анимацию в Sequencer.

В этом примере по мере увеличения прогресса в устройстве «Управление заданиями» игрока значок увеличивается и появляется текст «+1», как на GIF ниже.

1. Откройте окно анимации, выбрав Окно > Анимации.

   

2. Нажмите + анимация и назовите анимацию OnIncrement.

   

Анимирование видимости виджета

Чтобы анимировать интерфейс, нужно выбрать виджет для анимации, а затем анимировать материал или текстуру, связанную с этим виджетом, в Sequencer в окне анимации. Запустите анимацию, выбрав IncrementText (+1).

1. Выберите OnIncrement > +1 текст > + добавить > Приращение текста.

   

2. Нажмите значок + на дорожке IncrementText и выберите Непрозрачность отрисовки. Это позволит отслеживать непрозрачность на временной шкале анимации.

   

3. Настройте опорный кадр для начала анимации. Он будет определять моменты появления и исчезновения текста.

   

4. Установите для параметра Непрозрачность отрисовки следующие значения:

   1. 1,0 = 0,25 секунд

   2. 0,0 = 0,50 секунд

   

5. Теперь у вас есть анимация, в которой текст появляется и исчезает при каждом устранении игрока.

   

Анимирование положения виджета

Настройте анимирование положения виджета текста так, чтобы текст перемещался вверх в момент отображения до исчезновения.

1. Нажмите на значок + в IncrementText и выберите Преобразование.

   

2. Разверните Преобразование > Перенос и установите для оси Y значение, на которое должен переместиться +1 текст в момент отображения. В этом примере для опорных кадров переноса по оси Y заданы следующие значения:

   1. 0,0 = 0,0 секунд

   2. –20,0 = 0,25 секунды

   3. –20,0 = 0,50 секунды

   

   Не забудьте задать опорные кадры для каждого перемещения текста.

Теперь при появлении текст будет перемещаться вверх.

Анимирование масштаба виджета

Увеличивайте размер анимированного «+1 текста» по мере его перемещения, чтобы отображать количество устранений, анимировав настройки масштаба виджета. Эта анимация создаёт иллюзию «всплывающего» текста.

1. Разверните IncrementText > Преобразование > Масштаб. Значения X и Y будут отображаться в разделе Масштаб.

   

2. Задайте масштаб X и Y в качестве опорных кадров на временной шкале OnIncrement. В данном примере для опорных кадров масштаба заданы следующие значения:

   1. 0,0 = 0,0 секунд

   2. 2,0 = 0,10 секунды

   3. 0,0 = 0,50 секунды

Теперь «+1 текст» появляется в увеличенном формате с постепенным уменьшением при воспроизведении анимации.

Анимирование параметра материала кисти изображения

Чтобы сделать так, чтобы значок в материале увеличивался по мере изменения прогресса в устройстве «Управление заданиями», откройте материал через Sequencer.

1. Выберите изображение TrackerMaterial, а затем нажмите + добавить > TrackerMaterial в анимации OnIncrement.

   

2. Нажмите на значок + на дорожке TrackerMaterial и выберите материал Brush.Brush. Это позволит добавить дорожку материала в свойство материала Brush.Brush.

   

3. Нажмите на значок + на новой дорожке Brush.Brush.Material и выберите IconScaleX и IconScaleY.

   

   Разверните IconScaleX и IconScaleY. Вы можете легко изменять эти параметры в Sequencer во время воспроизведения анимации OnIncrement. С помощью этих настроек можно анимировать увеличение и уменьшение значка.

4. Установите для IconScaleX и IconScaleY следующие значения:

   1. 0,7 = 0,00

   2. 1,0 = 0,25

   3. 0,7 = 0,00

   

Теперь для анимации значка используются параметры материала из TrackerMaterial, как на GIF ниже.

Добавление условия анимации

Анимация готова для использования. Необходимо привязать её к значению игрового процесса, чтобы она воспроизводилась при изменении этого значения.

1. Откройте окно Просмотр привязок, выбрав Окно > Просмотр привязок.

   

2. В окне Просмотр привязок выберите + добавить условие.

   

   Левое поле предназначено для значения игрового процесса, изменение которого нужно отслеживать, чтобы справа воспроизводилась анимация. В данный момент параметр «+ добавить условие» принимает только значения float или int.

   

3. Выберите левое поле, а затем MVVM_UEFN_Tracker > Значение. Теперь вы будете отслеживать прогресс устройства «Управление заданиями» с помощью воспроизведения анимации при каждом изменении значения устройства «Управление заданиями».

   

4. Нажмите на среднее выпадающее меню и выберите Больше чем (>).

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

   Если для «Больше чем» установить значение (>) 0,0, интерфейс будет воспроизводить анимацию при каждом изменении этого значения.

   

5. Выберите правое поле WBP_{YourWidgetName} > Очередь воспроизведения анимации. Правое поле — это действие, которое необходимо выполнить, когда это значение удовлетворяет условию. В данном случае это воспроизведение созданной выше анимации OnIncrement.

   

   В «Просмотре привязок» появится список настроек анимации, которую вы хотите воспроизвести.

   • Анимировать = Воспроизведение

   • Время начала = Выберите время

   • Количество циклов воспроизведения = Количество циклов анимации

   • Режим воспроизведения = Вперёд, Обратное воспроизведение или Пинг-понг

   • Скорость воспроизведения = Ускорение или замедление анимации

   • Восстановить состояние = Восстановление состояния анимации по умолчанию

   

6. Нажмите на значок ссылки рядом с InAnimation, а затем выберите WBP_{YourWidgetName} > OnIncrement > Выбрать.

   

Вы настроили воспроизведение анимации при каждом изменении значения в устройстве «Управление заданиями».

Окончательный результат

По мере устранения врагов или неигровых персонажей вы будете видеть количество устранений в интерфейсе: будет появляться значок, а также будет появляться и исчезать текст +1.