ToolCabana

Сборка спрайт-листа

Упаковывает изображения в атлас и экспортирует координаты.

Favorites are saved in this browser. Find them in My favorites.

Сборка спрайт-листа

Your input stays in this browser unless stated otherwise
Clear your input, files and result, and restore the default settings.

Drop your files here

or choose files from your device

Как использовать Сборка спрайт-листа

The Image sprite sheet maker packs multiple images into one PNG grid of square cells and exports a JSON file with each sprite's x, y, width and height. You set the number of columns from 1 to 20, a cell size from 8 to 1,024 pixels and a gap of up to 100 pixels between cells. Images are scaled to fit their cell while keeping aspect ratio.

  1. Выберите исходный файл. Если инструмент принимает несколько файлов, расположите их в нужном порядке.
  2. Настройте основные параметры, затем откройте расширенный режим для экспорта и точной настройки. Пользовательские настройки остаются активными при закрытии панели.
  3. Запустите «Сборку спрайт-листа», просмотрите результат и используйте доступные элементы копирования или скачивания.

Что поддерживает этот инструмент

Упаковывает изображения в атлас и экспортирует координаты.

Столбцы
Range: 1 to 20
Размер квадратной ячейки (px)
Range: 8 to 1024
Зазор между ячейками (px)
Range: 0 to 100

Ограничения и обработка

Изображения используют существующее ограничение холста в 32 мегапикселя. Там, где это поддерживается, допускается до 100 исходных изображений. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.

Частые вопросы

What does the sprite coordinates JSON contain?

The sprite-coordinates.json file has one entry per image, keyed by its position number and file name, such as 1-icon.png. Each entry gives the x and y offset of the sprite in the sheet and its drawn width and height in pixels.

How are sprites positioned inside each cell?

Every image is scaled down or up to fit inside the square cell while keeping its aspect ratio, then drawn from the top-left corner of the cell. Non-square images therefore leave empty transparent space to the right or below.

Why add a gap between sprites?

A gap of a few pixels keeps neighboring sprites from bleeding into each other when the sheet is scaled or filtered in a game engine or CSS. The gap is added after each cell, and the coordinates in the JSON already account for it.

Где обрабатываются мои данные?

Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.

Каковы ограничения входных данных?

Изображения используют существующее ограничение холста в 32 мегапикселя. Там, где это поддерживается, допускается до 100 исходных изображений. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.