Основы создания спрайтовой графики в играх

Спрайт — это отдельное 2D-изображение объекта, которое движок выводит поверх фона сцены: персонаж, враг, монета, пуля, элемент интерфейса. Спрайтовая графика — это способ строить двухмерную игру из таких картинок, а не из трехмерных моделей.

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

Сразу разведем два близких термина, которые часто путают. Спрайт — одна картинка (один кадр). Спрайт-лист (sprite sheet) — одно изображение-файл, внутри которого лежит много таких кадров. Движок берет из файла нужный прямоугольник и рисует его на экране.

Спрайт-лист: как хранят кадры

Хранить каждый кадр отдельным файлом неудобно: сотни PNG замедляют загрузку и раздувают проект. Поэтому кадры складывают в один файл — спрайт-лист. Чаще всего кадры одного действия выкладывают в ряд или в сетку одинаковых ячеек.

Пример: анимация бега из 8 кадров размером 64×64 пикселя. В спрайт-листе это одна картинка шириной 512 пикселей (8 x 64) и высотой 64 пикселя. Чтобы показать третий кадр, движок вырезает прямоугольник со сдвигом 128 пикселей по горизонтали (2 x 64) и размером 64×64.

Раскладка бывает разной: ровная сетка (grid) с одинаковыми ячейками или плотная упаковка кадров разного размера. Ровную сетку проще нарезать автоматически, плотная упаковка экономит место, но требует таблицы координат каждого кадра.

Атлас текстур: зачем упаковывать спрайты

Атлас текстур (texture atlas, sprite atlas) — это спрайт-лист, собранный ради производительности: в один файл-текстуру пакуют много разных спрайтов, чтобы движок реже переключал текстуру при отрисовке.

Каждое переключение текстуры — это отдельный вызов отрисовки (draw call), а их число напрямую влияет на частоту кадров, особенно на телефонах. Когда спрайты лежат в одном атласе, движок рисует их пачкой (батчинг) и обращается к видеопамяти реже.

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

У упаковки есть подвох — просачивание соседних пикселей (bleeding): при масштабировании и фильтрации на границе кадра может проступить край соседнего. Лечится отступом между кадрами или дублированием краевого пикселя (extrude); эти опции есть в паковщиках и в настройках атласа.

Покадровая анимация: как спрайты оживают

Движение в 2D чаще всего делают покадрово: кадры одного действия быстро сменяют друг друга, как в мультфильме. Частота смены задается в кадрах в секунду (FPS) или длительностью одного кадра.

Кадров может быть сколько угодно — анимация возможна и из двух картинок. Больше кадров — плавнее движение, но больше работы художника и больше места в памяти. Для пиксель-арта обычно хватает 4-8 кадров на цикл ходьбы или бега.

Есть и второй подход — скелетная (bone) анимация: спрайт режут на части (рука, нога, корпус), привязывают к костям и двигают кости. Так делают инструменты вроде Spine и пакет 2D Animation в Unity. Покадровая анимация проще для старта и лучше подходит пиксель-арту, скелетная экономит кадры для крупных персонажей.

Простой пример покадровой анимации без движка — CSS для браузерной игры. Функция steps() заставляет фон прыгать по кадрам спрайт-листа, а не плавно ползти:

.runner {
  width: 64px;              /* размер одного кадра */
  height: 64px;
  background: url(run.png) left top no-repeat;
  image-rendering: pixelated;             /* четкие пиксели без размытия */
  animation: run 0.8s steps(8) infinite;  /* 8 кадров за 0.8 с, зациклено */
}

@keyframes run {
  from { background-position: 0 0; }
  to   { background-position: -512px 0; } /* сдвиг на 8 * 64 = 512 px */
}

Результат: элемент показывает 8 кадров бега за 0.8 секунды по кругу. steps(8) дает ровно 8 дискретных положений фона, поэтому кадры не смазываются, а четко переключаются. Смените steps(8) на steps(4) и ширину сдвига на -256px, если кадров четыре.

Инструменты для создания спрайтов

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

Aseprite — редактор, заточенный под пиксель-арт и анимацию: таймлайн с кадрами и слоями, теги для группировки анимаций, режим onion skinning (полупрозрачные соседние кадры), экспорт готового спрайт-листа. Работает на Windows, macOS и Linux; распространяется платно, но исходный код открыт и его можно собрать самому.

Piskel — бесплатный редактор, работает прямо в браузере, экспортирует PNG и анимированный GIF. Хорош, чтобы попробовать пиксель-арт без установки. Krita и GIMP — бесплатные растровые редакторы; подойдут для спрайтов общего вида, но специальных пиксель-инструментов в них меньше. Photoshop тоже справится, но под пиксель-арт он не заточен и стоит по подписке.

Отдельно стоит Sprite Editor внутри Unity. Он не рисует, а режет готовый лист на кадры. Для этого у импортированной текстуры ставят Sprite Mode на Multiple, открывают Sprite Editor и жмут Slice: Automatic режет по прозрачности, Grid By Cell Size — по заданному размеру ячейки, Grid By Cell Count — по числу строк и столбцов. Для пиксель-арта в настройках текстуры полезно выставить Filter Mode = Point (no filter) и Compression = None, иначе спрайт размоется.

Как собрать первый анимированный спрайт

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

1. Нарисуйте кадры одного действия (бег из 4-8 кадров) в Aseprite или Piskel. Держите один размер холста для всех кадров и единую точку опоры персонажа.
2. Экспортируйте кадры одним спрайт-листом ровной сеткой (в Aseprite: File -> Export Sprite Sheet).
3. Импортируйте PNG в проект.
4. Нарежьте лист на кадры. В Unity: Sprite Mode = Multiple -> Sprite Editor -> Slice. В браузере нарезки не нужно — кадры адресуются сдвигом background-position.
5. Соберите анимацию: в Unity перетащите нарезанные кадры на объект (создастся анимационный клип), в вебе используйте steps() из примера выше.
6. Проверьте в запуске: скорость, зацикливание и точку привязки (pivot).

Реалистичный срок для новичка — не «за один вечер», а несколько дней практики: основное время уходит на рисование ровных кадров, а не на технику нарезки.

Если что-то пошло не так, ориентируйтесь по симптому:

• Спрайт размыт при увеличении — включите Filter Mode = Point и Compression = None (в Unity) либо image-rendering: pixelated (в CSS).
• Персонаж дрожит между кадрами — кадры разного размера или сбита точка опоры; выровняйте холст и pivot.
• На границе кадра проступает соседний — это bleeding; добавьте отступ между кадрами или extrude в настройках атласа.
• Анимация слишком быстрая или медленная — задайте частоту в FPS или длительность кадра, не полагайтесь на значение по умолчанию.

Смежные темы: Виды растровой графики, Pygame: основы работы.

FAQ

Спрайт-лист и атлас текстур — это одно и то же? Технически это может быть один файл, но акцент разный: спрайт-лист чаще про кадры одной анимации, атлас — про упаковку многих разных спрайтов в общую текстуру ради батчинга и меньшего числа draw call.

Сколько кадров нужно для анимации? Минимум два. Для пиксельного цикла ходьбы или бега обычно берут 4-8 кадров: этого достаточно для читаемого движения без лишней работы и веса.

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

Выводы

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

Для старта хватает связки «редактор пиксель-арта плюс нарезка в движке»: нарисовать кадры в Aseprite или Piskel, экспортировать спрайт-лист, нарезать его и собрать анимацию. Разобравшись на 2D, дальше проще переходить к полноценной разработке игр в движке.