Такой простой, но сложный пиксель-арт

Выбор стилистики и нюансы создания анимации: опыт инди-студии Gunpowder Team.

Над пиксельным экшеном Gunpowder on The Teeth: Arcade работают всего два человека, а если точнее, то один — Руслан Елисеев. Второй участник студии занимается организаторской работой: помогает с шоукейсами, арендой офиса, разработкой сайта и так далее. Разработка в сумме заняла около трёх лет, и вот теперь игра на финишной прямой.

Её легко принять за что-то вроде Broforce, однако это будет не совсем верно: локации здесь не разрушаются, зато помимо стрельбы и взрывов есть элементы хардкорного платформера в стиле Super Meat Boy.

Первое, что бросается в глаза, когда запускаешь Gunpowder on The Teeth — великолепный пиксель-арт и необычная монохромная ретростилистика.

Руслан Елисеев написал для DTF колонку, в которой рассказал, как родился визуальный стиль игры, и поделился опытом создания пиксельной графики и анимации.

Я обожаю военный сеттинг в Battlefield 3, но совершенно не умею играть в шутеры. Зато умею в Super Meat Boy — так идея и родилась. Совместив геймплей платформера и сеттинг военного шутера, я сделал игру, которую можно охарактеризовать как «Super Meat Boy на войне», но большинство людей прозвало её «Broforce, только чёрно-белый».

Gunpowder on The Teeth — игра о противостоянии двух фракций, в которой более 100 уровней за каждую из сторон, различные механики вроде управления техникой, сюжет и многое другое. И изначально она была цветной.

Основное меню в этой игре стилизовано под военный планшет с мнонохромным двухцветным экраном.

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

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

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

Одна из ключевых особенностей игры — настоящий пиксель-арт. Под «настоящим» я имею в виду соответствие картинки всем параметрам пиксель-арта: привязка объектов и их анимаций к пиксельной сетке, неизменность разрешения (в игре фиксированное разрешение 320х180), отсутствие прозрачностей и полупрозрачностей, соответствие конечных цветов в различных спецэффектах изначально выбранной палитре. Хотя без нарушений этих правил не обошлось: все уровни начинаются и заканчиваются наложением фона с изменяемой прозрачностью.

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

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

Первые экземпляры техники в игре были точными копиями аналогов из реальной жизни. Они выглядели очень здорово, но количество времени, затраченное на производство анимации одного объекта измерялось неделями. Это если речь об относительно несложном по строению внедорожнике. А если танк?

Так что стилистика несколько раз менялась ради упрощения. Количество колёс в гусеницах танков сокращалось, сам танк укорачивался, а некоторые детали убирались, за неимением под них места. Остальная техника перерисовывалась под стилистику мультяшного танка, и далее по цепочке переделывалась вся остальная графика игры.

Залог красивого пиксель-арта — это правильно подобранная палитра. Можно нарисовать великолепных героев и окружение, в плане формы, снабдить их отличной анимацией, но это не будет работать из-за плохой палитры. Правильная палитра поможет получить нужную атмосферу. В игре про ядерный постапокалипсис гармоничней будут смотреться серо-грязные цвета. А киберпанк подчеркнут яркие неоновые вывески с кислотными цветами. Хотя везде могут быть исключения.

В Gunpowder on The Teeth палитра переделывалась два раза: в первый раз цвета оказались слишком яркие, так что я сделал их более «пыльными», а во второй раз — не хватило оттенков и нужно было сократить между ними шаг.

Во втором случае перемены оказались очень болезненными: у меня была готова почти вся анимация, для всех двадцати бойцов. У каждого бойца около 50 анимаций, у каждой анимации от 3 до 15 кадров. На протяжении пары недель, по несколько часов в день я правил палитру: жёлтый... жёлтый... зелёный... зелёный... коричневый... сохранить... следующий. В такие моменты особенно сильно начинаешь любить горячие клавиши в графическом редакторе и сериалы на втором мониторе.

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

Полученные 12 оттенков и служат палитрой для моей монохромной игры.

Но просто подобрать палитру — мало, её нужно правильно использовать. Все объекты игры можно поделить на четыре категории.

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

Впрочем, в игре нет таких крайностей, когда объектов не видно совсем. Они или частично скрыты (в траве или кустах), или близки по цвету, что почти сливаются.

Некоторые тесты показали, что 10-15 минут игры достаточно, что бы научиться различать объекты и ловушки среди окружения.

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

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

У большинства объектов (деревья, трава, массеть на технике) при взаимодействии со взрывами проигрывается анимация качания, которая подразумевает поочередный наклон в обе стороны с уменьшением амплитуды. Помимо наклона также обыгрывается степень «растрепанности».

Пример: при наклоне дерева максимально влево листва вздыбливается и по инерции отклоняется вправо, на следующем кадре наклон дерева направлен вправо и с меньшей амплитудой. И так последовательно до полного выравнивания.

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

Взрыв справа от дерева в упор — начинаем с 10 кадра: 10,9,8 ... 0.

Слева в упор: 9,8,7 ... 0.

Чуть подальше справа: 8,7,6 ... 0.

...и так далее.

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

Далее эта проекция поворачивается под нужными углами, в данном случае — 22,5 градуса, 45 градусов и 67,5 градусов. После выставляются: слева — кадр боком, справа — кадр спереди, сверху — все кадры проекций, и между ними, на пересечении, отрисовываются кадры поворота, в соответствии с нужными проекциями.

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

Ещё один пример упрощения: деление анимации объектов на общие стандарты и выработка общих механик.

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

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

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

И ведь, действительно, никак...