Упаковщик спрайт-листов
Упакуйте несколько изображений иконок или спрайтов в один лист, генерируя карты координат (JSON/CSS) на стороне клиента. Быстро, безопасно работает офлайн и бесплатно. Упрощайте ресурсы игр и мгновенно оптимизируйте подключения таблиц стилей сайта.
Зачем использовать наш упаковщик спрайт-листов?
- 100 % приватно и локально: ваши графические активы обрабатываются полностью в пространстве памяти локального браузера. Ни одна графика или метаданные не попадают на внешние серверы, что обеспечивает абсолютную приватность дизайна и соответствие требованиям для личных и коммерческих проектов.
- Оптимальные раскладки упаковки: размещает иконки с помощью продвинутого алгоритма растущего 2D-бинарного дерева, который минимизирует площадь листа. Вы также можете переключаться между стандартными линейными вариантами вертикального и горизонтального стекирования.
- Генераторы CSS и JSON: мгновенно компилирует адаптивные CSS-классы с отрицательными позициями фона или экспортирует стандартные JSON-карты, совместимые с веб-движками и играми (например, PixiJS, Phaser и Cocos2d).
- Интерактивный инспектор наложений: проверяйте и предварительно просматривайте упакованные координаты динамически. При наведении на любой спрайт в сгенерированной карте координат его точный ограничивающий прямоугольник подсвечивается прямо на листе канваса.
Преимущество спрайт-листов: снижение сетевых издержек
Браузеры ограничивают число одновременных HTTP-соединений к одному хосту (часто не более 6 соединений). Когда сайт полагается на десятки крошечных изображений иконок, их индивидуальная загрузка вызывает сетевые задержки, задержки в очереди и накопительные сдвиги макета. Спрайт-листы решают это путём объединения. Загрузка одного большого изображения объединяет все HTTP-полезные нагрузки в один поток TCP-соединения. Кроме того, это устраняет раздражающие белые мерцания, возникающие, когда браузер пытается загрузить отдельное изображение состояния при наведении при взаимодействии пользователя.
Как алгоритмы 2D-упаковки оптимизируют площадь листа
Упаковка нескольких произвольных прямоугольников в одну ограничивающую область с минимальными потерями - это NP-полная задача. Этот инструмент использует алгоритм растущего 2D-бинарного дерева. Упаковщик начинает с размера первого элемента и динамически растёт вправо или вниз, чтобы вместить новые блоки, выбирая путь, который сохраняет общее соотношение сторон листа близким к квадрату. Предварительная сортировка элементов по убыванию площади гарантирует, что крупные блоки размещаются первыми, позволяя мелким плотно вписываться в оставшиеся промежутки.
CSS background-position против JSON-карт текстур
После упаковки спрайтам требуются карты координат, чтобы сообщать приложениям, где находится каждая иконка. Веб-раскладки полагаются на CSS-классы спрайтов. Назначая общий класс с URL фонового изображения и применяя индивидуальные отрицательные смещения фона (например, `background-position: -32px -64px`), браузеры отрисовывают нужный блок вложенного изображения. Для систем приложений на основе канваса и 2D-игр стандартные JSON-хэши сопоставляют каждое именованное изображение с точными ограничивающими координатами, позволяя движкам динамически обрезать и нарезать текстуры во вьюпортах WebGL.
Часто задаваемые вопросы
Упаковщик спрайт-листов - это офлайн-инструмент дизайна, который объединяет несколько отдельных изображений или иконок в один файл изображения. Он вычисляет точные пиксельные координаты каждого исходного графического элемента и генерирует файлы таблиц стилей или данных, чтобы приложения могли корректно отображать отдельные элементы.
Когда вы загружаете файлы, ваш браузер считывает их в память как объекты изображений. Алгоритм упаковки вычисляет наиболее компактное расположение координат на виртуальной сетке и отрисовывает спрайты на offscreen-канвасе. Результаты экспортируются как изображения и код прямо в вашем браузере.
Да, наш упаковщик спрайт-листов работает полностью на стороне клиента в вашем локальном браузере. Ни один из ваших файлов изображений, размеров, имён или дизайнов не отправляется на наши серверы. Все операции отрисовки и упаковки пикселей выполняются локально на вашем компьютере, обеспечивая абсолютную конфиденциальность активов интеллектуальной собственности.
Утилита поддерживает три раскладки упаковки. Режим бинарного дерева запускает растущий алгоритм разделения, чтобы упаковать элементы в близкую к квадрату область. Вертикальная раскладка складывает элементы в один столбец, а горизонтальная располагает их рядом в широкую строку.
Инструмент создаёт два распространённых листа разметки. Вкладка CSS предоставляет правила классов с целевыми размерами и отрицательными координатами background-position. Вкладка JSON выводит стандартные hash-конфигурации TexturePacker, определяя координаты, обрезки и размеры листа, идеальные для современных фреймворков веб-игр.
Да, вы можете настроить собственный интервал или отступ между спрайтами. Инструмент поддерживает значения от 0px до 32px. Добавление интервалов настоятельно рекомендуется, чтобы предотвратить артефакты «кровотечения», когда пиксели соседних спрайтов случайно отрисовываются по краям вашей раскладки.
Вы можете настроить максимальные пределы до 4096px по ширине и высоте. Поскольку вся обработка идёт в памяти браузера, производительность зависит от оперативной памяти устройства. Утилита упаковки выдаст ошибку, если конфигурации раскладки превышают пределы размера целевого канваса.