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

Перед редактированием продублируйте спрайт или сохраните отдельную версию. Затем скройте слои бликов и теней либо перекрасьте внутренние пиксели в базовый тон. Взгляните на плоскую версию в целевом масштабе на экране, а не только в увеличенном виде в редакторе. Если поза, предмет или ключевой элемент все еще неразборчивы, доработки требует базовый силуэт или взаимное расположение деталей; дополнительное затенение лишь добавит визуального шума, не исправив форму. Руководство по спрайтам от Adafruit предлагает сначала строить базовую форму, а затем добавлять тени для объема, что подтверждает подход к затенению как к последующему этапу, а не к основе узнаваемости (Руководство Adafruit по созданию пиксельных спрайтов для MakeCode Arcade).

Мыслите с точки зрения роли каждого оттенка. Оставьте базовый цвет для основной поверхности, более темный тон для самой крупной плоскости тени и — только если это необходимо — более светлый оттенок для блика. Объедините или удалите оттенки, которые не разделяют формы, не проясняют направление света и не обозначают важную деталь. Универсального «правильного» количества цветов не существует: небольшие спрайты и стили бывают разными. Полезный критерий — несет ли каждый оставшийся оттенок видимую функцию в исходном масштабе. В руководстве Adafruit отмечается, что простой спрайт может обходиться ограниченной палитрой, тогда как более сложное затенение способно существенно увеличить число цветов (Руководство Adafruit).

Приблизьте изображение и оцените каждый оттенок как группу пикселей (кластер). Если тень распалась на разрозненные точки, решите, являются ли эти пиксели важными акцентами. Удалите случайные точки или объедините их в более широкое теневое пятно, повторяющее форму объекта. Saint11 рекомендует начинать с крупных цветовых кластеров и затем уточнять их, а также называет одиночные однопиксельные кластеры частым источником визуального шума, признавая при этом, что отдельный пиксел может быть оправдан для текстуры или яркой детали (Руководство Saint11 по наброскам кластерами).

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

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

Если у спрайта есть контур, проверьте, как он читается и на фоне спрайта, и на фоне окружения. В руководстве Lospec поясняется, что разделяющая функция контура зависит от контраста и что его цвет может меняться в зависимости от освещенности формы или разного фона («Пиксельные контуры, часть 2: использование цвета» от Lospec). Если контур и тень сливаются в одну тяжелую полосу, попробуйте сделать контур светлее, использовать его выборочно или удалить внутреннюю линию, которая дублирует ту же границу.

Определитесь с направлением света, которое должен передавать спрайт, а затем проверьте, согласуются ли с ним основные участки тени. Тень, нанесенная по всем краям, может создать впечатление, будто форму обвели контуром, а не осветили. Удалите вторичные тени, которые противоречат основному направлению или дробят простую плоскость, не делая объем понятнее. Лаконичная теневая форма способна описать нижнюю грань, наложение элементов или углубление; мелкие штрихи вдоль контура необязательны.

Это решение направлено на упрощение, а не является жестким правилом, обязывающим каждый спрайт следовать реалистичному освещению. Плоские графичные стили, контурный свет (rim light) и намеренно необычные палитры — все это имеет право на жизнь. Оставляйте отступления от единообразного освещения, если они служат явной стилистической цели, и оценивайте их в том масштабе и на том фоне, где арт будет использоваться.

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

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

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

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

• Adafruit Learning System, «MakeCode Arcade Pixel Art Sprites» — построение спрайтов, размер палитры и добавление теней на базовую форму.
• Saint11, «2 - Cluster Sketching and Painting» — рисование от крупных кластеров и выявление изолированных пикселей.
• Lospec, «Pixel Art Outlines Part 2: Using Color» — поддержание контраста контуров на затененных спрайтах и на различных фонах.