Эффекты и анимации UI
Меня зовут Костя Грязнов, я Lead VFX Artist в Playrix. Я расскажу про наполнение UI жизнью по опыту работы в мобильном геймдеве.
Что я понимаю под анимацией и эффектами конкретно в этой статье:- Анимация — перемещение, геометрическая трансформация объекта во времени. Например, пульсация кнопки, выезжание панели из-за экрана, рост цифрового счетчика
- Эффект — привлекающая внимание вспышка, след от летящего предмета, изменение цвета UI элемента
Для удобства в данной статье я не буду всегда писать целиком «анимация и эффект».
Я считаю важным вначале передать образ мыслей. Практические советы тоже есть — они в конце статьи.
Что такое эффект UI
Для чего мы анимируем UI? Мы показываем игроку, что что-то изменилось, или привлекаем его внимание к элементу. Например, когда дарим монеты за успешное прохождение уровня, открываем ранее недоступный контент, говорим «нажми сюда» или просто показываем, что панель интерфейса реагирует на нажатие. Игрок не увидит смену состояния, если она произошла мгновенно. Наша задача — помочь ему обработать информацию.
Анимация и эффект не существуют вне контекста. Прежде чем что-то анимировать, это что-то уже должно быть. Отсюда же берутся и приоритеты: даже самый красивый эффект должен помогать игроку, а не мешать разглядеть происходящее на экране. Не стоит делать эффект ради эффекта.
Но и совсем обойтись без анимаций и эффектов не получится. Можно представить игру, в которых их нет, — она будет работать, но играть в нее будет неудобно. Игрок не поймет вовремя, когда у него закончатся жизни или какую награду он получил за прохождение уровня.
Как нельзя подготовить хороший UI, не думая про UX, так и с эффектами и анимациями. В первую очередь мы думаем об удобстве игрока. Посмотрим, что же игроку хорошо, а чего следует избегать.
Удержание визуального фокуса
Мы привыкли к нашим органам чувств. Это просто, потому что мы никогда не пользовались другими. Нам кажется, что у нас хорошее зрение и быстрые мозги. Это не совсем так.
Область человеческого зрения очень мала. Чтобы рассмотреть любое изображение, приходится постоянно вращать глазами. Попробуйте прочитать подзаголовок этого параграфа, не убирая глаз с буквы «У».
Игроку некомфортно долго смотреть в одну точку. Зрение пресыщается, и игрок стремится перевести взгляд дальше.
Наконец, внимание игрока рассеивается, если мы надолго отбираем у него контроль. Игрок пришел играть, он хочет взаимодействовать с игрой. Для просмотра есть другой контент.
Все это говорит о том, что внимание игрока — очень ограниченный ресурс и относиться к нему нужно бережно. Как это применить на практике:
- эффект должен быть настолько быстрым, насколько это допустимо без ущерба качества;
- в один момент времени проигрывается один эффект (если нет явной задачи показать что-то одновременно);
- если нужно показать несколько эффектов, их нужно показать последовательно.
Как определить эту последовательность?
Смысловые приоритеты
В первую очередь мы должны решить, что важно для игрока. Это уникально для каждой игры. Но существуют и общие приемы, которыми можно пользоваться. Например, использовать логику направления. Мы можем представить, как игрок будет смотреть на интерфейс, то есть построить траекторию движения его глаз. И если сделать эту траекторию простой, то игроку будет проще воспринимать игру.
Это окно брифинга игры Homescapes. В играх-сервисах неизбежны ситуации, когда в UI добавляются элементы, которые не были туда заложены изначально. Это окно не всегда выглядит так перегружено — только при совпадении нескольких игровых событий. Перерисовать все окно — слишком дорого. Значит ли это, что совсем ничего нельзя улучшить?
Вот так выглядит траектория взгляда, если мы хотим провести игрока через абсолютно все UI элементы. Это очень неудобный и громоздкий путь. Решать проблему в лоб необязательно. Достаточно выбрать общее направление — в данном случае слева направо. Так воспринимать окно уже проще.
Логика значения
А это окно статистики. Игрок стремится покинуть его как можно быстрее, поэтому вся информацию показывается здесь скопом и не разносится во времени. Зато главная награда подчеркнута жирным эффектом свечения — ее трудно не заметить. Получая звезды, игрок двигается дальше по сюжету. Все остальное для него вторично — там не нужен акцент.
Awareness (Последовательность/Связность)
Проще всего этот принцип описать так: эффект должен «знать» про своих соседей. Если серьезнее — при разработке мы должны учитывать все, что произошло до момента запуска эффекта и произойдет после него. Это добавляет ощущение цельности происходящего.
Обратите внимание — в левом варианте медаль «не знает», что по ее прилету заполнится прогрессбар, а сам прогрессбар «не знает» точное время прилета медали — его реакция запаздывает. В правом варианте изменена траектория, теперь летящая медаль «пинает» прогрессбар — передает ему свою энергию движения.
Кстати, подробнее об энергии в эффектах можно почитать в книге Elemental Magic by Joseph Gilland.
С теорией разобрались, перейдем к практическим советам.
Практические приемы
Изинги
Изинг — это функция интерполяции значения между двумя анимационными ключами. Если проще — изинг ответственен за то, какое значение примет параметр в местах, где аниматор не поставил ключ. Я думаю, многим знакома примерно такая гифка.
Изинг — это самый важный и сильный инструмент, на который все привыкли не обращать внимания. Однако неправильно выбранный изинг — это практически полностью неправильная анимация.
Первый пример – анимация, где ключи интерполируются линейно. Второй – анимация с настроенными изингами. Количество полностью совпадающих кадров? Пять. При 60fps и длительности анимации в секунду это означает, что объект находится где-то не там 91% времени.
Хорошая анимация невозможна без настроенных изингов.
Чем плохо линейное движение? Развернуто об этом написано тут. В рамках статьи я лишь кратко отмечу, что это не то, как наш мозг привык обрабатывать движения.
Линейный изинг все еще можно использовать, если такова ваша задумка и вы знаете, что делаете. Но для обучающей статьи я буду считать, что это не так :)
Изинг может быть разным.
Не всегда достаточно просто налепить базовое сглаживание. Но и необязательно настраивать каждый отдельный изинг — можно пользоваться пресетами, ничего плохого в этом нет. Вот пара сайтов шпаргалок:
- https://easings.net/ — обратите внимание на разницу между easeInOutSine и easeInOutQuint. Мой персональный фаворит — easeCubic. Не слишком линейно, но не слишком резко.
- https://cubic-bezier.com/ — кубические безье редко используются в играх из-за сложности вычислений. Но этот сайт может пригодится тем, кто работает в AE- или 3D-пакетах. Для АЕ очень рекомендую Flow.
Псевдо MotionBlur
В детстве, на уроках алгебры, мы часто решали задачки вроде «машина едет со скоростью V, скажите, в какой точке S она окажется через время T». Это математическая абстракция, с которой нам приходится работать и в играх.
В реальности локализовать объект в единичный момент времени невозможно. Мы можем лишь увидеть какой-то его отрезок. Это хорошо знают фотографы, которым нужно настраивать выдержку перед тем, как сделать снимок.
(Это не просто фотографический эффект. Если вы когда-нибудь из окна одной электрички смотрели на встречную, то, я думаю, вам было бы нелегко указать конкретное положение людей в ней. В всяком случае, для меня их позиции размазаны этак на длину 20 метров.)
Если мы не будем использовать моушен блюр, то быстрые движения объектов на экране будут выглядеть отрывисто, с резкими перескоками. Вы никогда не задумывались, почему в играх стандарт 60fps, но мы спокойно смотрим кино с 24 и не жалуемся на тормоза? Моушен блюр.
Одна беда: блюр — дорогая операция, и даже в ПК-играх его используют редко, что уж говорить про мобильные. Но его можно подменить имитацией: для этого объект нужно искажать по направлению движения и параллельно делать немного прозрачным.
Это, кстати, тот же самый прием, который на полную используется в Overwatch.
Заключение
Спасибо за уделенное время! Это моя первая статья подобного рода, и уверен, что многое осталось нераскрытым. С радостью отвечу на ваши комментарии.