Создайте пользовательский анимированный таймер для игр, ограниченных по времени. С помощью анимаций интерфейса можно задать мерцание и исчезновение таймера или даже добавить пользовательский материал обратного отсчёта вокруг часов.
В этом уроке вы узнаете, как:
Настраивать материал.
Анимировать циферблат.
Изменять цвет часов.
Создайте пользовательский виджет в Каталоге ресурсов, следуя инструкциям, описанным в уроке Всплывающие окна интерфейса.
1-й шаг: настройка виджетов
После того как вы создали пользовательский виджет, дважды нажмите на миниатюру пользовательского виджета, чтобы открыть Редактор виджетов.
Перетащите виджет наложения в граф виджетов и измените его размер на 1920 x 1080, потянув за правый нижний угол. Этот виджет выступает в качестве экрана, на котором будет отображаться интерфейс.
Нажмите правой кнопкой мыши на виджет наложения на панели «Иерархия», чтобы переименовать его в Корневой. Данное название будет напоминать о том, что этот виджет выступает в качестве модели экрана.
Перетащите второй виджет наложения в Корневой виджет. Этот виджет будет содержать все виджеты, составляющие дизайн и функцию анимированного таймера.
Переименуйте второй виджет наложения в ParentContainer на панели Иерархия.
На панели «Сведения» задайте следующие параметры:
Отступ = 25.0
Выравнивание по горизонтали = Выравнивание по центру по горизонтали
Перетащите виджет Размерное поле в виджет ParentContainer. Это позволит определить и применить размер к его дочерним виджетам. Дочерние виджеты размерного поля станут циферблатом.
Переименуйте виджет Размерное поле на панели «Иерархия» в BGSizeBox.
На панели Сведения задайте для параметров Выравнивание по горизонтали и Выравнивание по вертикали значение Выравнивание по центру.
Выберите параметры Мин. желаемая ширина и Макс. желаемая высота, чтобы включить их, а затем установите для них значение 130.0.
Контейнер должен находиться в корневом виджете, как показано ниже
Перетащите виджет изображения в виджет BGSizeBox.
Переименуйте виджет изображения в Таймер на панели Иерархия.
На панели Сведения задайте для параметров Выравнивание по горизонтали и Выравнивание по вертикали значение Выравнивание по центру.
Добавьте экземпляр материала к свойству Кисть > Изображение. Это может быть материал, ведущий обратный отсчёт времени.
Материал заполняет пространство внутри виджета «Родительский контейнер».
Перетащите виджет Текстовое поле в виджет Родительский контейнер.
Переименуйте виджет Текстовое поле на панели Иерархия в TimerText.
На панели Сведения задайте для свойства Текст значение 00:00.
Виджет «Текст таймера» размещается непосредственно в центре пользовательского виджета.
Далее нужно анимировать виджет «Текст таймера», чтобы сделать время более динамичным в состоянии срочности.
2-й шаг: анимирование текста таймера
Чтобы создать ощущение непосредственной опасности для состояния срочности в последние несколько секунд отсчёта таймера, анимируйте время на часах.
В анимации, представленной ниже, текст таймера увеличивается, становится красным, а затем исчезает. Эта анимация будет повторяться, пока действует режим срочности, заданный в устройстве Таймер.
Нажмите на Анимации внизу экрана Редактора виджетов. Откроется панель Sequencer, в котором вы сможете создавать анимации и добавлять виджеты в последовательность анимации.
Нажмите +анимация, чтобы создать файл анимации в пользовательском виджете.
Назовите анимацию Срочность. Вы настроите эту анимацию позже, когда добавите привязки к пользовательскому виджету.
Граф виджетов будет выделен синим контуром со словом SELECTED (ВЫБРАНО).
Нажмите +добавить, чтобы открыть список объектов, которые можно добавить в анимацию в пользовательском виджете.
На панели Иерархия выберите виджет TimerText.
Выберите TimerText из списка, чтобы добавить TimerText на панель Sequencer.
Нажмите на значок + рядом с TimerText, чтобы открыть список свойств, которые можно анимировать.
Выберите Преобразование из списка. В результате будут добавлены все способы преобразования текста: перенос, вращение, масштабирование и искажение.
Откройте параметры Масштаба и выберите значок + опорный кадр, чтобы добавить опорные кадры на временную шкалу. Параметры Ось X и Ось Y увеличивают и уменьшают размер текста при вводе новых значений.
Переместите указатель воспроизведения на временной шкале на 0.25 секунды, измените значения по осям X и Y на 1.5, а затем нажмите на значок + опорный кадр рядом с параметрами оси X и Y. На временной шкале появляются опорные кадры, отражающие изменения TimerText.
Переместите указатель воспроизведения на временной шкале на 0.5 секунды, измените значения по осям X и Y на 2.0, а затем нажмите на значок + опорный кадр рядом с параметрами оси X и Y. На временной шкале появятся дополнительные опорные кадры, отражающие изменение текста.
Нажмите значок + рядом с TimerText и выберите Цвет и непрозрачность из списка. В результате в Sequencer будут добавлены свойства «Красный», «Зелёный», «Синий» и «Альфа».
Сбросьте указатель воспроизведения на временной шкале и выберите значок + опорный кадр рядом с параметром Цвет и непрозрачность. Так вы настроите первый опорный кадр для каждого из свойств цвета и непрозрачности на временной шкале.
Разверните Цвет и непрозрачность, измените значение Красного цвета на 1.0, Зелёного на 0.0 и Синего на 0.0. Так вы создадите красный цвет.
Установите указатель воспроизведения на 0.25 секунды, а затем выберите значок + опорный кадр рядом с каждым свойством в блоке «Цвет и непрозрачность». Так вы добавите опорные кадры на временную шкалу.
Переместите указатель воспроизведения на 0.5 секунды, измените значение Альфа на 0.0 и выберите значок + опорный кадр. Когда анимация достигает последних опорных кадров на временной шкале, текст исчезает.
Если вы будете перемещать указатель воспроизведения вперёд и назад по временной шкале, то увидите, что созданная вами анимация воспроизводится в графе виджетов.
Далее вы добавите модель просмотра и просмотр привязок, чтобы заменить устройство «Таймер» на пользовательский виджет.
3-й шаг: добавление просмотра привязок
Чтобы заменить интерфейс устройства «Таймер» по умолчанию, привяжите виджет «Текстовое поле» (TimerText) к настройкам устройства «Таймер».
В меню Окно выберите Модель просмотра. Откроется окно «Модель просмотра».
Нажмите +модель просмотра, затем выберите Устройство — модель просмотра таймера > Выбрать. Теперь вы можете привязать все модели просмотра устройств «Таймер» к пользовательскому виджету.
На панели Иерархия выберите виджет TimerText.
Нажмите на Просмотр привязок на нижней панели инструментов, чтобы открыть панель «Просмотр привязок».
Нажмите +виджет TimerText, чтобы добавить виджет TimerText на панель «Просмотр привязок».
Выберите поле TimerText, чтобы открыть выпадающее меню свойств виджета.
В выпадающем меню выберите TimerText > Текст > Выбрать. Так вы идентифицируете текст виджета TimerText как привязываемое свойство.
Выберите пустое поле справа, чтобы открыть выпадающее меню привязок.
В выпадающем меню привязок выберите TimerTextViewModel > Текущее время > Выбрать. Это позволит привязать виджет TimerText к текущему времени для устройства «Таймер» и отобразить текущее время на экране.
Далее вы добавите анимацию в модель просмотра, чтобы она воспроизводилась на экране в режиме срочности.
4-й шаг: добавление анимации
Вы добавите анимацию аналогично тому, как вы добавили привязки для TimerText на панели «Просмотр привязок».
В верхней части панели «Просмотр привязок» выберите +добавить условие. Так вы добавите строку с условием на панель «Просмотр привязок».
Откройте выпадающее меню модели просмотра и выберите Пользовательский виджет > Выбрать. Так вы добавите пользовательский виджет в условие.
Нажмите на левое поле, чтобы открыть выпадающее меню привязки модели просмотра.
Выберите Модель просмотра таймера творческого режима > В режиме срочности > Выбрать. При этом в качестве свойства сравнения используется свойство «В режиме срочности», чтобы увидеть, равно ли оно определённому значению, а затем, в зависимости от возвращаемого значения (true/false), запускается анимация.
Измените поле времени на 1.0. Это означает, что, если значение «В режиме срочности» равно 1.0, то значение является истинным (true) и анимация воспроизводится.
Нажмите на правом поле, чтобы открыть выпадающее меню очереди, и выберите Пользовательский виджет > Очередь воспроизведения анимации > Выбрать. Теперь созданная вами анимация встанет в очередь воспроизведения, когда режим срочности будет равен 1.0.
Рядом с параметром В анимации выберите значок привязки, чтобы он стал синим значком ссылки.
Выберите поле В анимации, а затем выберите Пользовательский виджет > Название анимации > Выбрать. Выбранная анимация воспроизводится, если она включена в очередь.
Задайте для параметра Время начала значение 10.0. Это значение задаёт секунду/кадр, с которой должна начать воспроизводиться анимация. Если задано значение 0.0, это означает, что анимация будет воспроизводиться, начиная с анимации на 0.0 секунде/кадр.
Задайте для параметра Скорость воспроизведения значение 0.5. Так анимация будет воспроизводиться в два раза медленнее, чем задано в Sequencer.
Нажмите Скомпилировать, чтобы сохранить пользовательский виджет.
5-й шаг: добавление устройства «Таймер»
Последний шаг — это добавление устройства «Таймер» в окно просмотра и настройка его параметров.
Выберите папку Fortnite > Устройства в Каталоге ресурсов, чтобы открыть все папки устройств.
Введите Таймер в строке поиска в окне ресурсов, чтобы найти устройство «Таймер».
Перетащите устройство Таймер в окно просмотра.
На панели Сведения задайте для параметра Длительность значение 30.0 секунд.
Разверните Расширенные настройки, чтобы увидеть класс пользовательского виджета.
Выберите свой Пользовательский виджетиз выпадающего меню «Класс пользовательского виджета».
Используйте следующие значения во втором блоке Расширенных настроек:
Возможность взаимодействия = Нет
Поведение при завершении = Сбросить
Отображение во время игры = Скрыть
Включить режим срочности = Выбрать
Время перехода в режим срочности = 10.0 секунд
Теперь игроки не смогут взаимодействовать с устройством, а когда таймер завершит отсчёт времени, он будет сброшен. Если режим срочности включён, ваша пользовательская анимация попадёт в очередь и будет воспроизводиться в течение времени, заданного в параметре «Время перехода в режим срочности».
Сохраните изменения, а затем выполните игровой тест проекта, чтобы проверить работу пользовательского виджета в HUD-интерфейсе.
В результате игрового теста пользовательское время должно заменить устройство «Таймер» по умолчанию и воспроизводить анимацию в течение указанного времени.
Самостоятельная работа
Есть несколько способов сделать таймер уникальным для проекта.
Добавьте вокруг TimerText материал, который будет медленно исчезать по мере отсчёта таймера.
Добавьте текстуру, окружающую TimerText, в виде часов.
Переместите таймер в угол, а не в центр экрана.