Пиксель-арт второй ступени: палитры и дизеринг

Первые правила пиксель-арта я уже разбирал по граблям: палитра до рисования, силуэт первее деталей. Но наступает момент, когда формально всё делаешь правильно — а спрайт выглядит плоско и «дёшево». Это ступень вторая: теперь важно не сколько цветов, а какие именно и как они соседствуют.

Палитра: сдвиг оттенка вместо смешения

Новичок строит градиент так: белый → серый → чёрный, или красный → тёмно-красный. Ошибка в том, что при смешении с чёрным цвет «умирает» — теряет насыщенность и становится грязным. Профессиональный приём — hue shifting: при затемнении оттенок сдвигается по кругу. Тени кожи уходят не в тёмно-телесный, а в фиолетово-красный; тени листвы — в сине-зелёный; подсветка металла — наоборот, в тёплый.

Рабочая схема рампы из 4–5 значений: возьми базовый цвет, для тени сдвинь оттенок на 10–15 градусов в сторону холодного и добавь насыщенности, для света — на столько же в тёплую. Три цвета такой рампы дают больше объёма, чем пять оттенков одного тона. Проверка простая: обесцвети спрайт. Если рампа схлопнулась в одну серую полосу — оттенки не различались, объём был фикцией.

Дизеринг: не шахматка, а семейство паттернов

Шахматное чередование — частный случай. Полный арсенал упорядоченного дизеринга (ordered dithering) шире:

• Матрица Байера 4×4 — классический паттерн: 16 пороговых уровней плотностей, из которых собирается плавный градиент даже на 3–4 цветах, без «ступеньки мозаики».
• Направленный дизеринг — точки вытягиваются по форме объекта: вдоль рёбер, по направлению роста шерсти, течения воды. Мозг читает регулярные тянущиеся паттерны как объём, а случайные — как шум.
• Граница уровней — по 1 пикселю. Между двумя зонами дизеринга оставляй резкий переход в 1px: это «линия раздела» света, она и даёт рисунку характер. Размазанные переходы убивают всё.

И главное: дизеринг — приёма последнего рубежа. Сначала попробуй решить переход плоскими зонами: 9 раз из 10 правильная граница между двумя цветами выглядит лучше любого градиента.

Субпиксельная анимация и цикличные палитры

Анимация в пиксель-арте делится на два сорта. Обычная — двигаются пиксели. Субпиксельная (subpixel animation) — пиксели стоят, меняется их цвет: капля воды на краю листа не «падает», а кадр за кадром перекрашивает столбец пикселей под собой, и глаз видит движение там, где физически ни один пиксель не сдвинулся.

Родственный трюк — цикличная палитра (palette cycle): группа цветов палитры по кругу сдвигается по конвейеру. Так делали воду и пламя в играх NES. Факел, поток лавы, неоновая вывеска оживают нулевой стоимостью по памяти: спрайт не меняется вообще, меняется только таблица цветов. В Aseprite это отдельные «кольца» (color rules), в движке — подмена палитры за кадр.

Разбор на конкретном сприте: фонарь 24×32

Возьмём фонарь 24×32 в рампе из 5 цветов. Плоский вариант: корпус двумя оттенками, стекло одним, огонь отдельным пятном. Версия второй ступени: стекло — направленный дизеринг по диагонали (свет сверху-слева), огонь — цикличная тройка жёлтый→оранжевый→красный, световой конус на земле — субпиксельные столбцы, которые «дышат» на 1px вверх-вниз. Пиксели те же, палитра та же — а фонарь горит.

Правило перехода на вторую ступень: когда спрайт читается, но не живёт — проблема не в количестве цветов. Проблема в их соседстве.