Детали создания графики в игре КАЮК

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

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

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

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

Опираясь на всё вышеперечисленное, я стал набрасывать скетчи в блокноте. Вот несколько из них:

А вот что из них по итогу получилось:

А теперь на конкретных примерах будет показано, как верхнюю картинку превратить в нижнюю.

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

Модели были сделаны в Blender, это бесплатный и достаточно удобный инструмент для 3D моделирования. Персонаж и монстры легче делаются с помощью скульптинга, а вот шкафы, ящики, роботы и прочие результаты деятельности человека уже можно делать через обычный режим редактирования. К тому же, модели не обязаны быть красивыми и завершёнными. Где-то они получились угловатыми, где-то видна нехватка полигонов, где-то линии выглядят неровными, к тому же нет абсолютно никаких цветов и текстур. Что касается подвижных объектов - в них даже скелетная анимация оказалась не нужна, достаточно сделать все подвижные части отдельными объектами и настроить опорные точки и правильно выставить иерархию родительских объектов (например, кисть -> предплечье -> плечо -> верхняя часть туловища). Несмотря на все вышеперечисленные недостатки, это быстрый способ сделать референс для переноса на бумагу. Все шероховатости уйдут на следующих этапах, а пока можно посмотреть на получившуюся модель главного персонажа:

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

Для анимаций следует определиться, какая частота кадров оптимальна. В каждом случае это нужно выбирать индивидуално. Конечно, больше - лучше, но учитывая, что это всё придётся рисовать вручную (и в одиночку), то стоит найти какую-то золотую середину. Суть в том, что для быстрых движений нужна большая частота кадров, а для медленных или незначительных её можно и уменьшить. Для главного героя я выбрал 15 кадров в секунду, что чуть больше, чем стандартные 12 для рисованной анимации старой школы. Это обусловленно тем, что в играх стандартными являются 30 и 60fps, и лучше, чтобы количество кадров в анимации было делителем этих двух чисел. На больших герцовках это не так критично, поэтому и на 144Гц экране анимации будут выглядеть равномерно. Полученные в Blender анимации рендерим и переводим на бумагу по принципу ротоскопа. Получаются лёгкие, местами неровные линии, но пропорции точно соблюдены.

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

К сожалению, сканов рисунков до контуровки не сохранилось, поэтому покажу результат после неё:

На первый эпизод мне понадобилось изрисовать более 200 листов А4. Поначалу это было долго, но со временем удалось набить руку, и контуровка стала проходить намного быстрее.

После контуровки рисунок сканируется, и можно приступать к раскраске в фотошопе. Волшебная палочка и заливка очень сильно экономят время. Чтобы упростить этот процесс, можно добавить корректирующие слои "Чёрно-белое" и "Уровни", в последнем свести диапазон до минимума, а после этого объединить слои. Так на картинке останутся только чёрные и белые пиксели, полутона в данном случае не нужны:

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

В игре используются неяркие и слегка грязноватые, но не слишком "серые" цвета. По факту цветов всего около 20, но у некоторых есть более тёмные и более светлые оттенки. Такая скудная палитра позволяет удерживать общий стиль игры и не выходить за его рамки. Из палитры выделяются несколько ярких цветов - оранжевый, красный и жёлтый. Первый нужен для главного героя и его робота, и больше нигде не встречается. Это выделяет персонажа на общем фоне и вдобавок подчёркивает то, что он чужой для этого мира. Красный и жёлтый же чаще всего используются для частиц эффектов или подчёркивания уязвимых мест противников - такие вещи должны быть заметными.

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

После раскраски персонаж выглядит вот так:

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

Дело в том, что все работы над изображениями ведутся в исходном разрешении (мой сканер настроен на разрешение 7015x5102). С большим разрешением удобно работать, но для игры такие огромные картинки не подойдут. К тому же каждый кадр анимации представлен как отдельная картинка. Это не очень хорошо для оптимизации, ведь быстрее загрузить 1 картинку с условным размером 1600x1200, чем 12 картинок 400x400.

Поэтому все кадры анимации нужно уменьшить в размерах с учётом целевого разрешения. Этого не избежать в случае с растровой графикой, мною было выбрано FullHD. Остальные же разрешения будут достигнуты с помощью масштабирования. После уменьшения их следует собрать в один спрайт-лист. Для этого был написан специальный скрипт на Python. Удобство скрипта в том, что с его помощью можно автоматизировать процесс, что очень полезно в случае доработок и исправлений, а они бывают не так уж и редко. К тому же такой скрипт позволит легко перегенерировать кадры с другим разрешением, если, например, понадобится создать пак текстур более высокого разрешения.

А вот как данная анимация выглядит в игре:

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

В завершение разговора о спрайтах можно добавить, что стиль игры подразумевает наличие контуров, и эти контуры было решено сделать одной толщины. Из-за этого пришлось рисовать все объекты в одном масштабе. Для главного героя и большинства противников это не приносит больших трудностей, но элементы окружения или большие мобы вынуждали рисовать их по частям и объединять несколько листов А4 в фотошопе. Формат А3 не являлся вариантом, так как сканер у меня только под формат А4.

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

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

При создании панели я опирался на советскую копию Nintendo Game and Watch - Электронику ИМ (Это та самая, с волком и яйцами) и на водопроводный счётчик. Тут особо рассказывать нечего, проще показать:

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

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

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

Помимо оружейного верстака, оружие отображается в основном геймплее. Стоит вспомнить, что КАЮК - не 3D игра, где можно просто присоединить модели модификаций к основе оружия. В случае растровой графики каждый вид оружия - это отдельные кадры анимаций, которые приходится рисовать вручную. 13 деталей - это очень много, и рисовать их все, для всех анимаций - это очень сложный и долгий процесс. Здесь пришлось пойти на хитрость. Если посмотреть на картинку с деталями ещё раз, то можно увидеть, что большинство модификаций очень небольшого размера (например, отверстия в стволе, полоска на корпусе или конденсаторы по бокам) и их в основном геймплее отрисовывать не нужно, так как они слишком мелкие для выбранного масштаба. Ещё есть накладки на ручки, которые... всё время закрыты руками персонажа. Таким образом, из визуально значимого остаются лишь 4 вида оружия, после чего у игрока будет ощущение того, что он стреляет из того оружия, что он сам создал. Четыре их из-за наличия/отсутствия приклада на оружии и длины корпуса - короткой или длинной. Вот так выглядят все эти виды в игре:

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

Ещё здесь очень важен вспомогательный материал - референсы, на которые можно опираться. Их можно найти в интернете, в других играх или сделать самому. Например, для создания анимации струи кислоты пришлось снять пульверизатор в замедленной съёмке. Замедленная съёмка нужна для того, чтобы движение можно было заснять как можно точнее и в анимации эффектов выставить высокую кадровую частоту. Последнее особенно важно, ведь суть эффектов в их движении, так как обычно они длятся меньше секунды и за это короткое время нужно как можно лучше передать характер их движения. Поэтому для эффектов часто использовалась скорость в 30 и даже 60 кадров в секунду.

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

Если вы видели советские диафильмы, то замечали, что первым кадром на них была таблица цветов. Честно говоря, я не уверен, зачем она нужна (в фильмоскопе нет инструментов цветокоррекции), но могу предположить, что по той же причине, что и на газетах и бумажных упаковках продуктов - для выявления брака на производстве. Саму таблицу я решил сделать стандартной (студии "Диафильм"), но использовать цвета, уже существующие в игре:

Второй кадр - это название студии. Использовать реально существующее название нельзя, да и действие игры происходит в вымышленном мире, поэтому пришлось придумать название студии. Название придумать было сложно в том числе из-за желания обыграть его с помощью цвета в качестве отсылки на студию "Диафильм". В итоге было выбрано название "Спектр". Оно не только имеет связь с визуальным отображением, но и содержит букву "С", которую легко стилизовать. К тому же в английском языке слово "spectrum" созвучно с русским словом и позволяет так же оформить букву "C":

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

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

В углу можно увидеть цифры в определённом формате, такие же встречались на реальных диафильмах. В данном случае тут закодировано, что диафильм относится к категории "Гражданская оборона" (11), он цветной (3) и в конце идёт порядковый номер, который у всех диафильмов в игре разный (в примере ниже - 002). Маленькая деталь, которая влияет на погружение.

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

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

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

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

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

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

Сначала были отрисованы тайлы с ключевыми типами задников - например, гаражи, дома, входы в объекты и т.д. Но нарисованы они были не на бумаге, а в Paint с толщиной линий в 1 пиксель - эдакий пиксель-арт. После этого опять был написан скрипт на Python, с помощью которого по уже имеющемуся уровню генерируется картинка из отрисованных тайлов. После комбинирования картинок, скрипт делает линии толще, имитируя мой стиль рисования с непостоянной толщиной линии. В таком случае, если уровень изменится, можно будет перегенерировать контуры автоматически.

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

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

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

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

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

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

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

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

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

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

Ещё интересным исправлением было перерисовывание медицинского креста. Оказывается, что красный плюсик - это не знак всего медицинского, а символ Красного Креста. Женевской конвенцией установлено признание эмблемы в виде красного креста в качестве международного символа защиты во время вооруженных конфликтов. И использовать её везде, где хочется, нельзя.

В 2016 году авторам игры Prison Architect пришлось сменить красный крест на машине скорой помощи на зелёный, так как им пришло письмо от юристов Красного Креста с требованием удалить их символику (на эту тему была более подробная статья на Хабре: https://habr.com/ru/articles/400835/).

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

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

Для тех, кто дочитал до конца и кто пользуется фотошопом, поделюсь небольшим трюком:

Картинки большого разрешения в фотошопе занимают очень много места, вес некоторых файлов достигал 300МБ. Мне такой расклад не понравился, и я нашёл несколько способов уменьшить размер .psd файлов:

1. По возможности стоит объединить все слои, какие только можно. Количество слоёв должно быть минимально, но не в ущерб удобству работы с этим самым файлом.
2. Фотошоп помимо слоёв сохраняет превью (картинку, которая отображается в списке файлов). Оно может занимать до 20% размера файла. Отключить превью нельзя, но можно добавить самый верхний слой и залить его одним цветом. Так на превью будет плоская текстура, которую гораздо проще закодировать, что сэкономит эти самые 20%. Из минусов - в списке файлов будет просто цветной квадратик. Мне это не столь принципиально, я ориентируюсь по названиям файлов.
3. Фотошопные файлы с несколькими простыми по текстуре слоями отлично жмутся в ZIP архив. В моём случае экономия размера составляла до 10-11 раз. Работает не для всех файлов, лучше всего подходит для цифровых рисунков с большим количеством одноцветных областей.

На этом у меня всё. Демо доступно на itch (https://konstantinfedorov.itch.io/kayuk). Также можете подписаться на мой телеграм (https://t.me/kayuk_game) или группу ВК (https://vk.com/kayuk_game). Все новости будут размещаться на ДТФ, в ВК и телеграме, поэтому можно выбрать любую удобную для вас соцсеть.

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

#лонг