{"id":3973,"url":"\/distributions\/3973\/click?bit=1&hash=69c55e3031b7c5b32fd446d1bcadb4386d9d153a7ff5ac11e39b7566b22d4ce3","title":"\u041c\u0430\u0440\u043a\u0435\u0442\u043f\u043b\u0435\u0439\u0441 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0443\u0441\u043b\u0443\u0433 ","buttonText":"\u042d\u0442\u043e \u043a\u0430\u043a?","imageUuid":"06dd1ba1-1f1b-50d7-87e0-bba4328182c5","isPaidAndBannersEnabled":false}

Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал Статьи редакции

Здесь нет обводки, но зато есть чёткое деление на разные зоны освещённости.

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

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

Пример неправильного расчёта

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

Сначала привязываем вершины в шейдере вершин.

Затем привязываем отдельные позиции фрагментов, чтобы всё, что находится в одном квадрате сетки, имело одинаковое значение.

Наконец, убедитесь, что в настройках импорта текстур для Mesh Type установлено значение «Full Rect». Если оставить значение «Tight» пиксели изображения не будут выровнены в сгенерированной сетке, поэтому вы получите неправильные значения.

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

Сейчас Грин работает над улучшением шейдера, которое позволит сделать более плавные переходы между уровнями освещённости объектов
0
13 комментариев
Написать комментарий...
Ponchik

Прикольно!
Но мне интересно, когда инди разработчики додумаются делать не просто пиксель арт, а эмуляцию CRT, как изначально и задумывалось? Вообще странно, что инди разрабы пытаются косить под ретро делая все тупо из пикселей. На современных экранах это не работает, будто они не помнят или вообще не знают как это выглядело тогда.

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

Согласен, любопытно было бы посмотреть. Но ведь такие игры должны же уже быть, неужели никто не угарел и не настроил так графон в своей пиксельной игре. Мб кто знает проекты такие?

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

Такой эффект точно можно включить в Loop hero и в российских Despotism и какая-то вторая игра от них.

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

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

Спасибо! Вспомнил, что в эмуляторах иногда по настроению включаю такой эффект. Zelda Link To The Past с этим сглаживанием проходил помню

Это все совершенно точно необязательно, конечно. Просто любопытный аспект)

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

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

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

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

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

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

Развернуть ветку
Кристина Рейнхарт

Цифровое изображение всегда состояло из пикселей - полосы СRT можно получить наложив поверх игры фильтр, отдельно спрайты перерисовывать разумеется не нужно. Другое дело что я ещё с бородатых времён не очень такое жалую, наоборот гораздо больше люблю на эмулях эти игры перепроходить без CRT-искажений. Но на вкус и цвет...

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

Ответить
Развернуть ветку
Ygor' Denysovych

О прикольно, я такое же в блендере настроил

Ответить
Развернуть ветку
Знаменитый хот-дог

Покажи плз скрин нод

Ответить
Развернуть ветку
Андрей Торчинский

Глядя на первую гифку подумал что он ещё и дизеринг запилил, а потом дочитал до конца и оказалось, что это просто компрессия самой гифки такая :(

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

Мне вот кажется, что когда источник света приближается к объекту, то самая яркая область должна становиться больше, а более тёмные меньше или исчезать совсем. А тут происходит наоборот – самая яркая область исчезает при приближении.

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

У Лукаса Поупа довольно подробно было на эту тему, стоит поискать, посмотреть.

Ответить
Развернуть ветку
Немецкий блик

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

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

Да, у него про дизеринг. С освещением вроде бы всё понятно было.

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

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

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

Earth is flat

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