5 хитростей, которые сделают вашу анимацию лучше

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

Меня зовут Дэйв Блежа (Dave Bleja) из Volnaiskra . В течении последних 3-х лет или около того, я разрабатываю Spryke, захватывающий и глубоко проработанный платформер, о глубоком море и кибер-фише, который исследует подводный мир.

Как единственный член команды, работающий на полную ставку над Spryke, я отвечаю за большинство частей творческого и технического процесса. Некоторые вещи в процессе разработки весьма утомительны, но большая часть работы меня радует. Моя любимая часть — это анимация, и я хочу поделиться с вами некоторыми хитростями, которым я научился в течении этих лет.

Хитрость 1: �?ногда количество залог качества

Как бы там не было, количество никогда не заменит качество. �?, как художники, мы всегда должны стремиться к балансу количества и качества. �?мея и используя представление о том, как анатомия, физика и освещение работают в реальном мире — мы можем улучшить игровую графику, зная, что это никак не повредит результату. Но время от времени, один из наиболее важных строительных блоков для качества — это количество, и это особенно верно в отношении анимации.

На фундаментальном уровне анимация — это о количестве. Аниматор производит сотни неподвижных изображений, которые ютятся так близко друг к другу, что наш ум просто не может их обрабатывать по отдельности, и таким образом создается магия движения. Этот же принцип часто применяется и для анимации, которая много и часто перемещается.

Вот, например, эти пузырьки. Они выглядят хорошо, не так ли? (Конечно же, они из удивительной игры Spryke и вы просто должны пойти и поддержать её на Kickstarter прямо сейчас!

Кликните на изображение чтобы открыть анимированную версию.

На чем я остановился? Ах да, пузырики! Они выглядят хорошо, и сами пузырики выглядят очень просто — это в основном круги. �? в данном случае они выглядят хорошо только за счет их количества. Но количество пузырьков, это еще не все, есть и другие интересные вещи, давайте разберем их:

Кликните на изображение чтобы открыть анимированную версию.

Пузыри имеют различную прозрачность и размер;
Несколько видов форм;
Случайное дрожжание и меньший размер;
Случайное тригонометрическое движение (по кривой);
Разные источники;
Эффект воды, пузырьки разбиты на маленькие группы и реагируют на столкновение с персонажем.

Каждый шаг этого процесса прост (дрожание и движения от действий персонажа используют тригонометрию, но ничего слишком сложного). Каждый из шагов не выглядит особенным и впечатляющим, но когда они все собраны вместе, они позволяют получить убедительный и качественный эффект. Пока мы доберемся до шестого шага, мы уже получим так много вещей, происходящих одновременно, что наш ум будет уже не в состоянии следить за отдельными деталями и компонентами этого эффекта, так как будет наслаждаться единым целым.

Я хочу отметить, что этот прием применим не только к многочисленным объектам вроде пузырей. Прием «количество - залог качества» так же применим и ко многим другим анимациям. Большинство вещей в естественном мире имеют тенденцию двигаться в различных вариациях и часто особенным образом. Если вы будете смотреть за тем, как кто-то стоит на месте, вы сможете наблюдать с десяток различных движений, начиная с моргающих глаз, глотания и просто переступания с ноги на ногу. Смотрите, как кто-то идет и вы увидите не только движение ног или рук, но и то, как почти каждая часть тела или лица двигаются каким-то уникальным образом.

В общем, чем больше вещей происходит в анимации, тем больше она будет казаться живой и интересной. Этот подход так же может применяться и к механическим объектам, например, как эта дверь:

Кликните на изображение чтобы открыть анимированную версию.

Опять же, в этой простой анимации двери происходит около дюжины различных вещей и большинство из них очень просты: части перемещаются вверх или вниз, мигает свет, светящиеся экраны меняют цвет, а так же немного дыма. Но поскольку эти простые движения согласованы и связанны друг с другом (не мерцают и не дергаются резко), они выглядят гармонично и создают более сложное и единое целое.

Степень сложности вашей анимации будет зависеть от метода анимации, который вы используете. Например, анимации на игровом движке вероятно будут ограничены некоторыми возможностями, но у них есть и свои преимущества, например возможность задать вариативность движения и динамическую реакцию на игровой мир, например, как реакция пузырьков на игрового персонажа в примере выше.

В игре Spryke используются в основном заранее отрисованные анимации, которые позволяют настроить сложность поведения сверх того, что доступно в игровом движке. Для создания статических анимаций я настоятельно рекомендую программу Toon Boom Harmony Premium, которая позволяет создавать mesh-анимации.

Не смотря на то, что игровой персонаж состоит из изображения 70x70px, он состоит из более чем 30 движущихся частей, которые взаимосвязанны между собой и контролируются через 250 отдельных узлов. Такой подход позволяет очень точно настраивать движения в различных позах.

Хитрость 2: Некрасивые кадры могут сделать анимацию красивой

Как известно, большая часть анимационной магии происходит на границе между сознанием и подсознанием. Это нечеткое сладкое пятно, где анимация «тает» в вашем подсознании и становится больше, чем просто сумма составных частей. Но в некоторых случаях элемент анимации должен быть строго сознательным, чтобы был эффект.

Чтобы получить больше шарма или захватывающую анимацию, есть хороший способ, к которому ни раз прибегали аниматоры из Warner Bros: «преувеличение кадра». Хитрость тут в том, чтобы выбрать момент удара, быстрого движения или скольжения только в одном кадре, который показывает позу в весьма карикатурном состоянии. Этот кадр может быть не точным или выбивающимся из всей анимации. Но когда он идет в потоке всех кадров, то создает удивительный эффект, который только улучшает всю анимацию.

Кликните на изображение чтобы открыть анимированную версию.

Если разглядывать анимацию с испуганной креветкой замедленно, то можно обратить внимание, как один из кадров выглядит не убедительно и выбивается на фоне остальных кадров. Но при нормальном воспроизведении анимации, этот кадр очень хорошо дополняет и улучшает картинку, добавляя небольшой визуальный эффект толчка прежде, чем креветка спрячется в домик.

Кликните на изображение чтобы открыть анимированную версию.

В этом примере с преувеличенным кадром для coyotebug (это я их так называю в честь Wille E. Coyote!), я намеренно исказил различные части тела так сильно, что иллюстрация в итоге «ломается». Но эти изменения не выглядят так плохо в финальной анимации и как итог этот кадр только усиливает драматизм момента.

Хитрость 3: Размытые кадры могут спасти драгоценные миллисекунды

Чтобы добавить дополнительный шарм анимации, вы можете добавить эффект ускорения или перехода, путем размытия кадра. Этот метод позволяет создавать эффект очень быстрого движения в очень короткий промежуток кадра, что делает эту хитрость идеальной для многих игровых сценариев, где отзывчивость в управлении имеет первостепенное значение.

Вся хитрость заключается в том, чтобы взять два кадра движения: первый и последний, а затем объединить их, добавив эффект размытия для третьего кадра, находящегося между ними.

Но хочу обратить ваше внимание на следующие вещи. Во-первых, размытый кадр должен попадать в композицию между первым и последним кадром. Другими словами, охватываемая площадь размытия должна соответствовать охватываемой площади первого и последнего кадра — это сделает объект в размытом кадре немного больше, чем обычно, но это нормально.

Во-вторых, обратите внимание на мелкие ключевые компоненты вашего персонажа, например на глаза. Если глаза очень далеко друг от друга в начальном и конечном кадре движения, то при создании размытого промежуточного кадра может получиться рваная анимация, потерявшая плавность. Таким образом, в промежуточном размытом кадре следует более сильно размазать глаза, чтобы снизить эффект рваной анимации, как в примере ниже:

Кликните на изображение чтобы открыть анимированную версию.

Этот средний кадр движения выглядит ужасно, если рассматривать его отдельно. Но он позволяет сделать очень быстрый и плавный переход в анимации, позволяя показать, что герой очень быстро зацепился за стену (просто прикройте правую часть изображения вашей рукой, чтобы это проверить!). Смазанный глаз позволяет осуществить плавный переход между двумя позициями тела персонажа.

Хитрость 4: Помните, что девять старых людей никогда не играли в видео игры

Если вы еще не слышали о 12 принципах анимаций, то вы просто обязаны найти немного свободного времени, чтобы прочитать о них. Это замечательные принципы, которые были разработаны мастерами анимации в Disney и называются «Nine Old Men» (девять стариков). Конечно, в игровой анимации некоторые из этих принципов могут быть весьма проблематичными.

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

К сожалению, этот принцип иногда может создавать конфликт в играх, которые требуют хорошего дизайна. Например, когда игроки нажимают прыжок, они хотят, чтобы персонаж сразу прыгнул. �? если мы будем делать несколько переходных кадров перед прыжком, визуально это будет выглядеть лучше, но в конечном результате это негативно скажется на игре в целом (управление будет менее отзывчивым).

Примечание переводчика: В игре Mushroomer существует подобная переходная анимация для персонажа, когда он приземляется на землю после прыжка или падения. Сама анимация выглядит хорошо, но за все время жизни игры я получил массу отзывов о том, что эта пауза мешает игрокам комфортно проходить игру.

Таким образом, во многих играх просто игнорируют эти принципы в некоторых типах анимаций, но используют в других. Рассмотрим красиво анимированную игру Rayman Legends. Обратите внимание, как на картинке ниже Rayman имеет небольшую задержку прежде, чем ударяет о землю и как НПС имеет некоторую задержку прежде, чем прыгает. Но когда дело доходит до анимации прыжков для Rayman, то он теряет свою харизматичную анимацию, и при прыжке мгновенно поднимается в воздух, как будто его что-то потянуло вверх. Не смотря на то, что это выглядит не так естественно, как хотелось бы нам, это улучшает его реакцию на управление и как следствие приводит к лучшим впечатлениям от игры, что наиболее важно.

Кликните на изображение чтобы открыть анимированную версию.

В то время, как прыжки в Rayman являются наиболее отзывчивыми, в оригинальной игре Принц Персии сделали наоборот. Обратите внимание ниже, как персонаж при прыжке на выступ тратит почти целую секунду времени, прежде чем прыгнет. Оно хорошо выглядит, он полностью соответствует реалистичной физике и анатомии, тому как люди прыгают в реальной жизни, но такой подход добавляет задержку и игрок должен ждать действия перед каждым прыжком.

Кликните на изображение чтобы открыть анимированную версию.

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

При анимации прыжка в Spryke, я выработал компромисс, который позволяет добавить немного ожидания не нарушая отзывчивости в управлении. Решение было простым, персонаж прыгает сразу, но при этом анимация имеет небольшую задержку. Таким образом, персонаж демонстрирует небольшую подготовку к прыжку не смотря на то, что он уже взмыл вверх, как только игрок нажал кнопку. Это не так эффектно, как несколько кадров чистого перехода, но я думаю, что это достойная альтернатива.

Кликните на изображение чтобы открыть анимированную версию.

Время и движение этих двух последовательностей одинакова. Обратите внимание, как общая масса персонажа в Spryke подскакивает сразу точно так же, как это делает и не анимированная версия. Тем не менее в её анимации есть ожидание: она немного отскакивает, передавая вес от центра к спине. Это в свою очередь приводит к тому, что антенны и плавники двигаются вперед на несколько кадров, прежде чем они двинутся в обратном направлении.

Однако, стоит заметить, что в то время, как большая часть тела еще позади, мы имеем небольшой переход, когда глаз двигается вперед: он смотрит в сторону прыжка. Я обнаружил что это помогает подчеркнуть её мгновенное движение вверх, в то время, как остальная часть тела демонстрирует некоторые признаки задержки.

Наряду с ожиданием, принцип ускорения и замедления (типа сглаживания) может помешать восприятию игры. Посмотрите на эти две анимации из The Witcher 3:

Кликните на изображение чтобы открыть анимированную версию.

Сложно отрицать тот факт, что анимация слева выглядит лучше: движение более правдоподобное, полное и мужественное, в то время, как движение справа является более рваным и выглядит не реалистично и глупо. Создается впечатление, что миру не хватает какой-то физики. Здесь происходит несколько вещей, но основная из них заключается в том, что уменьшается сглаживание между движениями, и как итог мы получаем результат, как на картинке справа — Геральт легко меняет направление.

Управление на картинке слева было при запуске The Witcher 3. Но из-за многочисленных жалоб CD Projekt Red выпустили обновление, в котором обновили управление, сделав его, как на картинке справа. Когда я впервые попробовал альтернативное движение в своем прохождении, я был потрясен тем, насколько оно нарушило реализм и погружение в игру. Внезапно игра, полная шероховатостей и реализма, стала похожа на аркадную Darksiders.

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

Хитрость 5: Делайте механику, потом анимацию и снова механику

Анимация - это не только оформление игровой механики, анимация принципиально меняет игровую механику.

Чаще всего мы слышим советы: сделайте прототип вышей игры без графики, например, из блоков. Но в эти уродливые блоки не интересно играть, поэтому нужно думать об их украшении, так как в противном случае вы можете ошибиться. Потенциально интересная игровая механика может оказаться не такой интересной с примитивным оформлением, в то время как, получив классную графику, она преобразится.

Примечание переводчика: Меня часто спрашивают, делаю ли я прототипы — обычно отвечаю, что нет. Так как, создавая прототип с использованием примитивов, я не могу оценить его потенциал. Поэтому все мои «прототипы» обычно начинаются с графики и только потом начинается работа над кодом. Не обязательно на начальных этапах использовать эталонную чистовую графику, достаточно набросков или графики близкой к тому, что должна быть в игре. Но, обычно в моем случае графика от начала разработки и до конца не сильно изменяется.

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

На этом этапе я еще не придумал персонажа Spryke, и в итоге дизайн персонажа получился из требований абстрактной игровой механики и этого блока. Еще на раннем этапе стало ясно, чтобы получить гибкие и чувствительные движения, должен быть маленький квадрат примерно 50x50px. Так что, когда настало время разработать персонажа, мы знали, что он должен быть небольшой и шарообразный, чтобы он мог легко разворачиваться в любых направлениях.

Мы прошли через множество итераций дизайна, прежде чем характер и личность персонажа начали принимать форму, и только потом я приступил к анимации её движений. Но потом случилась интересная вещь: плей-тестеры начали замечать, что ранее механика была лучше. Они также отмечали, что и настройки управления были лучше. Дело в том, что механика не изменилась — вообще ничего не изменилось за исключением анимации. Я осознал, что мое представление об игровой механике всегда включало виденье того, как это все будет выглядеть с анимацией, в то время как плей-тестеры всегда играли без этого.

Вы можете увидеть разницу на картинке ниже. Без анимации персонаж Spryke выглядит и чувствует себя, как шар для боулинга. Она прилипает к потолку, как будто намагниченная, и создается ощущение глухих звуков, когда она прыгает. А сам прыжок будто имеет искусственную параболу. Но когда точно такое же движение оживляется анимацией, то Spryke становится более жидкой и проворной. Её прыжок кажется более естественным, может даже возникнуть ощущение более длинного прыжка и она будто скользит по земле после прыжка.

Кликните на изображение чтобы открыть анимированную версию.

С технической точки ничего в механике не изменилось, все осталось прежним. Но анимация изменила ощущение игры и игра будто стала другой. Поскольку анимация так влияет на ощущение игры, не следует останавливать процесс настройки игрового мира на стадии прототипа. А после добавления анимаций в игру следует так же продолжать настраивать игру, чтобы все смотрелось гармонично.

В нашем же случае, большая часть анимаций движения Spryke сразу смотрелись хорошо. Небольшим исключением являлась лишь механика «замедления». Spryke всегда имела механику «замедления», которая позволяла замедлить падение, чтобы избежать опасность или достичь платформы. Но как только мы добавили анимацию пузыря, он взял на себя слишком много внимания. Механика «замедления» стала сильно отличаться о того, что было изначально, и это уже не выглядело так хорошо, как раньше. Если добавление анимаций дало другим игровым механикам эффект снижения скорости и плавности, то новая анимация пузыря просила для себя иного поведения: большей легкости и плавности.

В итоге мне пришлось переделывать механику «замедления» с нуля. Я создал новый компонент для физики, который позволял махом, как будто на воздушной подушке, использовать свой импульс, чтобы двигать персонажа. Новый пузырь имеет очень хорошую чувствительность, я даже не знаю, как это описать, могу только сказать, что… он очень плаавный.

На данный момент мыльный пузырь является одной из самых уникальных возможностей в Spryke и одним из самых приятных в основной механике игры. �? эта возможность родилась впервую очередь от анимации! �?ли точнее, он родился от процесса, который был пройден от идеи пузыря и до его внедрения в игру. Первое механика, второе анимация, третье механика.

Кликните на изображение чтобы открыть анимированную версию.

Хорошо, это все! Я надеюсь, что мои советы окажутся полезными для вас, и вы воспользуетесь ими! А если вам понравилось то, что вы видели на картинках, пожалуйста поддержите нас на Kickstarter — нам нужна ваша помощь, чтобы закончить Spryke!

Оригинальная статья: «5 tips to make your game animations better» Вольный перевод, Антон Карлов