Как я делал динамичные тени в изометрической пиксель-арт игре

И что-то даже получилось

Я люблю пиксель-арт. А ещё я люблю изометрические игры. Поэтому, когда я решил делать игру тайкун CoffeeBiz, то выбор стилистического решения был прост и понятен. Но хотелось добавить что-то необычное, чтобы как-то выделиться в потоке пиксель-инди. И я решил попробовать получить картинку, как будто это вручную нарисованный изометрический пиксель-арт, но с динамичным 3d освещением и тенями. В идеале поставленная на паузу игра должна была создавать впечатление полностью вручную отрисованного изображения.

Это было первой идеей - просто использовать стандартную камеру с ортографической проекцией и правильно подогнанными размерами мешей и текстур. Это был провал. Современная 3d графика строится на float вычислениях с плавающей точкой, округлений, фильтрациями и сжатием текстур, анти-анилайзингом и прочими технологиями, которые приводят к размытости. Текстуры были полны мыла, пиксели переходов между мешами непредсказуемы, подогнать как нужно пиксели было можно, то только к одному мешу в одной позиции, об анимации не могло быть и речи. Динамичные объекты были как будто из другой игры (вроде поездов в SimCity4).

Плитки на спрайте пола все одинаковые, т.к. это 2D спрайт фона. Кирпичи же на текстурированном меше каждый своего размера и формы. Но это ещё не так страшно. Страшно, что изменение меша, его положения, положения камеры, разрешения экрана, да что угодно всё ломали.

И я понял, что на чистом 3d нужной мне картинки не сделать. Что бы превратить тексель в пиксель камеры, которая повернута на 45 и 30 градусов, GPU нужно сделать ряд вычислений, которые сплошь состоят из операций с плавающей точкой.

Другой вариант был делать всё на вокселях. Но воксели в Юнити? Это было бы что-то очень медленное и с очень трудоёмким процессом изготовления и редактирования игровых объектов.

Итоговая картинка CoffeeBiz складывается из 4х слоёв – интерфейс, 2D отрисованная вручную картинка, 3D слой с освещением, 3D с динамичными объектами. Подумываю ещё добавить слой с картой нормалей, но это в будущем.

Процесс добавления объекта/здания в игру состоит из следующих шагов:

Отрисовка спрайта объекта. Рисую я в фотошопе. Не самый удобный инструмент для пиксельной графики, но лучшего редактора для работы со слоями, масками и смарт-объектами я не нашел. Для ускорения работы некоторые типовые элементы, вроде диагональных линий, углов, типовых мини объектов сохранены в виде кистей. Фильтрация спрайтов – point, без компрессии, так что в игре никакого блура и мыла.

Под готовый 2D спрайт создается похожий меш, который потом попиксельно подгоняется под спрайт. Для простых объектов иногда достаточно пары примитивных мешей встроенных в Юнити. Для чего-то более сложного я использую ProBuilder, т.к. он работает прямо в сцене и можно сразу видеть результат наложения, что очень удобно.

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

Одна камера рендерит фон и спрайты, другая – меши без текстур для теней статичных объектов, третья – текстурированные меши анимированных объектов. Вторая и третья рендерят в render texture, которые потом накладываются поверх основного слоя с фоном и спрайтами

В целом в таком режиме на создание одного объекта вроде кофейного киоска уходит около 2х часов.

В итоге получается то, что мне было нужно. Ещё немного гифок результата:

Это прозвучит довольно самонадеянно, но мне кажется, что получилось что-то довольно уникальное. По крайней мере я не смог найти других примеров игр с такой графикой – динамичные тени в пиксель-арт изометрии. Если вы сталкивались и сможете назвать примеры было бы круто, т.к. сложно делать что-то без возможности посмотреть на чужой опыт.

Ну и ссылка на стим, там ещё скриншоты, девлог и прочие детали.