Сглаживание в пиксель-арте

Что это такое

Пиксели квадратные, поэтому любая линия, которая не идеально прямая и не под чистым углом, превращается в лесенку. На плавной кривой, например на ободе щита или макушке головы, эти ступеньки при увеличении 1× могут выглядеть зубчатыми.

Ручное сглаживание (часто пишут AA) смягчает ступеньку, ставя один-два пикселя промежуточного цвета в угол, где линия скачет. Глаз смешивает их, и кривая кажется плавнее, чем пиксели на самом деле. Цвет обычно берут из существующей рампы, где-то между линией и тем, что рядом с ней.

Это ручной эффект: несколько выбранных пикселей, а не фильтр по всему спрайту.

Когда помогает

• Длинные плавные кривые. Больше всего выигрывает круг или склон, который шагает по два-три пикселя.
• Крупные спрайты. От 64 px и больше есть место для промежуточных пикселей без потери деталей.
• Внутренние линии. Линии между частями спрайта лежат на известных цветах, поэтому промежуточный оттенок легко выбрать, и он всегда верен.

Когда обойтись без него

• Маленькие спрайты. При 16 или 24 px каждый пиксель несет форму. Промежуточный пиксель там часто выглядит как пятно или лишняя деталь.
• Внешний край на неизвестном фоне. Сглаженный силуэт смешан под один цвет фона. Поставьте спрайт на другой, и мягкие пиксели проступят бледным ореолом.
• Очень ограниченные палитры. При четырех или восьми цветах может не найтись оттенка между двумя другими. Тогда ступеньки остаются резкими, и это часть стиля.
• Крупные, рубленые стили. Некоторым играм нужна каждая ступенька на виду. Это выбор, а не ошибка.

Частые ошибки

• Слишком много. Сглаживание каждой ступеньки делает весь спрайт размытым, будто его увеличили с включенной фильтрацией.
• Не та длина. Ряд промежуточных пикселей должен соответствовать ступеньке, которую он смягчает. Один пиксель в конце длинной ступеньки почти ничего не дает; длинный ряд рядом с короткой ступенькой дает выпуклость.
• Бандинг. Если выстроить промежуточные пиксели во вторую параллельную линию, край выглядит двойным.
• Сглаживание движка. Билинейная фильтрация сводит на нет ручное сглаживание. Установите фильтр текстуры на nearest.

Как это делает Pixor

Pixor рисует линии шириной в один пиксель без L-образных углов и имеет параметр сглаживания с тремя уровнями. 0 оставляет все линии жесткими. 1 смягчает только силуэт. 2 смягчает углы всех линий, а не только внешний край. Пробуйте 0 для маленьких спрайтов и пестрых фонов, а 1 или 2 — для крупных спрайтов, где кривым есть где развернуться. Параметр входит в облик в графе стиля, а справочник параметров описывает его вместе с другими параметрами линий.

См. также

• Обводка: линии, которые смягчает сглаживание
• Selout: цветная обводка, которая уже смягчает край
• Размеры спрайтов: сколько места у спрайта для промежуточных пикселей