Модульная анимация (или «твининг») – уникальный метод создания двухмерной анимации для видеоигр, поскольку он обладает рядом преимуществ 3D-анимации, таких как возможность корректировки персонажей на более поздних этапах производства с помощью вращения и изменения положения жестких 2D-мешей (сеток). Такой гибридный метод позволяет в очень большой степени сократить расходы на производство по сравнению с ручной отрисовкой, хотя и несколько ограничивает доступную выразительность по сравнению с покадровой 2D-анимацией.
Модульная анимация предполагает анимирование плоских изображений и скелетов со скинами, а также перемещение, вращение и масштабирование плоских двухмерных мешей. (Публикуется с разрешения компании Esoteric Software.)
Персонажи при этом изначально рисуются в отдельной программе типа Photoshop, в идеале – в нерабочей позе ожидания, наиболее подходящей для геймплея, а затем разрезаются на составные части для риггинга в анимационной программе типа Spine. По мере необходимости можно рисовать и добавлять новые составные части персонажа – например, когда первоначальный набор не позволяет воссоздать желаемое движение только за счет вращения (как правило, когда требуются повороты или радикально разные выражения или позы).
Когда для проекта будет создано больше персонажей с похожими наборами движений, будет легче предугадывать, какие модульные части потребуются для оживления персонажей, но в начале необходимо запланировать время на создание дополнительных ассетов. Как и в случае с 3D, если художник по персонажам не выполняет также и роль аниматора, нужно продумать бесперебойный рабочий процесс, при котором аниматор предварительно готовит новые ассеты для временного использования, пока не будет создан окончательный вариант.
Послойная анимация
Один из очень полезных методов анимации благодаря своей относительной простоте и виду только с одного положения камеры представляет так называемая послойная анимация. При этом создаются полупрозрачные слои, на которых друг за другом рисуются различные кадры, подобно тому как создается анимация во флипбуке при перелистывании страниц; также этот метод похож на традиционную мультипликацию с использованием лайтбокса. В большинстве программ DCC для создания 2D-анимации количество кадров, следующих друг за другом до или после текущего, бывает разным. Лучше всего послойный метод работает при создании промежуточных кадров для вставки между уже заданными ключевыми позами, так как при этом можно следить за направлением и развитием движения.
Послойный метод помогает отрисовать кадры до или после текущего и проследить за развитием движения
При этом настоятельно рекомендуется начинать новую анимацию с уже созданной позы ожидания (или анимации, на основе которой разрабатывается текущая), чтобы не выходить за рамки модели и обеспечить единство пропорций и объемов. Независимо от ситуации послойный метод лучше всего работает с линейным рисунком или силуэтами, потому что при наложении нескольких кадров друг на друга будет трудно разглядеть множество мелких деталей. Кроме того, этот метод лучше использовать для крупных движений, а не для мелких тонких и точных, так как в последнем случае изображения почти сливаются друг с другом и становятся неразличимыми.
Изометрические спрайты
Изометрические игры – отличный способ добиться визуально впечатляющего эффекта «искусственной трехмерности», оставаясь при этом в рамках двухмерного изображения. Несмотря на то что тайлы окружения становятся при этом сложными, требующими более сложного размещения и упорядочивания, сам процесс создания таких тайлов не слишком отличается от создания собственно двухмерных.
При создании изометрических тайлов ориентируются на один из небольшого набора углов, позволяющих создать ортогональное (неперспективное) отображение пространства с определенного ракурса камеры. Эти углы следуют друг за другом с определенным приращением (как ступеньки лестницы).
Изометрические игры, такие как Syndicate (1993 г.), стали одними из первых, в которых еще до появления трехмерных изображений можно было более полноценно исследовать мир. (Публикуется с разрешения Electronic Ar
Пиксельные линии под разными углами, подходящими для изометрической проекции лучше или хуже (обозначено красным). Хорошо выглядят только углы, не требующие дополнительного сглаживания для отображения линий
В начале проекта нужно выбрать один ракурс, который будет сохраняться на протяжении всего проекта для каждого художественного объекта. Обычно этот ракурс основывается на графических проекциях, указанных в таблице ниже.
Ракурс
В то время как обычные 2D-спрайты рисуются один раз и переворачиваются по горизонтали, чтобы охватить оба направления, изометрические спрайты часто требуют как минимум двух версий для каждого движения, чтобы предусмотреть случаи, которые направляются наверх и вниз; затем эти спрайты отражаются влево и вправо. В некоторых случаях приходится создавать спрайты с учетом восьми направлений (всего пять уникальных версий до зеркального отражения). Таким образом, от выбранной проекции зависит объем работ. Настоятельно рекомендуется использовать какую-либо 3D-превизуализацию или референс камеры для эмуляции выбранной проекции проекта.
Снятый референс для игры The Banner Saga и его изометрические проекции с пространственным ориентиром. (Copyright © Stoic.)
Настройка камеры для 3D в программах DCC достаточно стандартна и осуществляется с использованием приведенной выше информации об углах наклона, однако для получения реальных кадров придется потрудиться. Попробуйте нарисовать на полу сетку, соответствующую масштабу и углу наклона выбранного вами размера тайла. Так вы получите дополнительную информацию о расстоянии, потому что персонаж во время действий будет перемещаться на разное расстояние. Современные изометрические игры – отличная возможность воспользоваться ротоскопированной 3D-анимацией для создания качественной, но постоянно повторяющейся (для каждого угла) 2D-анимации.
Надежный метод определить качество изометрического спрайта, особенно если рисовать его не по референсу, – это метод «разворота». Начиная с позы ожидания, нарисуйте движения в четырех или восьми направлениях, а затем последовательно зациклите их, чтобы создать анимацию поворота на месте. Так можно мгновенно выявить все области, в которых персонаж отображается непоследовательно или не соответствует модели под разными углами.
Хитбоксы игры Streets of Rage 4 выделены красным, а «хёртбоксы» – зеленым. Для регистрации попадания требуется дополнительная проверка ног, потому что персонажи должны находиться в одной плоскости глубины. (Публикуется с разрешения DotEmu.)
«Хитбоксы» и «хёртбоксы»
Аналогично трехмерным коллижн-моделям для 2D-анимации рисуются фигуры (точнее, вводятся их координаты) вокруг частей тела и прочих элементов, обозначающие области, в которые наносятся атаки («хитбоксы») и которые получают урон («хёртбоксы»). Эти же фигуры представляют собой модели столкновения с элементами окружающей среды. Если хитбокс пересекается с хёртбоксом, то в этой области регистрируется попадание с нанесением урона. В зависимости от сложности игрового процесса (например, если от атак можно уворачиваться), в одном кадре может располагаться множество различных «боксов», в той или иной степени соответствующих изображению спрайта, но во время игры все они невидимы для игрока.
Хитбоксы обычно активируются на первом кадре анимации, в которой должна регистрироваться атака (например, анимации вытянутой руки), и действуют только до тех пор, пока хорошо читается отложенный удар, поэтому помимо их размещения требуется тщательная синхронизация. Хитбоксы могут содержать различную информацию, например о приоритете атаки, когда, скажем, в случае обмена ударами одни атаки проходят, а другие нет. Размещение и тонкая настройка хитбоксов и хёртбоксов – важная задача в играх с элементами PvP (в которых игроки могут нападать друг на друга), в которых смещение даже на пиксель может повлечь за собой огромное преимущество в силе.
Чтобы избежать тех неприятных случаев, когда игрок получает разочарование от игры, потому что, по его мнению, нанесший урон удар на самом деле не попал по цели или наоборот, важно, чтобы модели столкновений и урона максимально соответствовали нарисованному изображению спрайта. При этом во многих классических играх хитбоксы обычно ограничивались размерами всего тайла и оставались в определенных границах, что позволяло упрощать столкновения.
Помимо атак, хит-боксы используются и для различных других элементов геймплея, таких как столкновение с окружением (в том числе и с опасными элементами), запуск события по прикосновению игрока к предмету (например, золотой монете или «бонусу») или при преодолении определенной точки (например, при прохождении игроком финишной черты).
Анимация фона
Отличный способ оживления двухмерного мира – вставка фоновой анимации. Обычно она принимает форму неинтерактивных спрайтов, накладываемых на статичные тайлы или изображения. Для создания более классических визуальных образов, а также для стандартизации дизайна уровней и экономии памяти фоны часто создаются с помощью повторяющихся тайлов.
Спрайты фоновой анимации, как и персонажи, идеально вписываются в одну и ту же метрику тайлов. Даже в современных 2D-играх фоны обычно создаются с помощью повторяющихся ассетов, легко сочетающихся друг с другом, поэтому фоновые анимации создаются аналогично анимациям персонажей с той лишь оговоркой, что они должны легко интегрироваться с другим фоновым оформлением. Чтобы облегчить эту задачу, лучше всего начать со статичного элемента фона, вырезать его по размеру тайла, который минимизирует объем памяти, и создать дополнительные кадры для зацикливания изображения.
Если фоновая анимация не является самостоятельной, а представляет собой часть повторяющегося паттерна – например, повторяющиеся тайлы с текущей водой, а не колыхаемое ветром одиночное дерево или куст, задача усложняется, поскольку края анимированных тайлов должны совпадать так, чтобы движение продолжалось и за пределами отдельного тайла. Простейший пример – конвейерная лента, подвижные элементы которой входят с одной стороны тайла и уходят с другой, так что при последовательном размещении нескольких тайлов движение кажется общим по всей длине размещенных тайлов. Для удачной работы такой системы и правильного отображения движения движущиеся пиксели должны пропорционально соответствовать размеру тайлов. Например, тайл размером 16×16 пикселей может иметь четыре элемента детализации по 4 пикселя, два элемента по 8 пикселей или один по 16 – в этом случае движение будет синхронизироваться по элементам при выходе из тайла и при входе в него.
Анимация тайлов конвейерной ленты. Для удачного создания цикла элементы, покидающие тайл с одной стороны, должны появляться с противоположной стороны
Если в вашем художественном стиле используются ровные цвета без градаций, то движение можно показать на большом пространстве, выбрав для движения только отдельные части тайлового фона – это еще один способ сэкономить память и создать дизайн в духе минимализма. Например, небольшой голубой пруд можно анимировать только по краям, создавая впечатление, что вода плещется там, где она встречается с сушей, но зритель будет ощущать движение воды по всей поверхности пруда. Общее движение можно подчеркнуть дополнительными подвижными элементами по всему пруду – например, покачивающимися кувшинками.
В стилизованном пруду для создания общего впечатления движения достаточно анимировать отдельные элементы
Когда речь идет о движущемся фоне, то лучше придерживаться принципа минимализма – не только ради экономии и сокращения объема работ, но и для того, чтобы фоновое движение не притягивало взгляд и не отвлекало от ключевых элементов геймплея. В зависимости от типа игры игрок должен иметь возможность охватить взглядом весь экран и отличить интерактивные элементы, такие как враги, от чисто эстетических. Отвлечь внимание от несущественных деталей помогают более приглушенные палитры по сравнению с палитрами спрайтов персонажей и врагов.
Параллакс-скроллинг
Хотя игровой аниматор в большей степени занимается анимацией, чем программированием, он в той или иной степени должен иметь какое-то отношение ко всем элементам игры, связанными с движением. Один из таких элементов – так называемый параллакс-скроллинг, или «параллаксная прокрутка», когда объекты, находящиеся на разном расстоянии от глаз зрителя, движутся с разной скоростью. Этот метод довольно успешно использовался со времен 8-битных приставок, позволяя придавать глубину статичным фонам. Согласно этому методу фоновые изображения или тайлы перемещаются («прокручиваются») с разной скоростью в направлении горизонтальной или вертикальной оси стандартной игровой плоскости, причем общее правило гласит: чем дальше изображаемый объект от точки обзора, тем медленнее движение. И наоборот, элементы переднего плана должны двигаться быстрее. В зависимости от количества различных слоев/скоростей, параллаксный скроллинг позволяет передавать различные ощущения перемещения по обширным пространствам даже в двухмерной игре.
Разные слои отрисованной двухмерной сцены движутся с разной скоростью, создавая впечатление глубины за счет эффекта параллакса
Реже встречается уникальный эффект вращающейся/поворачивающейся камеры, когда слои фона движутся в направлении, противоположном направлению движения объектов переднего плана и геймплея. Такой эффект может сбить с толку, если не дать игроку понять, что именно происходит – например, можно разместить в центре экрана какой-нибудь вращающийся элемент вроде башни или колонны с анимацией вращающегося спрайта для поддержания общего ощущения вращения.
Параллакс можно также реализовать программно, на основе каждого сканлайна (горизонтального ряда пикселей), смещающегося относительно других так, чтобы создавался эффект трехмерного смещения плоскостей земли. Удачное использование этого эффекта позволяет создать впечатление перспективы в плоском изображении. В сочетании со спрайтовым масштабированием сканлайн-параллакс с большим эффектом использовался в ранних 2D-гоночных играх и для изображения пола в 2D-файтингах. По сути, чем больше слоев движется с разной скоростью, тем больше глаз обманывается в восприятии трехмерной глубины.
2D-анимация визуальных эффектов
Анимация визуальных эффектов – это уникальный навык, требующий понимания того, как в одних и тех же кадрах можно отрисовать различные частицы, движущиеся с разной скоростью и изменяющиеся во времени. Огонь лижет абстрактные формы по мере удаления от источника, превращаясь в клубящийся дым, а затем затухает; при столкновении какого-либо предмета с водной поверхностью в воздух взлетают водяные брызги; взрывы представляют собой почти мгновенные вспышки цвета, которые замедляются по мере их затухания. Продолжительность эффекта обычно зависит от того, сколько таких эффектов может появиться на экране одновременно, а также от запланированного объема работ.
Однако, в отличие от 3D, создание эффектов не требует совершенно иного рабочего процесса, отличающегося от процесса анимации персонажей, и обычно эти эффекты создают так же, с помощью сменяющих друг друга кадров. Еще одно преимущество 2D-анимации эффектов состоит в том, что стандартные для программ DCC эффекты, такие как размытие, следы от движений, умножение отрисовки и т. д., можно вставлять в статичные кадры без необходимости использования дорогостоящих постэффектов или добавления уникальных моделей персонажей и риггинга.
Вершина техники – разработанный Марком Феррари метод цветовой циклизации, или цикличного изменения цветов, используемый не только для передачи движущихся сплошных масс, вроде водопада, но и для более тонких эффектов, например дождя, падающего в сложном пейзаже и изображаемого за счет продуманного распределения цветов. (Публикуется с разрешения Марка Феррари.)
Эффекты в 2D-играх также включают в себя визуальную обратную связь; в качестве примеров можно упомянуть тряску спрайтов для обозначения повреждений, мигание в виде смены различных цветовых палитр на одном спрайте для обозначения изменения статуса (например, поджога), а также замирание на долю секунды всего экрана или соответствующих персонажей для обозначения удара (так называемый эффект хит-стоп, или остановка при ударе).
Один из характерных для пиксель-арта анимационных эффектов, обусловленных ограниченностью палитры, является так называемое цикличное изменение цветов, при котором цвета объекта меняются обычно по одному за раз и по градиенту. Если градиент применить, например, в сцене водопада, где цвета располагаются вертикально, их цикличное изменение порождает впечатление падения воды. Большей достоверности и более плавного вида позволяет добиться процедурное смешение оттенков цветов, а не просто переход от одного цвета к другому.
Анализ современной игры: Streets of Rage 4
Игра Streets of Rage 4 представляет собой мастерское продолжение классической серии, пролежавшей без развития целых двадцать шесть лет. Она демонстрирует великолепное сочетание новых и старых техник 2D-анимации с верным уважением к оригинальному сюжету. SoR4 – это современная двухмерная игра, не связанная старыми ограничениями, настоящее торжество двухмерных оформления и анимации в высоком разрешении, но с большим уважением к историческим методам разработки 2D-игр.
В игре Streets of Rage 4 представлены пиксель-арты из нескольких игр серии, масштабированные в соответствии с современными техническими параметрами. (Публикуется с разрешения DotEmu
Примечательно, что в игру включены классические спрайты из оригинальных игр, увеличенные до высоты персонажей современной игры, что позволяет сравнить их между собой и оценить прогресс. Чтобы соответствовать современному разрешению 1080p, спрайты из игр SoR2 и SoR3 были увеличены в четыре раза, а более мелкие спрайты первой игры были увеличены в пять раз. Все классические спрайты были перерисованы в строгом соответствии со своими оригиналами, и потребовалось лишь изменить их хитбоксы для соответствия современному геймплею. Аутентичные ощущения от игры всех персонажей были воссозданы посредством синхронизации новой игры со старой, причем обе игры можно запускать на одном контроллере с точностью «кадр в кадр».
В SoR4 очень часто используются хитбоксы в пользу игрока (в такой игре это более допустимо, чем в игре с PvP), размер хитбоксов изменяется на лету, чтобы врагам было сложнее нанести удар, когда игрок движется, и сильно уменьшается при прыжках. И наоборот, при отбрасывании противника назад размер их «хёртбокса» остается большим, что позволяет игрокам в кооперативе буквально «жонглировать» врагами в воздухе.
Основательно проработанная временная шкала позволяет управлять всеми параметрами кадра, от тайминга анимации, смещения положения и поворота изображения и коллижн-боксов до применения кадров прерывания, накладывания визуальных эффектов и редактирования правил геймплея. (Публикуется с разрешения DotEmu.
Более полное погружение персонажей в окружающий мир игры Streets of Rage 4 достигается благодаря многослойным эффектам окружения и анимации. (Публикуется с разрешения DotEmu.)
В богатой анимации окружения использованы различные виды наслоения, такие как наложения на передний план, а также эффекты пара и фоновой анимации спрайтов, что позволяет по-настоящему погрузить 2D-персонажей в мир игры. Особого внимания заслуживает динамическое освещение персонажей, особенно подсветка контура – пиксели рядом с альфа-прозрачностью автоматически распознаются как край персонажа, а расположенные в окружении источники света создают цветные блики на спрайтах с правильной стороны.
(Публикуется с разрешения DotEmu.)