Генератор спрайт-листов
Объединяйте изображения в спрайт-листы с перетаскиванием для сортировки, сеткой, отступами, режимами масштаба. Экспорт в PNG/WebP/JPG с JSON-атласом для игровых движков и CSS.
Что такое спрайт-лист и зачем его использовать?
Спрайт-лист — это один файл изображения, содержащий несколько меньших картинок (спрайтов), расположенных в сетке. Использование спрайт-листов уменьшает HTTP-запросы, улучшает производительность загрузки страницы и делает рендеринг игр более эффективным.
Какие форматы изображений поддерживаются?
Вы можете загружать изображения PNG, JPG, GIF, SVG и WebP. Инструмент поддерживает пакетную загрузку и вставку из буфера обмена (Ctrl+V) для быстрого рабочего процесса.
Какие форматы экспорта доступны?
Экспортируйте спрайт-листы как PNG (с прозрачностью), WebP (современный формат с меньшим размером файла) или JPG (лучше для фотографий без прозрачности). Выбирайте в зависимости от требований вашей платформы.
Как изменить порядок изображений в спрайт-листе?
Перетащите миниатюры изображений, чтобы изменить их порядок в спрайт-листе. Вы также можете вставлять изображения напрямую из буфера обмена с помощью Ctrl+V.
Что такое данные JSON-атласа и какие движки их поддерживают?
Данные JSON-атласа содержат информацию о позиции, размере и кадре каждого спрайта. Они совместимы с популярными игровыми движками, такими как Phaser, PixiJS, Unity, Cocos2d и многими другими, для автоматического извлечения спрайтов.
Какие существуют режимы масштабирования?
Режим Вписать сохраняет пропорции. Заполнить покрывает ячейку и обрезает. Растянуть деформирует для заполнения.
Поддерживает ли инструмент прозрачность?
Да, PNG и WebP сохраняют прозрачность. Также можно задать цвет фона, что полезно для экспортов JPG, которые не поддерживают прозрачность.
Как отступы влияют на спрайт-лист?
Отступы добавляют пространство между отдельными спрайтами в листе, предотвращая визуальное просачивание при выборке текстур. Это особенно важно для игровых движков, использующих линейную фильтрацию.
Могу ли я использовать спрайт-листы для CSS?
Да, спрайт-листы отлично работают для CSS-спрайтов. Данные JSON-атласа могут использоваться для генерации правил CSS background-position, уменьшая HTTP-запросы и улучшая производительность загрузки страницы.
Каковы лучшие практики для размеров спрайт-листов?
Сохраняйте размеры как степени двойки (256x256, 512x512, 1024x1024) для оптимальной обработки текстур GPU. Большинство игровых движков предпочитают эти размеры для лучшей производительности.
Как спрайт-листы улучшают производительность игр?
Спрайт-листы уменьшают вызовы отрисовки, объединяя несколько спрайтов в одну текстуру. Это минимизирует изменения состояния GPU, снижает нагрузку на память и обеспечивает более эффективный рендеринг.
В чем разница между спрайт-листами и атласами текстур?
Спрайт-листы обычно организуют кадры в равномерной сетке, тогда как атласы текстур могут более эффективно упаковывать спрайты неправильной формы, используя алгоритмы, такие как bin packing.
Как использовать Генератор спрайт-листов
Объединяйте изображения в единый спрайт-лист прямо в браузере. Перетаскивайте кадры для сортировки, точно настраивайте сетку и отступы и экспортируйте атлас PNG/WebP/JPG с JSON-данными для игровых движков и CSS-спрайтов. Вся обработка локальна.
- Добавьте изображения и кнопками + и − задайте Columns и Rows сетки.
- Установите Padding (px), чтобы оставить промежутки между спрайтами и исключить протекание текстур.
- Оставьте Sprite Size в режиме Auto под самый крупный кадр или введите фиксированные размеры для одинаковых ячеек.
- Выберите Scale Mode — Fit, Fill или Stretch — чтобы задать, как каждое изображение размещается в своей ячейке.
- Выберите Background (Transparent, White, Black или Custom), задайте Format — PNG, WebP или JPG — и имя файла в Filename.
- Перетащите миниатюры, чтобы поменять кадры местами — координаты атласа обновятся сами — и экспортируйте лист вместе с JSON-атласом.
Отступ минимум в 2 px не даст соседним спрайтам смешаться при масштабировании или фильтрации текстур в вашем движке.
Похожие инструменты
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Тестер HTTP-запросов Тестируйте REST API прямо в браузере. Отправляйте запросы GET, POST, PUT, DELETE с пользовательскими заголовками, телом и параметрами. Мгновенно просматривайте статус, заголовки и JSON-тело ответа.
- Генератор .htaccess Генерация правил .htaccess Apache для перенаправлений, перезаписи, заголовков безопасности, кэширования и др.
- Генератор Robots.txt Бесплатный онлайн-генератор robots.txt. Создавайте и настраивайте файлы robots.txt для управления сканированием поисковых систем, контроля доступа краулеров и оптимизации SEO вашего сайта.
- Генератор Sitemap Бесплатный онлайн генератор XML sitemap. Добавляйте URL, настраивайте приоритеты и частоты, создавайте SEO-sitemap мгновенно.
- GIF Разбор Кадров Извлеките и скачайте отдельные кадры из GIF-анимаций как PNG или спрайт-лист. Бесплатный онлайн-инструмент с просмотром и экспортом ZIP.
- GIF Реверс Измените порядок воспроизведения GIF-анимаций бесплатно онлайн. Загрузите, просмотрите и скачайте мгновенно.