Это все 2D: как автор игры Mayak оживляет сцены, нарисованные вручную

Никита Никифоров

Привет! Я Никита, соло-разработчик игры Mayak из Москвы.

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

Но сегодня я хочу рассказать не про сюжет.

Я хочу показать, как обычный статичный рисунок у меня постепенно превращается вот в это:

И да, это все настоящее 2D.

Это не 2D-спрайты, поставленные в 3D-пространство и с 3D-камерой.

Прямо обычное 2D.

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

Но Mayak — моя первая игра. Я начал делать ее без опыта программирования и примерно первый год просто пробовал все подряд:

• 3D;
• 2.5D;
• разные движки;
• разные способы освещения;
• разные стили рисунка.

Много раз что-то собирал, смотрел и думал: неееее.

А потом в какой-то момент плоские рисунки начали двигаться, появился свет, звук, параллакс — и все внезапно сложилось.

В один день я посмотрел на сцену и подумал: вооооот!

Сначала просто рисуем

Почти любая сцена начинается как обычная иллюстрация.

Я рисую ее вручную. Мне нравятся масло, грубые мазки, импрессионизм, манга, нуар, темные цвета и очень яркие пятна света. Какое-то время я пытался сделать рисунок «правильнее» и аккуратнее. Очень долго парился над своим несовершенством. Читал мангу, экспериментировал с красками, пером, тушью, разными цифровыми кистями. А потом… я подумал и решил, что мой кривой стиль – это и есть мой стиль.

Пусть будет таким!

И вот после этого принятия рисовать почему-то стало намного легче.

Проблема в том, что готовая иллюстрация сама по себе для игры не подходит – она статична.

Поэтому еще во время рисования я всегда думаю о том, что потом придется двигать отдельно:

• руку на переднем плане;
• лицо на среднем;
• зрачки;
• источник света;
• источник тени;
• какой-нибудь совершенно ненужный куст вдали, который я зачем-то рисовал два часа.

И вот в результате один рисунок превращается в пачку отдельных слоев.

А потом я собираю все это обратно в Godot.

Только уже как игровую сцену.

Параллакс: самый дешевый способ внезапно получить пространство

Первое, что очень сильно меняет ощущение от изображения, — параллакс.

Слои начинают немного двигаться относительно друг друга: ближние — сильнее, дальние — слабее.

Иногда движение почти незаметно, но мозг уже перестаёт воспринимать сцену как одну плоскую картинку.

Мне нравится, когда этот эффект работает не как аттракцион «СМОТРИТЕ, У НАС ПАРАЛЛАКС», а почти подсознательно.

При легком движении камеры ты чувствуешь, что между передним планом, персонажем и фоном есть какое-то расстояние.

Хотя на самом деле расстояния нет.

Это все несколько PNG, которые движутся с разной скоростью.

Очень удобно обманывать мозг.

Потом начинается мой любимый этап — свет

Свет в исходном рисунке уже нарисован.

Там есть тени, блики, освещенные поверхности.

Но поверх этого я добавляю реальные 2D-источники света и динамические тени.

И это оказалось страшно весело.

Например, персонаж идет в темноте с химической световой палочкой.

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

Причем на дереве есть слой, реагирующий на свет особенно чувствительно.

Вроде мелочь. Но именно от таких мелочей я почему-то кайфую.

Для меня здесь случается очень приятный конфликт между живописью и всякими ИТ-штучками.

Немного искажений

Дальше идут шейдеры.

Я не хочу, чтобы они становились отдельным визуальным эффектом.

Идеальный вариант для меня, когда игрок лишь еле-еле чувствует, что что-то происходит.

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

Шейдеры, которыми я пользуюсь, технически довольно простые. Никакой черной магии.

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

И вот получается то самое: мозг начинает воспринимать неподвижный рисунок как что-то живое.

Один эффект почти ничего не делает

Вот это, наверное, главное, что я понял за время работы над визуалом.

Нет одной технологии, после которой статичный арт внезапно превращается в игровую сцену.

Параллакс сам по себе — просто параллакс. Свет сам по себе — просто свет.

Небольшие движения текстуры ничего не дают.

Анимация нескольких деталей — это тоже ничего особенного.

Но когда все это работает одновременно, эффект вдруг становится намного сильнее суммы отдельных частей.

И еще к этому добавляется звук.

Вот его GIF вообще не умеет показывать, а жаль.

Добавляем шум комнаты, или ветер, или гул оборудования. Еще шаги.

Какие-нибудь тихие механические звуки. А сверху еще и музыку! Ммм…

Кстати, я около 15 лет до геймдева писал музыку, поэтому звуковая часть для меня вообще отдельное удовольствие. Кстати, послушайте Nicephorus!

И вот когда рисунок двигается, свет реагирует, где-то шумит вентиляция и поверх начинает играть музыка — для меня происходит настоящая магия.

Пару дней назад ты нарисовал PNG.

А теперь кажется, что это реальное место или живой персонаж.

Почему Godot

Вся игра сейчас собирается в Godot.

Я пришел к нему не сразу. В начале пробовал более простые движки, которые казались дружелюбнее к человеку, никогда раньше не делавшему игры.

Но довольно быстро начинал упираться в ограничения.

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

В Godot в этом смысле у меня практически развязаны руки.

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

Это особенно важно, когда работаешь один.

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

Тоже прогресс.

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

Для диалогов использую Dialogue Manager Натана Хоуда (Nathan Hoad) — прекрасный плагин, который сэкономил мне огромное количество времени.

Но никакой уникальной инженерной магии под капотом Mayak нет.

Почти все уже придумали до меня.

Я просто беру знакомые элементы и собираю их так, как мне нравится.

А теперь плохая часть

У такого подхода есть один довольно очевидный недостаток.

Нужно рисовать. Очень много.

Почти каждая сцена Mayak уникальна. Я не собираю уровни из повторяющихся тайлов и не переставляю один и тот же набор объектов. Новый эпизод часто означает новую полноценную иллюстрацию, которую затем еще надо разобрать на слои и оживить.

Иногда за неделю я могу сделать две-три сцены.

Хотя кого я обманываю.

Скорее одну-две…

А некоторые могу ковырять намного дольше.

В какой-то момент я понял, что романтическая идея «а давай каждая сцена будет нарисована отдельно» — это ловушка, которую я сам себе построил.

Теперь поздно. Придется рисовать.

Никому не рекомендую.

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

И в какой-то момент она начинает дышать.

Наверное, ради этого я все и затеял.

Немного о самой Mayak

Если после всех PNG все-таки интересно, что это за игра: Mayak — линейная сюжетная sci-fi история примерно на четыре часа.

В центре молодой астроном, Нина, кот Айзек и сигнал от другой звезды:

• 3571
• 3559
• 3557

… (люди стали получать числа из космоса!)

Все числа простые.

И они уменьшаются.

Дальше начинаются спойлеры, поэтому на этом остановлюсь.

Сейчас в Steam уже есть бесплатное демо примерно на 30–40 минут.

А полную игру я продолжаю делать.

Сценарий уже готов.

Осталась самая маленькая часть.

Сделать все остальное.

Заходите ко мне в Telegram-канал.