Спрайт-лист: форматы, инструменты и как конвертировать любую анимацию

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

На этой странице описан весь путь: что такое лист на самом деле, чем он отличается от атласа, когда использовать сетку, а когда горизонтальную полосу, в каком формате экспортировать и как конвертировать источники GIF, изображений и видео в пригодный для использования лист прямо в браузере. В примерах упоминаются наши собственные инструменты и миры — Agent Sprite Forge, The Cyclops' Island, Mini World и 3D-конструктор игр — потому что это конвейер, который мы выпускаем и тестируем.

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

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

Если любое из этих четырёх значений неверно, сбой проявляется сразу и заметно. Ширина ячейки 32 вместо 33 сдвигает каждый кадр на один пиксель вправо по мере продвижения по листу, что воспринимается как медленный горизонтальный дрейф. Неверное начало координат переворачивает анимацию по вертикали. Неверное количество кадров отбрасывает последний кадр, поэтому цикл ходьбы заканчивается рывком вместо контактной позы. Это не ошибки рендеринга; это несоответствия метаданных.

Анатомия листа

Представьте лист как таблицу. Столбцы и строки неявно заданы размерами в пикселях: общая ширина, делённая на ширину ячейки, даёт количество столбцов, а общая высота, делённая на высоту ячейки, — количество строк. Лист размером 512 на 128 с ячейками 64 на 64 имеет 8 столбцов и 2 строки, то есть 16 кадров. Если добавить один пиксель отступа между ячейками, математика меняется: при ширине 512 пикселей, ячейках 64 пикселя и отступе 1 пиксель помещается 7 ячеек, а не 8, потому что отступы съедают 8 пикселей. Отступы и промежутки нужно учитывать до того, как вы напишете код для нарезки.

Где важно начало координат

В большинстве конвейеров WebGL и canvas начало координат находится в верхнем левом углу изображения, что совпадает с системой координат, используемой графическими редакторами. Некоторые игровые движки и старые фреймворки переворачивают ось Y и ожидают начало координат в нижнем левом углу. Если спрайт отображается перевёрнутым, проверьте начало координат, прежде чем что-либо масштабировать. Исправление обычно заключается в однострочном преобразовании или повторной генерации с обратным порядком строк, а не в полном повторном экспорте.

Спрайт-лист, spritesheet и спрайт-атлас

Написание не стандартизировано. «Sprite sheet» с пробелом — распространённая английская форма, которую использует большинство документации и руководств. «Spritesheet» одним словом встречается в идентификаторах кода, именах файлов и некоторых API движков, потому что пробелы в таких контекстах неудобны. Поисковые системы считают их почти синонимами, поэтому одну и ту же технику можно найти под обоими написаниями.

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

• ЛистСетка или полоса кадров одинакового размера. Метаданные не требуются. Нарезка — это арифметика.
• SpritesheetТот же артефакт, записанный одним словом. Часто встречается в коде и именах файлов ресурсов.
• АтласУпакованные кадры плюс индекс, сопоставляющий имена или идентификаторы с прямоугольниками. Позволяет искать по имени вместо вычисления координат.

Лист-сетка против горизонтальной полосы кадров

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

Горизонтальная полоса кадров размещает каждый кадр в одной строке. Именно такой макет ожидают шейдеры и флипбук-текстуры, потому что UV-смещение становится одним умножением: индекс кадра, делённый на количество кадров, даёт смещение по X, а Y остаётся постоянным. Если передать лист-сетку шейдеру, который предполагает полосу, анимация будет выбирать области по строкам и зацикливаться не так, как вы задумали. Если передать полосу движковому нарезчику, который предполагает сетку, он либо воспримет полосу как одну очень широкую строку, либо вообще не найдёт строки.

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

В каком формате экспортировать

PNG — безопасный выбор по умолчанию. Он поддерживает полную альфа-прозрачность, сжимается без потерь, и его декодируют все движки и браузеры. Для спрайтов с чёткими краями и плоскими цветами PNG хорошо сжимается. Для фотографических спрайтов или спрайтов с сильной штриховкой WebP обычно даёт файл меньшего размера при том же визуальном качестве, и все современные браузеры его поддерживают. Используйте WebP, когда важен размер файла и вы можете убедиться, что целевая среда его декодирует. GIF — это формат доставки, а не формат для создания: он поддерживает только однобитную прозрачность, поэтому каждый полупрозрачный пиксель становится либо полностью непрозрачным, либо полностью прозрачным. Если в исходнике мягкие края, GIF создаст по ним кайму.

Добавляйте JSON-сайдкар, когда кадры не образуют простую однородную сетку, когда нужны именованные состояния или когда потребитель ожидает атлас. Сайдкар небольшой и избавляет от необходимости жёстко задавать координаты. Если кадры однородны, а анимация представляет собой один цикл, его можно пропустить и позволить движку вычислить прямоугольники. Никогда не экспортируйте спрайты как JPEG. JPEG сжимает с потерями и не имеет альфа-канала, поэтому прозрачность становится чёрной или белой, а артефакты сжатия попадают ровно на чёткие края, определяющие силуэт спрайта. Ни одна настройка это не исправит.

Все наши конвертеры

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

Для анимированных GIF конвертер распаковывает каждый кадр и упаковывает их в лист или полосу, сохраняя задержки кадров в сайдкаре, если вы его запросите. Для неподвижных изображений конвертер обрезает и упорядочивает предоставленную вами последовательность изображений в сетку. Для видео конвертер выбирает кадры с заданной частотой и записывает их в лист; вы управляете интервалом выборки и размером ячейки. Если вы создаёте персонажа для The Cyclops' Island или проп для Mini World, начните с имеющегося исходного формата и выберите подходящий конвертер.

• GIF в спрайт-листРаспаковывает анимированный GIF кадр за кадром и упаковывает кадры в сетку или горизонтальную полосу.
• Изображение в спрайт-листБерёт последовательность неподвижных изображений и упорядочивает их в однородную сетку с одинаковым размером ячейки.
• Видео в спрайт-листВыбирает кадры из видео с заданным интервалом и записывает их в лист или полосу.
• Agent Sprite ForgeНаш инструмент для работы со спрайтами, который генерирует и упаковывает кадры персонажей в листы, используемые 3D-конструктором игр.

Глоссарий

Это термины, которые встречаются в документации по спрайт-листам, настройках движка или коде шейдеров. Определения намеренно короткие.

• АтласУпакованное изображение из областей плюс машиночитаемый индекс, сопоставляющий имена или идентификаторы с прямоугольниками.
• ЯчейкаПрямоугольник в листе, который содержит один кадр. Его ширина и высота — это размер ячейки.
• Полоса кадровЛист, размеченный как одна горизонтальная строка кадров, используемый шейдерами и флипбук-текстурами.
• ФлипбукТекстура, из которой с течением времени выбирается по одной области за раз для создания анимации, обычно из полосы кадров.
• ИндексДанные сайдкара, которые дают имена или номера областям в атласе. Без них нарезка — это арифметика.
• Начало координатУгол изображения или ячейки, от которого отсчитываются координаты, обычно верхний левый или нижний левый.
• ОтступДополнительные пиксели между ячейками в листе, используемые для предотвращения подтекания текстуры. Отступ влияет на то, сколько ячеек помещается.
• ПромежутокРасстояние между ячейками, часто используется как синоним отступа, но иногда считается отдельно.

Войдите в мир, которому он принадлежит

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