Анимация интерфейсов
Вы знаете что интерфейс, неотъемлемая часть игры. Одна из основных и очень важных . Потому что игрок начинает знакомство с игрой именно через интерфейс, его удобство и интуитивность. А также он хочет чувствовать с ним взаимодействие и отклик интерфейса на свои действия.
Друзья, мы хотим показать Вам основные инструменты создания красивой интерфейсной анимации. Начиная от простых движений, до их комбинирования. Расскажем о тайминге и спейсинге, и как при их помощи придать характер анимации.
Единицы измерения анимации на временной шкале.
В производстве кино и мультипликации используется такое понятие как FPS (кадры в секунду). Где кадр это “единица времени” дробления секунды. Это связано с процессом производства, а так же с тем, что видео файл это последовательность спрайтов с фиксированной частотой. И используется один из стандартов fps -12, 24, 29, 30, 60
Линейное движение - это равномерное движение, равное положению в каждой секунде времени.
- Движение - Самое простое действие линейное прямое движение. Справа налево, с лева направо, вверх, вниз, по диагоналям.
- Прозрачность - Появление или выведение объекта из альфы самый простой способ смягчения начала и конца анимации
- Скейл - может быть: пропорциональным (увеличение), непропорциональным (сплющивание). При смещении центра деформации, объект можно скейлить относительно центра, относительно правого/левого/нижнего/верхнего края добиваясь эффекта взаимодействия с поверхностью.
- Диоганальная деформация (переворот карты). Используется в специализированных программах для анимации где поддерживается такой инструментарий, таких как Spine, Adobe Animate, Aftereffect, Moho. Программно на движке лучше не использовать.
- Вращение - вращение может быть полным или не полным. Также путем изменения центра деформации при смещении его к краю, можно добиться эффекта вращения относительно ребра. А при вынесении ее за пределы объекта - создать маятниковые колебательные движения, и движение по дуге
Тайминги и Спейсинги - для создания живых, реалистичных, динамичных движений
- Тайминг, движение объекта во времени.
Скорость объекта можно увеличить уменьшением времени или увеличением пройденного расстояния.
Настройками тайминга для нескольких объектов достигается такой эффект как параллакс.
Принцип следующий, за одно и тоже время объекты проходят разное расстояние. Объекты ближе к нам - проходят расстояние больше. Те что дальше от нас - меньше. Элементы на горизонте могут быть неподвижными.
Это пример движения с одинаковым временем но разной длиной пути - Параллакс
- Спейсинг (ускорение замедление, кривые скорости)
Это инструмент регулирования динамики движения элементов. Ниже приведены примеры кривых и их описание.
График линейного движения
График замедления
Используется если нужно сделать появлении предмета на сцене, так как к конце движения он замедляется что придает мягкость движению. Либо при торможении вращения.
График ускорения
Если нужно создать эффект нарастающего ускорения - хлесткий эффект. Это позволяет хорошо разглядеть элемент в начале движения объекта. Потому используется при убирании предмета со сцены. Либо при разгоне вращения.
График маятника
Данная кривая отображает плавный разгон в начале, ускорение в середине и замедление к концу движения. Хорошо применяется для создания колебательных, пульсирующих, маятниковых движений, создания эффекта инерции и массы.
Составной спейсинг
Нужно упомянуть о возможности разделения кривой спейсинга во времени. Это делается в тех случаях когда начало и конец движения должен иметь строгие характеристики. Для этого условно разделяем нашу кривую на три части.
1.Ускорение
2.Линейное движение - это движение можно регулировать по времени создавая произвольную продолжительность
3.Замедление
Разумеется каждый из этих кусков кривых можно исключать оставляя например только ускорение и линейное движение, или ускорение и замедление, или линейное и замедление. В зависимости от желаемого эффекта.
4. Отскок. Мячик подлетая к верхней точке замедляется. Кривая замедления.
Можно пропустить фазы Деформация сжатия и Возвращение формы. И тогда мячик будет не эластичный. Или же наоборот добавить деформацию вытягивания при отскоке и сжатия в верхней точке, добавляя ему большую эластичность.
Так же при помощи разной настройки тайминга и спейсинга можно добиться разных эффектов анимации для анимации мяча, показать массу упругость.
1. Большой легкий мягкий шар
2. Средний мяч упругий с деформацией при соударении с поверхностью
3. Маленький твердый мячик, не деформирующийся при столкновении
Комбинирование нескольких действий анимаций
Такие действия как: движение, вращение, скейл и действие с прозрачностью можно комбинировать в произвольном порядке создавая различные вариации.
- Двежене и вращение
- Движение и скейл
- Движение и прозрачность
- Скейл и вращение
- Движение скейл и вращение.
При этом применяя кривые Спейсинга, замедляя или ускоряя анимированный элемент.
Так-же нужно отметить, что такой инструмент как скейл и диагональная трансформация могут быть недоступны в движках. А потому нужно уточнить возможности платформы, или воспользоваться программами для специализированной анимации которые можно подгрузить в движок (такие как Spine).
Когда анимация вращения идет со смещением по отношении анимации движения
Несколько основных правил для создания “живой анимации”
Инерция - объект не останавливается сразу используется кривая замедления
Масса - тяжелые объекты более медлительные, не обладают отскоком. При взаимодействие с более легким объектом, отталкивают его. Тяжелый предмет продолжает движение.
Анимация интерфейсов несет несколько предназначений.
(Для чего нужны анимации в интерфейсах)
1. Визуальное.
Анимирование элементов интерфейса и фона усиливают графические художественные эффекты всей сцены. А это может иметь как положительный так и негативный эффект.
Связано это с тем, что человеческое внимание акцентируется прежде всего на движущиеся и сверкающие объекты.
2. Положительный эффект - эффект Акцента
Акценты в диалогах.
Самый простой способ использование акцента в диалогах это смена эмоций персонажа, но в таких случаях если добавить реакцию бабла на смену реплики картинка будет смотреться намного живее. Причем используя этот прием можно обойтись иконкой без сильной прорисовки персонажа. Не редко в рамках одной игры используют оба способа. В одном случае чтобы делать акцент на событие встречи, какого то важного диалога. В другом акцентируя внимание только на сообщение.
Если же мы добавим анимацию на главных персонажах диалога, то вы заметите что внимание будет отвлекаться именно на него, это особенность нашей психики, цепляться взглядом за движущимися элементами. Такие окна интересны тем что порой достаточно
просто эстетического созерцания
Акцент на точку клика.
Распространен в туториалах, и логично используется для того, чтобы дать освоиться с интерфейсом управления игрой. Игрок интуитивно тянется к точке клика и исключается возможность блуждания игрока по кнопкам интерфейса. Часто бывает что в рамках туториала игроку не позволяется выполнять какое либо действие кроме предписанного
Акцент
Акцент в акциях может делаться, как за счет анимации эффектов, подсвечивания или периодического пульсирования. Это можно делать сторонними программами эмитации частиц, спайн анимации, так и програмно, используя общие правила анимации
3. Информативность
Движение элементов могут создавать следующие ощущения эмоций. Существует несколько рекомендаций но не правил, так как смысл их может меняться от обстоятельств.
Цитата из книги “ Frain Inc” Marcos Mateu-Mester
Вот перечень направлений движений и их характер:
- Активное и стремительное вперед, к действию - слева направо
- Отступление, ослабление, - с права на лево
- Победа, усиление, восхождение - снизу вверх
- Поражение.- Сверху вниз.
Для сравнения ощущения движения поменяем направление
Тут чувствуется вектор вверх и тяжесть вниз
Также хочу обратить внимание, что современные игры часто пользуются принципами разработанными в казино. Это когда не делается акцент на поражение или проигрыш. Акцент делается только на позитивную эмоцию, только на выигрыш.
Любое из этих ощущений можно усилить изменением размера элементов.
(это не обязательное действие, но в особых случаях дает дополнительный эффект)
- Придание важности, Значения и усиления - делается увеличением элемента.
- Уменьшение важности, ослабление, уничтожение - его уменьшением
Анимации окон
Появление окон
Можно разработать стандартные анимации для типичных кнопок, это могут быть засветки при клике, или скейл с инерцией, или сдвиг, смена цвета. Также стандартные анимации появления окон: одновременные, каскадом, хаотичное. А также сворачивания окна. Разработан эти анимации из применяют шаблонно ко всем подобным элементам игры.
Или раздельны, что может придать динамику и живость всей анимации, эффект каскада.
Обратите внимание, что анимации элементов лучше разделять по времени. Последовательность намного легче читается взглядом, чем движение в общей куче.
Не является правилом то что все анимации интерфейса должны быть “мягкими”, если мы хотим придать твердость поведения то смягчение в движении не нужно, как в примере ниже
Без смягчения к концу движения
И наоборот придавая инерцию к движению объектов им придается мягкость и воздушность.
Со смягчением в движении
Возможны разнообразные способы анимаций окон, и тут нет ограничений фантазии. Главная задача гармоничное соответствие стилю игры.
Реакции кнопок
Кнопка - это объект со своей массой, эластичностью, объемом, инерцией. Потому на неё распространяются те же правила. Кнопки в игре могут иметь свой дизайн и визуально выглядеть как иконки. Стоит остановиться на основных ее стадиях.
- Стадия появления (0,2-0,5 sec) - кнопки появляются вместе с интерфейсом и являются составной его часть. Но их нужно разделить на две категории. Простые - на них создаются простые шаблонные анимации без излишеств. Особые - этим кнопкам можно добавлять индивидуальный эффект с дополнительным акцентом в конце появления.
- Стадия покоя (0,5 - 1,0 sec)- здесь нужно разделить кнопки на два типа. Простые - у них анимации стадии покоя отсутствует, так как нет необходимости делать на ней акцент и напоминание. Особые - кнопки различных акций, магазинов, подсказок или особых событий. Помимо того время от времени можно добавлять эффект блика или ненавязчивой анимации, или того и другого. Для напоминания ее существования и важности.
- Стадия наведения - присутствует в интерфейсах для ПК, так как для ее активации нужен курсов. Анимация наведения добавляет ощущение отклика интерфейса на на действия курсора, делает его живым
Стадия клика - это реакция на нажатие.. Стоит разделить на анимации для простых кнопок - стандартизированная анимация для всех кнопок своего типа. И особых - клик на которую может сопровождаться проигрыванием дополнительной или сопровождением эффектов.
- Анимацию клика можно сделать двумя способами: на отпускание - это не анимация а состояние которое держится пока не отпустишь кнопку; и клик - когда на нажатие идет действие или проигрывается анимация Продолжительность действия кнопок на нажатие должно быть 0.2 - 0.3 (sec) в зависимости от динамики самой игры
Для простых кнопок одного типа следует разработать один единый стиль анимации для всего проекта.
Закладки и категории
Это разновидность кнопок, а потому имеет те же стадии: появление, покоя, наведения и клика. Различие лишь в том, что данная кнопка визуально является частью “списка”, который как правило закреплен в окне. Тогда как содержимое этого “списка” (иконки, кнопки) могут быть такими же активными и так же реагировать на наведение и клик.
Тут несколько примеров
Один из способов закладки - это переворачивание карты.
Он очень лаконичный и не занимает много места на экране
Прогрессы заполнения
Выделим немного отдельного времени на прогресс бар. К нему применяются все те же правила спейсинга, и реагирование на достижение уровня. При этом реакция достижения уровня, может быть автоматической после проигрывания заполнения.
Или ожидать скликивания, фиксируя полученный статус.
WOW - эффект
Эффект важного, особенного события. Наиболее яркого, отличающегося от других. Он несет в себе все перечисленные выше усиленные пункты: Визуальные, Эффект Акцента, Информативность.
Анимация эффектов/FX анимации - эти анимации могут делаться в разных программах и разными способами. Их задача создать WOW эффект для эпических окон, особых элементов, шлейфов. Их тайминг может длиться от 1-3 sec
Для украшения анимации и придания особенного характера использует принцип:
Подготовка к действию - Действие - Последействие.
- Подготовка - (намек на следующее действие)смысл в том, чтобы до начала действия подсказать намерение действия. Самый простой пример это замах, или перед тем как тронуться с места автомобиль сначала заводится и откатывается. Подготовки могут быть простыми-односложными, или состоять из нескольких действий пример -глянул , глубоко подышал, потом действие. То есть каждое из действий нужно разделять по времени и не пытаться их проиграть одновременно.
- Действие - это само движение с необходимой динамикой.
- Последействие - конечная анимация, фиксирующие само событие. Самое простое шарик после торможения может прокатиться немного вперед а потом немного откатиться, или сделать деформацию с возвращение объема.
Если “Подготовка к действию” и “Последействие” достаточно выразительные то в некоторых случаях можно обойтись и без самого “Действия”.
Переходы между сценами.
Перечислим несколько способов:
Шторками - когда создаем перекрывающую текстуру, которую раздвигаем
Анимация перехода может быть более сложная, например:
Тут прослеживается правило подготовки действия, действие, последействие.
1.Подготовка накапливание энергии
2.Действие - эффект полета энергии через карту
3.Последействие сборка окна интерфейса
- Целью материала было донести, что все сложное состоит из набора простого
- Главное понять и почувствовать принципы. А творческая реализация лежит на вас.
- Советуйтесь с разработчиками и аниматорами, интересуйтесь допустимым инструментарием
- Не изобретайте велосипед там где уже есть рабочие приемы
- Создавайте шаблоны для оптимизации процесса
- Делайте анимации живыми но не навязчивыми
