Создание пиксель-арт анимаций

В современной игре визуализация так же важна, как и геймплей. С помощью «ожившей картинки» мы теперь не только привлекаем внимание и создаем атмосферу — визуализация рассказывает историю, впечатляет игрока, увлекает игрой и создает желание возвращаться к ней снова и снова.

Едва ли не самая важная часть всех этих процессов — анимация. Она «оживляет» картинку и с ней оживляет игру.

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

В двух словах о ней для контекста: наша игра будет социальной RPG, действие которой наполовину происходит в небольшом американском городке 60-х годов с множеством активностей, а вторая половина состоит из тактических боев с монстрами в «альтернативном мире».

Анимация образа

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

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

Создание пиксель-арт анимаций

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

Анимации можно разделить на несколько категорий:

  • Стандартные или, иными словами, самые необходимые анимации, без которых игра значительно потеряет в качестве. К ним можно отнести анимацию передвижения, бездействия, а также боевые анимации. Разумеется, существуют игры, в которых они отсутствуют, но, согласитесь, игра с такими анимациями оставит намного больше впечатлений.
  • Атмосферные - те анимации, которые зарабатывают Вам очки в визуальной составляющей. Опять же игра вполне может обойтись и без них, но взгляните на следующие два примера:

В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.

Во втором примере есть очевидное преимущество - повествование с помощью визуализации.

В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.

Во втором примере есть очевидное преимущество - повествование с помощью визуализации.

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

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

Циклические анимации

Самый характерный пример зацикленной анимации – это передвижение персонажа. Бег главной героини состоит из 10-ти кадров. Зачастую можно увидеть циклы из 8-ми или 16-ти кадров, но мы выбрали средний вариант, т.к. 10-ти кадровый бег получился плавнее 8-микадрового и не требует много ресурсов, в отличие от цикла из 16-ти.

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

Важно учитывать, что каждая деталь персонажа имеет собственный вес. Например, волосы при беге будут двигаться более активно, чем рюкзак героини. Последний, в свою очередь, “отстает на кадр” от амплитуды движения хозяйки. Когда она начинает двигаться вверх, рюкзак всё ещё остается в своем прежнем положении и только в следующем кадре поднимается на необходимый уровень.

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

Активные анимации

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

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

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

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

Почему же удар в прыжке и отскок? Потому что детальная анимация удара вместе с бегом в одну и другую сторону заняла бы слишком много времени – как внутриигрового, так и производственного. Такое решение приведет к тому, что игрок рано или поздно захочет пропустить длинную анимацию, которую видел уже десятки раз и знает её результат.

Different Story<br />
Different Story

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

Но большие вложения в пиксель-арт анимацию имеют шанс окупиться большой “отдачей” – как в смысле востребованности игры, так и в смысле впечатлений, удовольствия игрока. Но всем, кто, как и мы, обращается к пиксель-арту, мы желаем успехов и удачи на этом пути!

7979
11 комментариев

Поиграл я на днях в Dead Cells, и сделал для себя заметку, что куда проще и дешевле делать лоуполи, а потом шейдером приводить это к пиксельному виду.

4
Ответить

Лично меня в Dead Cells именно это и оттолкнуло - когда думал, что попал в двухмерный Blashemous, а оказался в 3D с фильтрами 

4
Ответить

Так и есть, это намного дешевле, но и по качеству это теряет. С динамикой Dead Cells это решение было прямо хорошим)

Ответить

Кстати, ваша игра выглядит отлично. Стилистика напомнила мне Eastward.

4
Ответить

Спасибо, приятное сравнение)

2
Ответить

Сам пиксель арт очень хорош, но анимация пока сырая у вас, ходьба слишком механическая, а в ударе нет импакта нормального и чувствуется неправильная инерция

2
Ответить

Как по мне, очень атмосферно. Очень нравятся цветовые решения👍

1
Ответить