{"id":2727,"title":"\u041a\u0430\u043a \u0433\u0435\u0439\u043c\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0431\u043b\u0430\u0447\u043d\u044b\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438","url":"\/redirect?component=advertising&id=2727&url=https:\/\/dtf.ru\/promo\/1011062-kak-oblaka-pomogayut-pri-razrabotke-igr&placeBit=1&hash=52c7ee26bed9727bfaf58b8826bf8b9c165b82ea4244c03867ca7437280928e7","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

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

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

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

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

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

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

2D

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

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

3D

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

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

Тени

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

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

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

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

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

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

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

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

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

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

0
52 комментария
Популярные
По порядку
Написать комментарий...
Antony Sumin

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

Ответить
43
Развернуть ветку

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

Развернуть ветку
Shredder337

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

Ответить
20
Развернуть ветку
Dmitriy Zorin

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

Ответить
0
Развернуть ветку
Netless

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

Ответить
15
Развернуть ветку
Дмитрий Шестаков

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

Ответить
10
Развернуть ветку
Миша Вишневский

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

Ответить
4
Развернуть ветку
Antony Sumin

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

Ответить
2
Развернуть ветку
Дмитрий Шестаков

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

Ответить
21
Развернуть ветку
Роман Лесной

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

Ответить
2
Развернуть ветку
Antony Sumin

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

Ответить
11
Развернуть ветку
Эллай Фен

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

Ответить
0
Развернуть ветку
Laser Cat

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

Ответить
2
Развернуть ветку
Эллай Фен

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

Ответить
–1
Развернуть ветку
Laser Cat

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

Ответить
1
Развернуть ветку
Эллай Фен

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

Ответить
0
Развернуть ветку
Смертный Валера

Комментарий удален по просьбе пользователя

Ответить
–1
Развернуть ветку
Эллай Фен

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

Ответить
0
Развернуть ветку
Сергей Кириченко

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

Ответить
7
Развернуть ветку
Дмитрий Шестаков

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

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

Ответить
7
Развернуть ветку
Boris Gaykovich

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

Ответить
4
Развернуть ветку
Antony Sumin

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

Ответить
0
Развернуть ветку
Владимир Филатов

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

Ответить
0
Развернуть ветку
Необыкновенный паркур

Комментарий удален по просьбе пользователя

Ответить
0
Развернуть ветку
Antony Sumin

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

Ответить
0
Развернуть ветку
Рома Коев

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

Ответить
0
Развернуть ветку
Иван Ефимов

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

Ответить
5
Развернуть ветку
Дмитрий Шестаков

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

Ответить
2
Развернуть ветку
Разный историк

Комментарий удален по просьбе пользователя

Ответить
2
Развернуть ветку
Дмитрий Шестаков

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

Ответить
5
Развернуть ветку
Netless

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

Ответить
0
Развернуть ветку
MedievalRain

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

Ответить
0
Развернуть ветку
Netless

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

Ответить
2
Развернуть ветку
Вася

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

Ответить
2
Развернуть ветку
Дмитрий Шестаков

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

Ответить
1
Развернуть ветку
Вася

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

Ответить
0
Развернуть ветку
Владислав Муравьёв

Так это.. Discord, EGS

Ответить
0
Развернуть ветку
AuthorNoXII

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

Ответить
2
Развернуть ветку
Cino

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

Ответить
2
Развернуть ветку
Antony Sumin

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

Ответить
1
Развернуть ветку
Дмитрий Шестаков

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

Ответить
0
Развернуть ветку
Антон Недоцуков

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

Ответить
0
Развернуть ветку
Victor Vasiljev

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

Ответить
1
Развернуть ветку
Александр Соловьев

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

Ответить
0
Развернуть ветку
Дмитрий Шестаков

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

Ответить
0
Развернуть ветку
Александр Соловьев

Спасибо)

Ответить
0
Развернуть ветку
Daniil Monin

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

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

Ответить
0
Развернуть ветку
Юрий Прошин

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

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

Ответить
0
Развернуть ветку
Loser Antbear

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

Ответить
0
Развернуть ветку
Алексей Растегаев

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

Ответить
0
Развернуть ветку
Константин Рогов

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

Ответить
0
Развернуть ветку
Николай Костоправ

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

Ответить
0
Развернуть ветку
Никита Король

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

Ответить
0
Развернуть ветку
Читать все 52 комментария
null