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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Different Story<br />
Different Story

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

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

3030 показов
20K20K открытий
11 комментариев

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

Ответить

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

Ответить

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

Ответить

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

Ответить

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

Ответить

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

Ответить

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

Ответить