3D в пиксель-арт: полное руководство

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

Краткая история пре-рендеренных спрайтов

В 1994 году Rare выпустила Donkey Kong Country на Super Nintendo. Ее персонажей и декорации моделировали и рендерили на рабочих станциях Silicon Graphics, а затем сводили к маленьким спрайтам и ограниченным цветам консоли. Игра выглядела непохожей ни на что другое на этой системе и показала, что 3D-конвейер может питать 2D-игру.

В конце девяностых пре-рендеренные спрайты стали обычным делом на ПК. Diablo (1996), Fallout и Fallout 2, StarCraft и Age of Empires — все использовали юнитов и персонажей, отрендеренных из 3D, часто во многих направлениях, потому что модель можно повернуть бесплатно, а рисунок нельзя.

Техника вернулась в другом виде в Dead Cells (2018). Motion Twin анимировала персонажей в 3D и рендерила их в маленькие пиксельные кадры, а процесс описала в статье 2018 года на Gamasutra (ныне Game Developer) «Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells». Смысл был тем же, что и в 1994: маленькая команда получает плавную, согласованную анимацию, не рисуя каждый кадр.

Подробнее — в статье Пре-рендеренные спрайты.

Зачем рендерить из 3D

Снова и снова звучат три причины.

• Любое направление. Когда модель уже есть, новая сторона — это просто еще одна камера. Четыре, восемь или шестнадцать направлений настраиваются одинаково легко.
• Согласованная анимация. Пропорции персонажа одинаковы в каждом кадре и с каждой стороны. Нарисованные вручную спрайты «плывут», скелет — нет.
• Изменения обходятся дешево. Поменяйте цвет брони, размер спрайта или палитру и отрендерите снова. С нарисованными вручную листами позднее изменение означает перерисовку сотен кадров.

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

Что делает изображение пиксель-артом

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

Единый масштаб пикселя

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

Фиксированная опорная точка

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

Ограниченные палитры и рампы

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

Сдвиг оттенка

Хорошие рампы не просто темнеют: по ходу они меняют оттенок, обычно холоднее в тени и теплее на свету. Это сдвиг оттенка, и во многом именно он делает пиксель-арт написанным красками, а не посеревшим.

Выборочная обводка и чистые линии

Черная линия вокруг всего подходит для некоторых стилей, но многие художники окрашивают обводку по фигуре, которую она окружает: темнее на теневой стороне и светлее или вовсе без нее на освещенной. Это selout. Линии должны быть шириной в один пиксель без удвоенных L-образных углов, а тонкие части вроде клинков мечей и посохов должны оставаться чистыми однопиксельными линиями, а не распадаться. Подробнее в разделе Обводка.

Ни одиночных пикселей, ни мерцания

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

Никакого случайного дизеринга

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

Конвейер шаг за шагом

Вот обычная цепочка и место Pixor на каждом шаге.

1. Модель

Подойдет любая модель — с ригом или статичная. Pixor читает glTF и GLB, FBX (включая загрузки с Mixamo), OBJ и файлы MagicaVoxel .vox. Простые модели с четкими формами и различимыми материалами дают лучшие спрайты, чем очень детализированные: детали меньше пикселя все равно потеряются.

2. Камера на каждую сторону

Каждое направление — это камера, смотрящая на модель. Сайд-скроллерам нужна одна; играм с видом сверху и изометрическим — кольца по 4 или 8. Наклон важен не меньше направления: вид сбоку, вид три четверти, изометрический вид 2:1 и вид сверху подходят разным играм. В Pixor каждая сторона — это камера, кольцами по 4, 8 или 16 или под любым выбранным углом.

3. G-буфер

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

4. Свет полосами

Плавное затенение превращается в несколько плоских полос: свет, полутон, тень. Пиксель-арт обычно использует от двух до четырех. Трудность — сохранять полосы стабильными, когда модель движется, чтобы граница полосы не скакала туда-сюда на едва повернувшейся поверхности. Pixor затеняет от 1 до 4 полосами и держит полосу, пока поверхность явно не повернется.

5. Линии

По глубине, нормалям и id частей можно найти силуэт, внутренние ребра между частями и сгибы, где поверхность складывается. Каждое можно рисовать по-своему: темным, цветным или не рисовать вовсе. Pixor считает линии силуэта, внутренние и линии сгибов отдельными видами, у каждого свой параметр выборочной обводки, рисует их шириной в один пиксель без L-образных углов и сохраняет тонкие части однопиксельными линиями.

6. Палитра

Каждая полоса каждого материала сопоставляется с цветом рампы. Можно позволить инструменту построить рампы из цветов модели или задать фиксированную палитру, общую для всей игры. Pixor строит рампы со сдвигом оттенка для каждого материала и может использовать автоматическую палитру, одну из семи встроенных, файл Lospec .hex или GIMP .gpl или палитру, взятую из изображения. Он записывает индексированные PNG и имеет консольные режимы с цветовыми ограничениями Game Boy, NES, PICO-8, TIC-80 и C64.

7. Очистка

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

8. Лист

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

В Pixor каждый из этих этапов — узел в графе стиля, так что любой можно увидеть и изменить. Понравившийся облик можно сохранить как набор и использовать во всем проекте. Встроенные пресеты (clean, selout, retro4, flat и wireframe) — отправные точки.

Выбор размеров и направлений

Размер — прежде всего дизайнерское решение. Маленький спрайт легче читать в толпе и дешевле дорабатывать; большой показывает больше характера. Примерные ориентиры:

• 16 px подходит для тайлов, предметов и очень маленьких персонажей.
• 32 px — распространенная высота персонажа для top-down игр и платформеров.
• От 48 до 64 px — достаточно места для лиц, снаряжения и выразительной анимации.

Выберите масштаб в пикселях на метр, который дает главному персонажу нужную высоту, а остальное пусть подстроится. Выводите игру с целочисленным увеличением (2×, 3×, 4×), чтобы каждый пиксель графики становился на экране чистым квадратом. Подробнее об этом — в разделе Размеры спрайтов.

Направления: одна сторона для сайд-скроллеров (отразите ее для другого направления), четыре для простых игр с видом сверху, восемь для большинства экшенов и стратегий, шестнадцать для того, что поворачивается плавно, например транспорта.

Анимация

У 3D-анимации есть поза для каждого мгновения. В пиксельной анимации лишь горстка кадров, и эти кадры выбираются, а не берутся через равные промежутки.

Крайние позы и удержания

Важнее всего крайние кадры: контактная поза шага, верхняя точка прыжка, момент удара мечом. Хорошая спрайтовая анимация оставляет их и держит чуть дольше, а промежуточные кадры, которые ничего не дают на малых размерах, отбрасывает. Равномерно расставленные кадры обычно выглядят «ватными». Умные кадры Pixor выбирают крайние позы и удерживают их.

Меньше кадров — чище кадры

Ходьбы из шести-восьми кадров вполне достаточно при 32 пикселях. Больше кадров — больше шансов на мерцание и больше доработки. Pixor измеряет мерцание по всей анимации.

Получение анимации

Вы можете анимировать модель сами, использовать клипы, пришедшие с ней (или в отдельных файлах клипов), или перенести клипы с другого рига. В Pixor также есть библиотека движений с простыми действиями (ожидание, ходьба, бег, прыжок, атака, получение удара, смерть) и движениями объектов (вращение, покачивание, качание, пульсация) для реквизита и подбираемых предметов.

Ручная доработка

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

Обычно для этого используют Aseprite. Pixor экспортирует файлы .aseprite с тегом для каждого действия и стороны. Когда вы меняете модель или параметры и рендерите снова, нарисованные вручную слои остаются на своих кадрах, поэтому доработки не пропадают при повторном запекании. См. Aseprite.

Экспорт в движки

Движкам нужны кадры плюс метаданные. Распространенные цели:

• Спрайт-листы в PNG с JSON-файлом, перечисляющим кадры, действия и стороны.
• SpriteFrames Godot для проектов Godot.
• GIF или APNG для превью, страниц магазинов и постов в соцсетях.
• Карты нормалей и глубины, если ваш движок освещает 2D-спрайты.

Pixor экспортирует все это. Поскольку рендер детерминирован, одна и та же модель с теми же параметрами всегда дает те же пиксели, так что листы можно пересобирать в любое время без сюрпризов. См. Экспорт и руководство по экспорту.

Попробуйте

Pixor — настольное приложение для Windows и Linux, которое выполняет каждый из шагов выше, офлайн и без аккаунта. В нем нет генеративного ИИ: он рендерит вашу модель с выбранными вами параметрами. Он стоит $19.99 один раз, все обновления бесплатны. Начните с раздела Как это работает, посмотрите в библиотеке спрайты, отрендеренные таким способом, или прочитайте руководство, чтобы увидеть все параметры.