Траектория «Геймдев» · линия B · конспект 2 из 8

От черновика до игрового ассета

О чём эта тема: Рабочий конвейер пиксель-арта: десять шагов от палитры и контура до анимации — и вторая половина пути: как готовый спрайт правильно импортировать в Unity.
Аннотация: Конспект разбирает пошаговый метод создания спрайта, которым один и тот же «ужасный человечек» доводится до персонажа приличного уровня: готовая палитра, малое разрешение, контур без дыр, цветовые диапазоны, простое правило затенения, итерации над пропорциями, чистка пиксельных скоплений и оттенков, доводка деталей и базовая анимация, включая субпиксельный приём «двигать цвета вместо пикселей». Затем спрайт пересекает границу линий траектории: разбираются настройки импорта текстуры в Unity — Pixels Per Unit, режим фильтрации и сжатие, — а интерактивный стенд показывает, во что превращается пиксель-арт при неправильных настройках.
Пререквизиты: B01 — термины (лайн, палитра, сглаживание, дизеринг) и мини-редактор: пригодится сохранённый из него PNG. Для раздела об импорте полезен A05 (панель «Проект», инспектор).
Мотивация: Частая жалоба независимого разработчика: «я программист, рисовать не умею, на художника денег нет». Опыт показывает обратное: следуя простым правилам, до пристойного уровня в пиксель-арте можно дойти за месяцы практики. Вторая частая беда уже нарисовавших: спрайт, чёткий в редакторе, в игре превращается в мыльное пятно — потому что Unity по умолчанию настроена под фотореалистичные текстуры, а не под пиксель-арт.

1. Десять шагов к спрайту

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

Черновой контур персонажа 32 на 32 пикселя — кривой человечек одним чёрным цветом — шаг 3: черновой контур

Финальный персонаж: шляпа, шарф, аккуратное затенение и чистый контур — после десяти шагов

Иллюстрации из разбора (см. «Источники»); увеличение — поточечное, каждый квадрат равен пикселю.

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

А вот как выглядит путь персонажа через эти шаги — от палитры до чистого спрайта:

Готовая палитра из каталога: три десятка цветов, разложенных по семействам — 1 · готовая палитра

Черновой чёрный контур персонажа — 3 · контур

Диапазоны палитры: цвета одного семейства от тёмного к светлому — 4 · диапазоны

Персонаж, залитый средними цветами диапазонов — 4 · заливка

Первые оттенки: светлые рёбра со стороны света, тёмные с противоположной — 5 · первые оттенки

Персонаж после чистки скоплений пикселей, появился нос — 7 · чистка блоков

Финальный персонаж со шляпой, шарфом и аккуратной светотенью — 9 · доводка

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

Анимация бездействия: половина спрайта опускается на пиксель и поднимается — 10 · простая

Анимация бездействия со вторичным движением шляпы и носа и субпиксельной перекраской — 10 · субпиксельная

Иллюстрации этапов — из разбора (см. «Источники»).

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

2. Импорт спрайта в Unity

Готовый PNG кладётся в папку Assets проекта (по A05 — в свою папку Sprites), после чего в инспекторе настраивается его импорт. Для пиксель-арта настройки принципиальны:

Параметр импорта	Значение для пиксель-арта и смысл
Texture Type	Sprite (2D and UI) — текстура становится спрайтом: её можно ставить в сцену и в элементы UI (Image из A08).
Pixels Per Unit	Сколько пикселей спрайта укладывается в одну мировую единицу Unity. Спрайт 16×16 с PPU = 16 занимает ровно 1×1 единицу — удобно для тайловых сеток; одинаковый PPU у всех спрайтов сохраняет их относительные размеры.
Filter Mode	Point (no filter). Режим по умолчанию (Bilinear) при масштабировании усредняет соседние пиксели — пиксель-арт «мылится». Point берёт ближайший пиксель без усреднения: квадраты остаются квадратами.
Compression	None. Сжатие текстур подбирает «похожие» цвета — на палитре из 8 цветов это заметно портит картинку, а выигрыш на крошечном спрайте ничтожен.

Тренажёр · стенд импорта: Point против Bilinear

Один и тот же спрайт, увеличенный как в игре: слева — Filter Mode Point, справа — имитация Bilinear (сглаживающее масштабирование). Подвигайте ползунок масштаба — разница нагляднее всего на большом увеличении. Кнопкой можно загрузить собственный PNG, сохранённый в мини-редакторе B01.

Filter Mode: Point — пиксели чёткие

Filter Mode: Bilinear — «мыло»

Масштаб спрайта×10

Свой спрайт (PNG из B01):

Типичная ошибка Оставить Filter Mode по умолчанию и искать проблему в своём рисунке. «Мыльный» спрайт в игре при чётком исходнике — почти всегда Bilinear-фильтрация или включённое сжатие, а не ошибка художника. Проверять настройки импорта — первым делом.

Дальше спрайт живёт обычной жизнью ассета: перетаскивается в сцену (Unity создаст объект со Sprite Renderer), назначается в поле Source Image компонента Image на холсте (A08) или нарезается на кадры анимации. Расставлять один и тот же тайл по уровню удобно через префабы из A05 — а если тайлов много, вспомните генератор из A13.

Контрольные вопросы

Выбор цветов — отдельное искусство, и готовая палитра избавляет новичка от главного источника ошибок; малое разрешение (16×16–32×32) прощает неточности, ускоряет итерации и упрощает пропорции и анимацию.
Цвета палитры, упорядоченные внутри одного семейства оттенков от тёмного к светлому; один цвет может входить в несколько диапазонов. При первой заливке берутся средние цвета диапазонов — края остаются для света и тени.
Зафиксировать направление света для всей игры; рёбра спрайта со стороны света красить более светлым цветом того же диапазона, противоположные — более тёмным. Дальние от зрителя части — темнее.
Оно убирает «скопления» — грязные блоки пикселей в контуре. Исключение: пиксель нельзя удалять, если после этого в контуре появится дыра.
Двигаются не пиксели, а цвета: граничные пиксели перекрашиваются светлее или темнее, имитируя смещение меньше чем на пиксель. Движение выглядит плавнее, чем честный сдвиг на один пиксель.
Сколько пикселей спрайта укладывается в одну мировую единицу Unity. Для тайловых игр удобно PPU, равный стороне тайла (16 для 16×16 — тайл занимает ровно единицу); главное — одинаковый PPU у всех спрайтов, чтобы сохранялись относительные размеры.
Bilinear-фильтрация усредняет соседние пиксели при масштабировании — чёткие квадраты превращаются в «мыло»; Point берёт ближайший пиксель без усреднения. Сжатие подменяет цвета ограниченной палитры «похожими» — искажения заметны, а экономия на крошечных спрайтах ничтожна.

Источники

Пиксель-арт: от черновика до игрового ассета // Хабр : [сайт]. — URL: https://habr.com/ru/articles/444738/ (дата обращения: 08.07.2026).
Sprites // Unity Documentation : [сайт]. — URL: https://docs.unity3d.com/Manual/Sprites.html (дата обращения: 08.07.2026).
Texture Import Settings // Unity Documentation : [сайт]. — URL: https://docs.unity3d.com/Manual/class-TextureImporter.html (дата обращения: 08.07.2026).