Генератор спрайт-листов

Как работает компоновка

Генератор использует одну предсказуемую компоновку: равномерную сетку. Вы задаёте число столбцов, а число строк равно округление_вверх(изображения / столбцы). Все ячейки одного квадратного размера (выбранного размера плитки), поэтому каждое изображение масштабируется, чтобы поместиться в свою ячейку с сохранением пропорций, и центрируется. Изображения разного размера попадают в одинаковые ячейки, именно этого ожидают CSS-спрайты с background-position.

Вид итогового CSS

Каждое изображение становится классом с именем файла (.spr-<имя>), размером с плитку и со смещением к своей ячейке. При четырёх столбцах, размере плитки 128 px и без отступа лист выглядит так:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

Смещение движется в двух измерениях: спрайты заполняют каждую строку слева направо, затем переходят на следующую строку. Сохраните PNG как spritesheet.png рядом с вашим CSS (или измените url(...) под ваш путь).

Отступ и перетекание

Спрайты, упакованные встык, могут перетекать друг в друга, когда браузер масштабирует лист (нецелые соотношения пикселей, CSS-преобразования). Добавьте от 2 до 4 пикселей отступа между ячейками, чтобы соседние пиксели не просачивались.

Экраны высокой плотности (retina)

Автоматического экспорта 2x нет, но более чёткий лист получить просто: выберите больший размер плитки (например, 256 px вместо 128 px), чтобы каждый спрайт нёс больше пикселей, а затем показывайте его в половину размера CSS. Так вы получите чёткие спрайты на экранах высокой плотности без отдельного прохода.

Спрайт-листы или альтернативы

• Спрайт-листы: классические наборы иконок в CSS, кадры HTML5-игр и страницы, которым выгодно собрать много мелких изображений в один файл.
• SVG-спрайты (symbol): лучше для современных иконок интерфейса, масштабируются без потерь, принимают fill в CSS, без возни с background-position.
• Иконочные шрифты: ограничены, но всё ещё применяются для крошечных одноцветных иконок.
• Отдельные файлы с HTTP/2 или HTTP/3: мультиплексирование делает число запросов менее важным, чем прежде.