Игры / Изображения

Создатель, нарезчик и аниматор спрайт-листов

Собирайте изображения в спрайт-лист или атлас текстур, разделяйте лист на отдельные кадры и создавайте анимации. Сохраняйте PNG, метаданные JSON hash, классы CSS, ZIP-файлы или анимированный GIF без загрузки изображений на сервер.

Создатель, нарезчик и аниматор спрайт-листов: Режим «Создать» объединяет изображения PNG, JPG, WebP и декодированные кадры GIF в лист с сеткой, расположением по строкам или столбцам либо с плотной упаковкой. В ячейках одинакового размера помещается самое крупное изображение; доступны выравнивание по центру или по нижнему центру, внутренние поля, интервалы и необязательные размеры, кратные степени двойки. Режим «Нарезать» разделяет лист по числу ячеек в сетке или по размеру в пикселях либо обнаруживает отдельные области, разделённые прозрачностью или цветом фона. Можно исключать прямоугольные области, пропускать пустые ячейки и обрезать прозрачные края перед сохранением ZIP или передачей кадров в режим «Анимировать». Режим «Анимировать» воспроизводит выбранный диапазон кадров со скоростью 1–60 FPS в обычном порядке или в режиме пинг-понга, поддерживает масштабирование пикселей и необязательный режим «луковой кожи». Можно сохранить GIF или горизонтальную PNG-полоску. Если сначала нужно нарисовать кадры, начните с инструмента для создания пиксельной графики. Работает на 100% локально в вашем браузере, файлы на сервер не загружаются.

Категория
Игры и развлечения
Запуски
В вашем браузере
Стоимость
Бесплатно · без регистрации
Доступность
Готово к использованию
Рабочая область спрайт-листаЛокальная обработка

Полностью работает в браузере

Соберите кадры в спрайт-лист для своей игры.

Для одинаковых ячеек используется размер самого большого кадра с внутренним отступом со всех сторон. Интервал разделяет ячейки.

Добавьте кадры, чтобы начать. Также можно нарезать спрайт-лист в разделе «Нарезка» и отправить его кадры сюда.

Ваши изображения и экспортированные файлы остаются в этом браузере. Используйте сохранённые файлы в своём игровом проекте.

Спрайт-листы и атласы текстур

Спрайт-лист хранит несколько кадров анимации или игровых изображений в одном изображении. Обычная сетка описывает каждый кадр его положением в ячейке. Атлас текстур может использовать прямоугольники разного размера и требует координат, описывающих каждое изображение. Документация Godot по AtlasTexture (https://docs.godotengine.org/en/stable/classes/class_atlastexture.html) объясняет, как область атласа используется в качестве текстуры.

Выравнивание по нижнему центру удерживает ноги персонажа на одной базовой линии во всех кадрах. Упорядоченные полки сохраняют исходные размеры каждого изображения и не используют поворот. Размеры, кратные степени двойки, добавляют неиспользуемые пиксели справа или снизу, но не масштабируют рисунок. PNG сохраняет полную прозрачность альфа-канала, тогда как GIF использует меньше цветов и только однобитную прозрачность.

Координаты JSON hash

Экспорт JSON hash использует имена кадров как ключи внутри frames. Каждая запись содержит прямоугольник кадра с x, y, w и h, параметры sourceSize и spriteSourceSize, а также флаги rotated и trimmed. Координаты отсчитываются в пикселях от верхнего левого угла листа. Объект meta содержит имя файла изображения и общий размер листа. Загрузчик JSON hash-атласа Phaser (https://docs.phaser.io/api-documentation/class/loader-loaderplugin#atlasJSONHash) описывает этот формат именованных кадров.

Экспортируйте исходные границы изображения, а не границы ячейки с полями, и установите trimmed и rotated в false. Команда Cut может экспортировать отдельный список выбранных прямоугольников. Обрезайте прозрачные края только для плотной обрезки; отключите эту настройку, чтобы сохранить обычные ячейки анимации и их точки привязки. Перед использованием атласа в проекте сравните сохранённые прямоугольники с импортёром вашего движка.

Как пользоваться

  1. Выберите режим «Создать», «Нарезать» или «Анимировать» — у каждого режима есть ссылка, которую можно добавить в закладки.
  2. Добавьте кадры или лист, затем настройте раскладку, сетку нарезки или параметры анимации.
  3. Просмотрите результат и скачайте файлы для своего игрового проекта.

Конфиденциальность и ограничения

Ваши файлы остаются в браузере. Ничего не загружается.

Похожие инструменты

Редактор пиксель-артаИзображения в GIFКадры GIFSVG-спрайт

Часто задаваемые вопросы

Что выбрать: сетку или атлас текстур с плотной упаковкой?

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

Зачем нужны внутренние поля, интервалы и расширение краёв?

При фильтрации текстур могут считываться соседние пиксели, из-за чего появляются цветные швы — это называется bleeding текстур. Внутренние поля оставляют место внутри каждой ячейки, а интервалы создают зазор между ячейками. Этот инструмент добавляет прозрачные пиксели или пиксели цвета фона, а не копирует пиксели с краёв. Расширение краёв повторяет цвета краёв спрайта в его границе. Если это нужно вашему проекту, используйте настройки текстур игрового движка или упаковщик атласов с расширением краёв, особенно при использовании mipmaps.

Как импортировать лист в Godot, Unity или Phaser?

В Godot используйте области листа как текстуры атласа или кадры анимации. В Unity рассматривайте изображение как набор спрайтов: нарежьте его по обычной сетке или задайте прямоугольники вручную. Phaser поддерживает обычный спрайт-лист или атлас JSON hash. Храните PNG и соответствующий JSON вместе. Настройки импорта зависят от проекта: для чёткой пиксельной графики выберите фильтрацию методом ближайшего соседа, проверьте прозрачность и размеры ячеек, а также убедитесь, что имена кадров и формат JSON подходят вашему проекту.

Какие ограничения есть у прозрачности и тайминга GIF?

GIF поддерживает не более 256 цветов палитры и одну прозрачную запись палитры, поэтому пиксели могут быть либо полностью прозрачными, либо непрозрачными. Альфа-канал ниже 50% становится прозрачным, а остальные значения — непрозрачными. Вместо этого выберите цвет подложки для сглаживания краёв. Задержка кадров округляется до 10 ms, а минимальная составляет 20 ms, поэтому 60 FPS нельзя представить точно. Экспортированный GIF повторяется непрерывно; режим пинг-понга добавляет кадры обратного воспроизведения без повторения конечных кадров.

Покидают ли мои файлы браузер?

Нет. Чтение изображений, сборка листов, обнаружение областей и создание экспортируемых файлов выполняются на вашем устройстве. Для больших листов и длинных анимаций требуется больше памяти. Предупреждение появляется при количестве кадров свыше 400 или размере стороны свыше 8,192 пикселей. Рабочие ограничения: 1,000 импортированных кадров, 16,384 пикселей на сторону и 64 миллиона пикселей на изображение или экспорт анимации.

Бесплатный инструмент · запусков: в вашем браузере · аккаунт не нужен