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

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

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

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

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

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

О платном варианте стоит знать две вещи. $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, сцена выглядит собранной из разных игр. Решите масштаб в первый же день и держитесь его.

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

Чем помогает 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 — ограничение, под которое проектировались классические спрайты)