Как создать сел-шейдинг освещение для пиксель-арта — короткий туториал
Здесь нет обводки, но зато есть чёткое деление на разные зоны освещённости.
Инди-разработчик Джордж Грин показал в Твиттере, как создал шейдер пикселизации, который позволяет повторить эффект сел-шейдинга. Он использует эту технику в собственной игре Bone to Pix. Пересказываем его туториал.
При создании своей игры Грин использует фрагментные шейдеры — они работают с экранными, а не с текстурными пикселями. В пиксель-арте один текстурный пиксель отображается при помощи множества экранных. Из-за этого получается несоответствие — разные части пикселя текстуры получают разные данные. В результате изображение выглядит некорректно.
Решение заключается в том, чтобы привязать данные к пиксельной сетке изображения. Для этого нужно выровнять позиции вершин и фрагментов по сетке пикселей.
Сначала привязываем вершины в шейдере вершин.
Затем привязываем отдельные позиции фрагментов, чтобы всё, что находится в одном квадрате сетки, имело одинаковое значение.
Наконец, убедитесь, что в настройках импорта текстур для Mesh Type установлено значение «Full Rect». Если оставить значение «Tight» пиксели изображения не будут выровнены в сгенерированной сетке, поэтому вы получите неправильные значения.
Теперь, когда у вас есть общие значения для каждого фрагмента, вы можете создавать любые шейдеры освещённости, не нарушая пиксельную сетку.