Пиксель-арт для игр: руководство для начинающих

Пиксель-арт для игр — это четыре исходных решения и одна привычка. Выберите редактор: на первую неделю хватит бесплатного в браузере, а если останетесь в деле — Aseprite. Работайте на маленьком холсте: 16x16 пикселей для предметов, 32x32 для персонажа. Возьмите готовую палитру не больше чем из 16 цветов, а не выдумывайте свою. Экспортируйте PNG и увеличивайте картинку только в целое число раз. А привычка такая: каждый пиксель стоит на своём месте не случайно. Ниже эти решения разобраны в том порядке, в каком с ними сталкивается новичок, — от первой точки до спрайт-листа, который движок не размажет.

Что такое пиксель-арт#

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

Если стиль вы ещё не выбрали, прочитайте сравнение пиксельной и векторной графики. Здесь считается, что выбор уже сделан.

Редакторы: платный стандарт и три бесплатных#

Редактор	Цена	Платформы	Для чего
Aseprite	$19.99, разово	Windows, macOS, Linux	Анимация и спрайт-листы; стандарт, на который рассчитано большинство уроков
LibreSprite	Бесплатный, открытый код	Windows, macOS, Linux	Полноценный настольный редактор без затрат
Pixelorama	Бесплатный, открытый код	Windows, macOS, Linux	Слои и эффекты; написан на движке Godot
Piskel	Бесплатный	Браузер, есть офлайн-режим	Первые пробы без установки

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

Не тратьте неделю на выбор. Откройте Piskel во вкладке браузера и нарисуйте что-нибудь сегодня вечером; смените редактор позже, когда анимация станет частью вашей рутины. Широкое сравнение бесплатных программ для разных стилей — в обзоре бесплатных редакторов 2D-графики.

Первый спрайт по шагам#

1. Новый холст 16x16 пикселей. Маленький размер — это не ограничение, а суть. Экран консолей 1980-х целиком был около 256x240 пикселей, классические спрайты — 8-16 пикселей ростом, и они читались. Большой холст позволяет прятать слабые формы за деталями.
2. Импортируйте готовую палитру. 16 цветов PICO-8, четыре оттенка Game Boy или любую из тысяч палитр на Lospec. Фиксированная палитра убирает решение, которое вы пока не примете хорошо, а её готовые ряды оттенков держат спрайт цельным. Как собирать цветовые ряды самому — в руководстве по теории цвета.
3. Нарисуйте силуэт одним цветом. Переключитесь на масштаб 100 процентов. Если в реальном размере непонятно, что перед вами, правьте форму, пока не станет понятно. Одна эта проверка отсеивает большинство слабых спрайтов.
4. Добавьте по два тона на каждый материал. Светлая сторона, теневая сторона и один источник света на весь спрайт. Для 16x16 этого достаточно; больше тонов на таком размере превращаются в шум.
5. Причешите края. Уберите случайные пиксели, выровняйте «лесенки» линий и решите, нужна ли обводка. Тёмная обводка с примесью цвета самого предмета смотрится лучше чистого чёрного.
6. Проверьте в масштабе 100, 200 и 400 процентов. Спрайт должен работать во всех трёх. В игре его увидят в движении в логическом размере 100 процентов — это главный размер.

Пять приёмов, на которых держится стиль#

Приём	Что делает	Чего избегать
Кластеры	Заливка крупными связными пятнами одного цвета; большие формы остаются читаемыми	Рассыпанные одиночные пиксели — в реальном размере они выглядят как шум
Сдвиг оттенка	Ряды теней уводят в холод, света — в тёплое	Ряды из чисто серого или коричневого от чёрного к белому: картинка выглядит мёртвой
Дизеринг	Шахматный переход между двумя оттенками там, где нужна плавность	Дизерить большие площади — издали это превращается в помехи
Точечное сглаживание	Несколько тёмных пикселей смягчают только внутренние изгибы линии	Автоматическое сглаживание — оно размывает сетку всюду
Обводка	Пиксельная рамка помогает спрайту отделиться от фона	Толстая чёрная обводка на всём подряд по умолчанию

Ни один из приёмов не требует таланта — только меры. Каждый из них — способ делать меньше: меньше цветов на материал, меньше переходов, меньше обводок. Именно эта экономность и выглядит как стиль.

Самая простая полезная анимация#

Анимируйте до того, как почувствуете себя готовым, но начните с самого дешёвого цикла: покачивание в ожидании на 4-8 кадров при 8-12 кадрах в секунду — классическая стартовая точка. Включите режим кальки (onion skin), чтобы просвечивали предыдущие кадры, и меняйте в кадре одну вещь: в цикле ходьбы сначала двигаются ноги и только потом руки. Когда картинка устроит, экспортируйте кадры горизонтальной полосой — спрайт-листом, который движок сам разрежет на кадры.

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

Экспорт: как не дать движку испортить спрайт#

Четыре правила избавляют от большей части проблем:

• Только PNG. Сжатие JPEG безвозвратно смазывает пиксельные края. Рядом с PNG храните исходник в формате редактора (.ase и тому подобное) — к спрайту вы ещё вернётесь.
• Увеличивайте в целое число раз. 1x, 2x, 4x. Дробный масштаб даёт пиксели разного размера, которые мерцают в движении.
• Отключите сглаживание при импорте. Движки по умолчанию сглаживают текстуры; переключите фильтрацию на «по ближайшему пикселю» (nearest-neighbor, её же называют point), иначе спрайт затуманится при первом же повороте или масштабировании.
• Один масштаб пикселя на весь проект. Если персонаж нарисован в 32 пикселя, а дерево содержит детали на 50, сцена выглядит собранной из разных игр. Решите масштаб в первый же день и держитесь его.

Ошибки, которые совершают почти все новички#

Ошибка	Почему вредит	Как исправить
Рисовать в 256x256 «ради деталей»	Детали становятся шумом, спрайт разваливается в масштабе 100 процентов	Начинайте с 16-32 пикселей; детали — только если форма читается
Подбирать цвета вручную на глаз	Ничто не заставляет оттенки дружить между собой, сцена становится грязной	Импортируйте фиксированную палитру до 16 цветов
Разный масштаб пикселей	Ассеты выглядят как из разных игр	Один масштаб для всех ассетов, решённый заранее
Сохранять в JPEG	Артефакты сжатия оседают на краях	Всегда PNG
Масштабировать со сглаживанием	В лучшем случае размытие, в худшем — мерцание в движении	Nearest-neighbor и только целые числа
Детали раньше силуэта	Вы полируете форму, которую никто не узнаёт	Сначала тест плоским силуэтом

Чем помогает Egmatic#

Спрайты раскрываются в игре, а не в редакторе. Egmatic — no-code-редактор 2D-игр с живым предпросмотром сцены: импортировали спрайт-лист, положили спрайт в уровень — и через минуту видите, как он двигается. Если цвет в палитре или отдельный кадр не смотрится, поправьте и тут же посмотрите на обновившуюся сцену, а дальше тем же путём идите к играбельной сборке, не переключаясь на инженерные инструменты. Соседние ремёсла разобраны в руководстве по теории цвета и техниках спрайт-анимации.

Вывод#

Пиксель-арт вознаграждает узкий набор решений, принятых последовательно: маленький холст, готовая палитра, целые пиксели, поставленные осознанно, и путь экспорта, где ничто не сглаживается. Включите бесплатный редактор сегодня вечером, нарисуйте один силуэт 16x16 и проверьте его плоским цветом в масштабе 100 процентов. Именно этот цикл, повторённый много раз, был началом у каждого состоявшегося пиксель-художника — и его достаточно, чтобы подготовить спрайты для первой игры.

Источники#

1. Aseprite — страница в Steam (разовая цена $19.99) и официальный сайт (открытый исходный код, самостоятельная сборка бесплатна)
2. LibreSprite — официальный сайт (бесплатный редактор пиксель-арта с открытым кодом)
3. Pixelorama — официальный сайт (бесплатный редактор спрайтов на движке Godot)
4. Piskel — официальный сайт (бесплатный редактор в браузере с офлайн-режимом)
5. Lospec — список палитр и уроки пиксель-арта
6. Википедия — Nintendo Entertainment System (нативное разрешение кадра 256x240 — ограничение, под которое проектировались классические спрайты)