🔦Реалистичное 2D освещение с помощью карт нормалей [Tutorial] [Unity 3D]

Освещение и сложные материалы давно уже присутствуют в 3D играх. Но что насчёт 2D? В этом видео я применил технику карт нормалей, используемых обычно в материалах для объектов, к обычным спрайтам. Это позволяет им выглядеть объемно, взаимодействовать с освещением, и создавать уникальный визуальный стиль игры. Я объясню как работают карты нормалей, покажу как создавать их с помощью специализированных программ или с помощью обычного Paint'a!
Содержание:
00:00 - Введение
00:51 - Что такое карты нормалей
02:15 - Как они работают
05:07 - Программа Sprite Illuminator
06:40 - Рисование в Paint.NET
16:27 - Заключение
Ссылка на проект, с шейдером и тайл-сетом: github.com/emeraldpowder/2dNo...
На этом канале регулярно появляются новые видео, которые позволят тебе научиться создавать игры, или подарят новые идеи и вдохновение, если ты уже умеешь. Подписывайся!
Остались какие-то вопросы, пожелания, или идеи для других видео? Смело пиши в комментарии под видео

[@quantumworld764]

Очень качественный урок, буду ждать продолжения. Желаю больше подписчиков!

[@xanaramus]

Круто не знал про нормали, спасибо, очень познавательно!

[@zigurath8]

Супер! Молоток, с удовольствием смотрю твои туторы!

[@user-tv7kg9vy7u]

Невероятно крутая информация!

[@danyakrasnyanov7786]

Спасибо вам большое живите вечно!!

[@user-hx2pe2kt7b]

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

[@lllluccifer]

ахренеть спасибо папаша 2-й день это ищу, очень помог)

[@guroman2369]

Я аж подписался! Очень понравился урок :)

[@krio_gen]

Спасибо. Отличные уроки!

[@user-pe6qv5dp5d]

Понял, насколько классный это канал. Не смог удержаться и нажал на колокольчик))))

[@user-ef5wh3bh8n]

Хорошая инфа, спасибо!

[@user-ck9ys1tp9r]

Спасибо большое, делаю 2d хотел сделать динамическое освещение от факела, не знал как, спасибо тебе чел) подписался

[@Obelardos2]

Классный эффект, когда карта нормалей намного большего разрешения. Ещё можно добавить metallic как раз для акцента металлических и блестящих деталей

[@Ilyundra]

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

[@SHILY-PROJECT]

ЭТО ПРОСТО ЧУДЕСА! АВТОР, ТЫ КРУТ!

[@Kee1L]

Крутое видео, продолжай снимать !!

[@centr_vosprijatia]

Лайк, подписон и отдельная благодарность!

[@mrminecrafter3829]

Спасибо большое автору !!!

[@vernoyakira3611]

Очень круто, жду гайд по эффектам

[@toxicknight3079]

Офигенный урок, офигенный канал, действительно редкая и нужная инфа. Сделай еще урок по Tilemaps, плиз, ты говорил скоро, а уже 3 месяца прошло.

[@EmeraldPowder]

Спасибо Да, Tilemaps стоят в списке интересных тем, думаю однажды сделаю

[@dzha15]

СПАСИБО!!!!!! ОЧЕНЬ ПОЛЕЗНО!!!

[@ko-wn3yc]

Огромное спасибо!

[@TitikUniverse]

Пушка гонка огонь спасибоооо

[@user-et9zs7pp2b]

Спасибо!

[@user-tx9kx1yh8f]

афигеть, спасибо, мужик!

[@VladislavKarnomazov]

Просто кайф

[@dennys-mom]

Классный ролик в рамках Рунета. В целом только по матчасти можно уточнить, что такое карта нормалей и что на ней кодированно и почему не "зелёное по тому, что сверху"

[@user-ck9ys1tp9r]

Кста помог с созданием карт нормалей, работаю в blender и SP нормали там очень нужны)

[@mrminecrafter3829]

Крутое видео

[@rinrab]

Спасибо;)

[@show_run]

молодец что указал автор-сайт первого спрайта

[@TheRomixERR]

Кстати есть более продвинутый инструмент на подобии таймепа с кружочком - 2d sprite shape. Вобще интересно было бы посмотреть про создание игры на подобии worms с терраформируемым 2d ландшафтом. Не могу никак догадаться, как такое сделать с учётом взаимодействия физикой.

[@mrminecrafter3829]

Топ видео

[@ilya9333]

Зашёл на видео только чтобы ах@еть. 2Д РЕАЛЬНОЕ освещение, звучит будто ты видел двумерное пространство. Ну и лойс за одно поставить

[@rosonoka]

Карты нормалей - это просто охуенно

[@unitynavigator3328]

А можете продемонстрировать препятствие и отбрасывание теней в 2д (динамические тени)? (тени от колон, врагов, динамических объектов)

[@EmeraldPowder]

Это тоже интересная тема, постараюсь сделать видео, если найду интересные техники

[@unitynavigator3328]

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

[@ko-wn3yc]

@@EmeraldPowder Было бы классно!

[@uboretsky1547]

@@EmeraldPowder Доброго дня! Были какие-то сподвижки в этом направлении? Было бы крайне интересно, так что надеюсь, что это ещё актуально (пусть в это и слабо верится)

[@rimgro]

Если еще актуально, то погугли ShadowCaster2D, возможно, что это - то, что нужно

[@DeadRabbitCanDance]

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

[@GexPlayerMD]

ПУПЫРКА! =)

[@Romquaa]

Юнити обновили, как и сам шейдер, вроде как, теперь находится внутри самой Юньки. Можешь сделать новый видос по этой теме? На гитхабе больше не скачать твой шейдер, да и в юнити его по умолчанию нет. Пишут на офф. сайте, что это все в стандарт добавили.

[@KerJen]

Привет, спасибо за урок! Есть вопрос. Можно ли рисовать тени на персонажах еще до рисования карты нормалей? Или с точки зрения качественно нарисованной карты нормалей должен быть абсолютно плоский персонаж без вручную сделанных теней?

[@EmeraldPowder]

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

[@nynchik499]

Вау, я понял, недавно в Майнкрафте с добавлением RTX, добавили возможность делать "3д", чтобы это работало, нужно две текстуры, как в видео, теперь понял как это работает

[@bogdan9423]

А материал и шейдеры - всё обычное или тоже нужно какие-то специальные вещи загружать? Ну то есть можно загрузить эту карту нормалей, добавить обычный свет и всё будет работать или нужно ещё что-то кроме этого специальное загружать?

[@my_noname_channel]

А на сколько затратно по ресурсам использование 3D света в 2D проекте? То есть, вот такое решение с normal map'ами на сколько может повлиять на производительность проекта, где обычно свет используется только как полупрозрачные спрайты?

[@ink_bag]

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

[@EmeraldPowder]

Да, если кадры анимации на одном sprite sheet'е, то вообще без проблем, просто так же расположить нормали на картинке-карте нормалей и её задать

[@ink_bag]

@@EmeraldPowder спасибо

[@aarongrimes9276]

Привет, у меня такой вопрос. Если у меня анимированный персонаж, то мне придется делать нормал мап для каждого кадра?

[@EmeraldPowder]

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

[@Ananasgavauskuy]

Приветствую, почему данный скрипт ломает изометрию?

[@duoduoo6732]

несколько раз перематывал и непонял. подскажите плиз после замены материала почему цвета текстур не становятся разукрашенного цвета (синего или фиолетового) в 10:31?

[@alexikos1297]

Привет! Есть проблема: у меня два разных тайлсета, которые я использую на одном тайлмапе. Сразу можно понять, что карту нормалей я смогу сделать только под один из них на одном тайлмапе. Это можно как-нибудь исправить, не считая возможность создать отдельный тайлмап для отдельного тайлсета? Или я что-то не так понял?

[@EmeraldPowder]

Привет. Да, в одном тайлмапе точно может быть только один материал. Не знаю точно как там происходит рендеринг под капотом, но думаю что там есть какие-то оптимизации с этим связанные. Так что только два тайлмапа создавать в таком случае. Или попытаться склеить тайлсеты в одну картинку, если это возможно и они не слишком большие

[@alexikos1297]

В-общем говоря, я сначала нарисовал некоторую карту, потом применил на тайлмап материал с нормалями и т.д. И оно работает. Но когда я захотел добавить карту нормалей на бочку из отдельного .png тайлсета(У меня есть два тайлсета один в формате .png, другой .psd, работает так же), я задумался: "а почему оно вообще работает?" Ведь по сути, карты нормалей тайлсетов нужно применять на сами тайлсеты. Как мне применить карту на второй тайлсет? Могу ли я связаться с тобой в лс?

[@alexikos1297]

@@EmeraldPowder Я думал соединить их, но хочу найти более рациональный путь. Хотя пока искал, мог бы уже всё сделать). Кстати, судя по всему, оптимизации там есть. При применении материала на тайлмап, меняется каждый тайл, созданный в папке, при создании палитры. Т.е. если закинуть на сцену тайл (.asset), на нём уже работает карта нормалей. Хочу разобраться в этой фишке до конца. Спасибо)

[@kodest8017]

Что за эмбиент лайт? И где его найти?

[@vector3games898]

Шейдер хорош, но очень недоработан для 3d. Не посоветуете ли аналог?

[@Shipa_kLg]

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

[@save2172]

Мм извините я не много отсталый, что б эта карта работала достаточно ее в пейнте нарисовать сохранить и в юнити добавить ?, без самой той платной программы?

[@EmeraldPowder]

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

[@3xac7]

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

[@cgytrus]

Я так понял, RGB в карте нормалей используется как XYZ и 127 = 0, 0 = -1 и 255 = 1?

[@EmeraldPowder]

Да, так и есть

[@tepr1]

А это просто unity 2d или unity 2d urp?

[@magzhantinishbay536]

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

[@EmeraldPowder]

Тут говорили в комментариях что gimp и krita умеют такое, я вот только для видоса пробовал в 2д нормали делать. А для 3д уже совсем другая история

[@newlikecinema546]

как то это странно всё. А если мне нужно персонажа подсветить, он ведь может состоять из целой кучи спрайтов на анимации idle walk и тому подобного это че надо 200 спрайтов так покрасить?

[@design_art_style]

Дизлайк поставили далёкие вообще случайно сюда зашедшим и ни чего не понявшие)))

[@OkaToka]

А можно ссылку на оригинальную статью, пожалуйста?

[@EmeraldPowder]

Если речь про статью со спрайтом планеты, то сейчас не смог её открыть, похоже тот сайт уже умер

[@GameWorldMrKIller]

хых, я просто делал 3d с фиксированной камерой, и не ебал себе мозг :D/ но водео довольно интересное

[@user-qg1kd4zi3g]

Хороший урок. Но вроде как в юньке можно создавать карту нормалей и не надо заморачиваться.

[@design_art_style]

Что только платная?

[@user-sn3vv2eh9i]

а можешь кинуть ссылку где взять такой огонь kzbin.info/www/bejne/gGPPq32mdsygr68

[@EmeraldPowder]

assetstore.unity.com/packages/essentials/tutorial-projects/unity-particle-pack-127325

[@SliverRus]

Не, ну всегда можно скачать платное бесплатно. Ну вы понимаете :)

[@user-wl5hd3yf9w]

Проще в фш автоматически сделать карту нормалей

[@EmeraldPowder]

А он умеет прямо из коробки что-то такое? Или какие-то плагины есть? Я упоминал всякий сторонний софт для автогенерации, но про Photoshop ничего не слышал

[@user-wl5hd3yf9w]

@@EmeraldPowder нет, плагин NVIDIA Texture Tools for Adobe Photoshop надо устанавливать, погугли

[@AlexEpikhin]

Да что же такое...?! Не создаёт карта нормалей никаких бликов. Блики - это specular, glossiness и roughness. Карта нормалей имитирует неровность поверхности путём направления и длины нормалей заданных RGB-каналами. Автор, готовьтесь получше к изложению материала. Не вводите людей в заблуждение.

[@duoduoo6732]

уснул из-за голоса

[@RigidLight]

Про предназначение карт нормалей - бред собачий.

[@darkspaceuniverse8953]

Тупая реклама