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

Спрайт-лист — это одно изображение, содержащее все кадры анимации, расположенные в фиксированной сетке или полосе, так что рендерер может выбирать одну область на кадр вместо загрузки десятков файлов. Если вы когда-нибудь экспортировали кадры из 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 и ожидают начало координат в нижнем левом углу. Если ваш спрайт отображается перевёрнутым, проверьте начало координат, прежде чем что-либо масштабировать. Исправление обычно заключается в однострочном преобразовании или повторной генерации с противоположным порядком строк, а не в полном повторном экспорте.

Спрайт-лист против спрайтшита против спрайт-атласа

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

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

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

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

Сеточный лист упаковывает кадры в строки и столбцы, чтобы изображение было близко к квадрату. Это важно, потому что память текстур и выборка на 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-конструктором игр.

Глоссарий

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

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

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

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