Шейдер 3D-пиксель-арта для Godot 4

Два способа получить пиксель-арт в 3D-игре

Есть два распространённых способа сделать игру на Godot похожей на пиксель-арт. Первый — запекание: отрендерить каждого персонажа со всех сторон в спрайт-лист и проигрывать его в AnimatedSprite2D. Второй — рисовать саму 3D-сцену в низком разрешении через шейдер, который разбивает свет на полосы, ограничивает цвета и рисует обводки, а затем увеличивать её с фильтрацией nearest. Запросы «3D pixel art shader Godot» и «Godot 4 post processing pixel art» относятся ко второму.

У каждого свой смысл. Запечённые листы дают ручной контроль и возможность доработки, и ничего не стоят в отрисовке. Реальное время справляется с тем, что не вместит ни один лист: уровень, по которому движется камера, машина, поворачивающаяся под любым углом, сцена, где всё движется одновременно. Беда в том, что одно с другим редко совпадает: спрайты идут из одного конвейера, уровень — из отдельно написанного шейдера, и обводки, цвета и свет расходятся.

pxr shader решает это, записывая шейдеры Godot из того же Стиля, которым запекаются спрайты.

Запись шейдеров

Укажите модель и облик или проект, а также папку внутри вашего проекта Godot:

pxr shader knight.glb --preset selout --size 64 -o my-game/pixor
pxr shader game.pixor -o my-game/pixor --res res://pixor

-o — папка на диске; --res — та же папка в том виде, как её видит Godot, путь res://, если это не res:// и имя папки. В папке появляется пять файлов:

Файл	Что делает
pixor_look.gdshader	Материал. Каждый пиксель получает рампу своего цвета, ступень своей полосы света и блик, как у запечённого спрайта, в собственных цветах палитры. Он без затенения: облик и есть свет.
pixor_lines.gdshader	Линии, экранный проход: силуэт на пустых пикселях вокруг модели и внутренние линии там, где одна поверхность стоит перед другой, в цветах линий Стиля.
pixor_view.tscn	Пиксельная сетка: вьюпорт размером со спрайт, увеличенный в четыре раза с фильтрацией nearest, с камерой Pixor и линиями в нём.
pixor_look.gd	PixorLook.apply($Level) придаёт облик каждой сетке под узлом, сохраняя цвет и текстуру каждого материала.
pixor_shader.json	Размер, масштаб, палитра и то, что из Стиля шейдеры не включают.

Добавьте в сцену

1. Скопируйте папку в проект Godot или запишите её туда сразу через -o.
2. Добавьте pixor_view.tscn в главную сцену. Она рисует 3D-мир, в котором находится, через пиксельную сетку, с проходом обводки.
3. Придайте сеткам облик. Из скрипта PixorLook.apply($Level) задаёт материал каждой сетке под узлом. Вручную поставьте pixor_look.gdshader на материал сетки.

Больше ничего настраивать не нужно: полосы света, рампы, палитра и цвета линий записаны в шейдеры. Чтобы изменить облик, измените его в Pixor и снова запустите pxr shader.

--view-scale задаёт, во сколько экранных пикселей превращается каждый пиксель арта (по умолчанию 4). Держите значение целым, как для любого пиксель-арта; почему, объясняет руководство по размерам спрайтов.

Чего не хватает в реальном времени

В реальном времени кадр рисуется так же, как запечённый, с тремя отличиями:

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

Каждый узел Стиля сообщает, работает ли он в реальном времени: pxr nodes --graph style печатает под каждым «in real time: yes» или «not yet». Стиль, в графе которого есть узел, не работающий в реальном времени, отклоняется, и ошибка называет этот узел. Добавьте --partial, чтобы всё равно записать шейдер его настроек без этого узла.

Используйте оба способа

Сильнее всего работает сочетание обеих половин. Персонажей, которым нужны ручная доработка, много кадров и точные силуэты, запеките в листы (Pixor для Godot описывает SpriteFrames и готовую сцену). Мир, транспорт и всё слишком большое или свободное для запекания рисуйте через pxr shader. Поскольку оба способа идут из одного Стиля, у них общие рампы, полосы и палитра, и игрок видит одну игру, а не две.

Если спрайт должен реагировать на свет в 2D-сцене, набор света (--export light-kit) освещает запечённые спрайты по их картам нормалей в Godot, Unity или GameMaker, а каждый освещённый пиксель остаётся на своей рампе; см. освещение с правильной палитрой. Все параметры шейдеров реального времени описаны в разделе руководства.