Инди Дмитрий Шестаков
5 584

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

2D

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

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

3D

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

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

Тени

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

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

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

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

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

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

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Дмитрий Шестаков", "author_type": "self", "tags": [], "comments": 52, "likes": 271, "favorites": 198, "is_advertisement": false, "subsite_label": "indie", "id": 39234, "is_wide": false, "is_ugc": true, "date": "Sat, 09 Feb 2019 20:11:28 +0300" }
{ "id": 39234, "author_id": 32544, "diff_limit": 1000, "urls": {"diff":"\/comments\/39234\/get","add":"\/comments\/39234\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/39234"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64960 }

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

Популярные

По порядку

Написать комментарий...
43

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

Ответить

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

20

По сути так и есть.

Ответить
0

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

Ответить
15

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

Ответить
10

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

Ответить
4

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

Ответить
2

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

Ответить
21

Да, это на первой гифке из подборки видно. Вот она.

Ответить
2

Тени должны двигаться по дуге, иначе появляется ощущение, что всё происходит на экваторе ;)

Ответить
11

это изометрическая игра. так что тени... тоже. :D

Ответить
0

можно спросить? если в итоге 3d часть и 2d часть пришлось обьединить, то почему бы просто не сделать полностью в 3d и накладывать на обьекты текстуры под дизайн?

Ответить
2

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

Ответить
–1

ну а, заточить рендер под твой вариант нельзя?

Ответить
1

Автор статьи уже все сделал идеально, забей

Ответить
0

не идеально, ему приходится сначала делать 3D задник, а потом накладывать на него сверху 2D спрайты, много времени уходит

Ответить
–1

В самом начале автор описал почему нельзя

Ответить
0

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

Ответить
7

Динамичные тени в пиксель-арт изометрии.

Сразу вспомнил эту игру. Тут ещё и динамичное освещение:

Ответить
7

Спасибо, интересно будет изучить.

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

Ответить
4

Я :) в любое время суток

Ответить
0

Выглядит прикольно, за минусом деревьев. Имхо, хорошая тема для DLC - "Ночной город". Только не таr мрачно, а то на симулятор Декстера похоже :D

Ответить
0

Да ну, у меня флешбеки с гта2, там как раз такие сумерки были @_@

Ответить
0

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

Ответить
0

Ну не, тут больше на имитацию похоже. Для активных объектов тень в виде трубы, а у статичных вообще - отрисована, так что ТС пока вне конкуренции.

Ответить
0

Какая красотееень!

Ответить
5

Зацени эту игру, мне кажется, они делают что-то похожее, правда персонажи у них двухмерные:
https://www.youtube.com/watch?v=JW7HkW8866M

Ответить
2

Вот это очень похоже, спасибо. Пойду искать их девлоги.

Ответить
2

В Unreal похожего эффекта можно добиться сделав материал для пост процессинга https://www.youtube.com/watch?v=fVFo52cDKXY
Разве в юнити нельзя сделать подобное?

Ответить
5

Можно, но это скорее обратный эффект желаемому - вроде и пиксели, но всё мыльное-мыльное.

Ответить
0

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

Ответить
0

Пиксель-арт это все-таки не просто "низкое разрешение" :)

Ответить
2

Так на видео и не пиксель арт, а пикселизация через пост-процессинговый эффект

Ответить
2

Пиздравляю, эта статья + графон купили тебе ещё одного кастомера!

Ответить
1

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

Ответить
0

А чо-чо, есть площадки, где разрабу больше 70% достаётся?

Ответить
0

Так это.. Discord, EGS

Ответить
2

Что-то синдикатом повеяло, эх..

Ответить
2

Месье знает толк в извращениях.

Ответить
1

кстати, у вас очепятка в заголовке. да и "изометрической" все же, наверно ).

Ответить
0

Спасибо, поправил.

Ответить
0

На заглавной гифке разметка "поворот направо" на проезжей части ведет под "кирпич". Нехорошо.

Ответить
1

Сам знак, ровно посередине перехода, - тоже такое себе...

Ответить
0

На русский перевод будет?

Ответить
0

Да, русский я сам сделаю, как добавлю мультиязычность. В остальных языках надежда на комьюнити.

Ответить
0

Купил. Это - топ! Проект смотрится просто отлично и интересно!

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

Ответить
0

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

сильно режет слух, автор. да и других ошибок навалом.

Ответить
0

Результат впечатляет. Стоит положенных усилий. как по мне.
Но один вселенский вопрос никогда не упокоит мою душу: почему для тайкунов выбирают такое отвратное музыкально сопровождение? Т_Т

Ответить
0

Я думаю чтобы не танцевать с бубнами можно на рендер пайплайне аналог замутить)

Ответить
0

Интересный вы человек. Конечно динамические тени это как раз то что очень нужно тайкуну.
Эх, эту бы энергию да в мирных целях.

Ответить
0

хорошие техно результаты. Арт будете подтягивать? сейчас пока выглядит не очень

Ответить
0

Для теней используется карта теней или теневые обьемы?

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
В Steam появилась функция продажи
подержанных цифровых копий игр
Подписаться на push-уведомления