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

Пиксель-арт — это растровая графика, где изображение собирают буквально по пикселям. На маленьком спрайте — отдельном изображении персонажа, предмета или другого объекта в игре — одна точка может изменить выражение лица, сделать руку толще или сломать контур предмета. Поэтому здесь важны понимание формы и аккуратность.

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

Для пиксель-арта есть простые браузерные редакторы и более продвинутые программы для игровой графики и анимации. Первый спрайт можно нарисовать с базовым набором инструментов, а дополнительные функции пригодятся позже. Ниже разберём несколько подходящих редакторов.

Piskel

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

В Piskel можно создавать покадровую анимацию и сразу смотреть, как она выглядит в движении, а готовый рисунок — скачать в PNG или GIF. У редактора есть версии для Windows, macOS и Linux, но разработчики рекомендуют браузерную: именно её они поддерживают и обновляют.

Pixelorama

Pixelorama — бесплатный редактор с открытым исходным кодом. Его можно установить на Windows, Linux и macOS или запустить прямо в браузере.

В Pixelorama есть слои, палитры и инструменты для анимации. Например, во время работы можно видеть соседние кадры и ориентироваться на них, чтобы движения персонажа получались плавнее. Ещё здесь удобно создавать повторяющиеся элементы игрового мира — например, блоки земли, стены или дорожки.

LibreSprite, Krita и GIMP

LibreSprite — ещё один бесплатный редактор для пиксельной графики. В нём можно рисовать спрайты и делать покадровую анимацию. По набору задач он ближе к Piskel и Pixelorama, поэтому подойдёт, если хочется попробовать ещё один специализированный редактор.

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

Можно ли рисовать пиксель-арт на телефоне

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

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

В пиксель-арте проще начинать с маленького холста. Когда места немного, приходится выбирать самые важные детали — и становится понятнее, из чего вообще складывается персонаж или предмет.

Начни с холста 16 × 16 или 32 × 32

Чем меньше холст, тем тщательнее приходится выбирать детали. На холсте 16 × 16 пикселей всего 256: реалистичное лицо здесь не поместится, зато можно несколькими точками обозначить глаза, причёску или положение рук.

Для первого спрайта такого ограничения даже полезно придерживаться: оно помогает сосредоточиться на форме персонажа и не увязнуть в мелочах.

Увеличь изображение и включи сетку

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

При этом время от времени уменьшай картинку и смотри на неё целиком. При сильном увеличении персонаж может казаться аккуратным, а в обычном размере — превращаться в непонятное пятно. Поэтому проверяй спрайт примерно так, как его потом увидит игрок.

Отключи сглаживание

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

Следи за этим и при увеличении готовой картинки.

Например, спрайт 16 × 16 можно увеличить до 32 × 32 или 64 × 64. Тогда исходные пиксели превращаются в одинаковые квадраты и изображение сохраняет характерную чёткую сетку.

Сначала наметь силуэт, затем добавь основные цвета, свет и тень. Глаза, украшения, узоры на одежде и другие мелочи оставь напоследок.

Сначала сделай силуэт

Залей фигуру одним цветом и посмотри только на её контур. Уже на этом этапе должны читаться поза и основные части тела: голова, корпус, руки и ноги. Если что-то выглядит странно, поправь форму до того, как начнёшь добавлять детали.

Затем раздели персонажа на крупные цветовые области: кожу, волосы, одежду, обувь. На маленьком спрайте особенно важно следить за формой — даже несколько пикселей могут заметно изменить позу или пропорции.

Добавь свет и тень

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

Чтобы проверить, не сливаются ли части персонажа, временно сделай изображение чёрно-белым. Так проще заметить, что, например, волосы и куртка выглядят одним тёмным пятном. В таком случае один из цветов стоит сделать светлее или темнее.

Цвет тени тоже можно менять. Например, у красной одежды тень может уходить в фиолетовый, а освещённая часть — в оранжевый. Оттенки зависят от палитры и освещения, поэтому здесь можно экспериментировать.

Для первого персонажа лучше взять небольшую палитру — так проще следить за цветами и не плодить похожие оттенки. Для начала можно попробовать уложиться примерно в восемь цветов:

• основной цвет кожи, свет и тень;
• два-три цвета для одежды;
• цвет волос;
• тёмный цвет для контура и мелких деталей.

Если для рисунка нужен ещё один оттенок, добавь его. Главное — не создавать новый цвет для каждого маленького участка, если разницу между ними почти не видно.

Для графики целой игры тоже можно заранее собрать общую палитру, например из 16 или 32 цветов. Если одни и те же оттенки повторяются у персонажей, предметов и окружения, графика выглядит более цельной.

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

Набор таких фрагментов называется тайлсетом. Например, для участка с травой можно нарисовать середину, края, углы и несколько вариантов с камнями или цветами. Затем из этих элементов, как из конструктора, собирают игровую карту.

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

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

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

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

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

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

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

Кадры одной анимации удобно хранить в одном изображении. Такой файл называется sprite sheet, или лист спрайтов. Например, в нём можно собрать все положения персонажа во время ходьбы, прыжка или атаки. Кадры располагают в ряд, столбец или сетку. В результате вся анимация хранится в одном файле, который затем можно загрузить в игровой движок.

Готовый спрайт можно загрузить в Godot, Unity или GDevelop и использовать как персонажа, предмет или часть игрового уровня. После импорта проверь, как движок отображает картинку: пиксели должны оставаться чёткими даже при увеличении.

За это отвечает фильтрация изображения. Для пиксельной графики выбирают режим, который сохраняет чёткие границы между пикселями. Например, в Godot используется Nearest, а в Unity — Point (no filter). В GDevelop похожий режим масштабирования называется Nearest. При необходимости также проверь, отключено ли сглаживание изображения.

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

Начни с силуэта, добавь основные цвета, свет и тень, а затем попробуй простую анимацию из двух-трёх кадров. Готовый спрайт сохрани в PNG, а при переносе в игру проверь, чтобы пиксели оставались чёткими.

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