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

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

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

Почему бы просто не отключить фильтры, сглаживание и делать всё как обычно, только с изометрической камерой?

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

Картинка иллюстрирующая проблему
Картинка иллюстрирующая проблему

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

Проблема в динамике

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

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

И после многих-многих-многих экспериментов я пришел к такому решению

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

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

2D

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

Отрисованное здание
Отрисованное здание

3D

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

Сцена в редакторе Юнити
Сцена в редакторе Юнити

Тени

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

Все тени одной локации в одном спрайте
Все тени одной локации в одном спрайте

Камеры и сборка

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

Весь процесс на видео

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

Таймлапс отрисовки киоска

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

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

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

268268
52 комментария

Изврат, возведенный в форму искусства :D.
Но результат, действительно, сложно повторить методами без бубна, так что уважение и почет!

44
Ответить
Комментарий удалён модератором

Комментарий недоступен

22
Ответить

Там хард-тени - на 460m даже с каким-о Atom-ом 5-летней давности - может даже и взлетит.
Но только если Террейн штатный не использовать.

Ответить

Красиво, но только небольшой баг в неправильном порядке отрисовки тени пробрался на гифку. Тень поверх поп-апа

15
Ответить

Ой, да, это старый баг который оказался зафиксирован в гифке. Сейчас такого уже нет. Но других багов ещё уйма, я пока в очень-очень-Early Access.

10
Ответить

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

2
Ответить