Игровой пиксель-арт

Создавать пригодные для игры PNG-ассеты на согласованной пиксельной сетке. Промпт «pixel art» не гарантирует ни ровную сетку, ни точный атлас, ни стабильную анимацию: проверять реальные файлы и воспроизведение.

Обязательный инструмент

Использовать Sprite Fusion Pixel Snapper для подготовки создаваемого или перерабатываемого пиксель-арта. Не подменять его CSS image-rendering: pixelated, уменьшением изображения, posterize или самодельным «pixel-snapper». Это разные операции.

Прочитать references/pixel-snapper.md перед обработкой. Сохранять исходник, результат и параметры запуска. Если инструмент недоступен, попытаться установить официальный CLI или воспользоваться официальной веб-версией в рамках доступных разрешений. Если запустить его не удалось, явно указать невыполненный этап; не выдавать ассеты за полностью подготовленные. Уже проверенные и обработанные файлы повторно не квантовать без причины.

Зафиксировать контракт ассетов

Перед генерацией записать в небольшой asset manifest:

• Проекцию, направления взгляда, референс персонажа, палитру и толщину контура.
• Логический размер пикселя, размер клетки и масштаб показа. Например: кадр 96×96, отображение 288×288 при 3×.
• Видимый размер тела внутри клетки, общий pivot, линию земли и допустимый диапазон движения.
• Для каждой анимации: имя, направление, число кадров, длительности в миллисекундах, loop/one-shot, контактные кадры и переходы состояний.
• Для окружения: размер тайла, terrain types, правила соседства и слои карты.
• Формат PNG/JSON и требования конкретного движка к atlas metadata; не придумывать совместимость с его схемой.

Использовать одну плотность пикселей для связанных ассетов. Увеличенная копия @2x — целочисленное nearest-neighbor увеличение логического оригинала, а не повод сглаживать его.

Удерживать и проверять размеры

Перед генерацией и исправлением размерных отклонений прочитать references/dimensions-and-repair.md. Раздельно фиксировать размер исходного изображения, сетку поз, логический canvas кадра и размер тела внутри него. Если инструмент поддерживает структурированный параметр размера, задавать его через API; текст промпта и spatial guide уточняют расположение, но не обеспечивают точную геометрию.

Точные размеры production-файлов обеспечивать детерминированной сборкой и проверкой, а не обещанием генератора. Измерять PNG после генерации, после Pixel Snapper и после упаковки. Проверять не только ширину/высоту, но и реальное число поз, границы клеток, масштаб тела, pivot и зазор. Несоответствие должно останавливать публикацию этого ассета до исправления.

Исправлять прозрачные поля дополнением или проверенной обрезкой; случайный дрейф — целочисленным смещением по опоре. Не растягивать каждый кадр до требуемого размера и не считать padding исправлением неверной сетки. Обрезанные части тела, смешанные позы и меняющиеся пропорции требуют редактирования источника или перегенерации. Правила выбора исправления и команды проверки — в связанном документе.

Центр, pivot и зазор для анимации

Помещать анимируемый объект в центральную область одинаковых кадров и заранее оставлять свободное место для всего движения. Не заполнять стартовой позой клетку до краёв. Хвост, меч, плащ, уши, прыжок и удар должны помещаться во всех фазах.

Разделять три области:

1. Body footprint — исходные размеры тела, сохраняющие масштаб персонажа.
2. Motion envelope — объединение всех положений тела, оружия и вторичных движений за цикл.
3. Safety inset — прозрачная полоса между envelope и краем кадра.

Стартовый ориентир: тело занимает около 50–65% клетки; прозрачный inset обычно 4–8 логических пикселей. Подбирать значения по самой широкой позе; это не универсальный лимит. Для удара оставить больше места впереди, для прыжка сверху. Если движение не помещается — расширить общий canvas всех кадров, сохранив масштаб тела.

Геометрический центр canvas и точка опоры персонажа могут различаться. Например: canvas 96×96, body примерно 40×48 в центре, наземный pivot (48,72), runtime anchor (0.5,0.75). Поворотный эффект может иметь pivot (48,48). Выбрать опору по действию и сохранять её во всех состояниях.

Не центрировать каждый кадр независимо по alpha bounds или центру массы. Вынесенный меч или хвост изменяет bounds, но не должен сдвигать таз персонажа. Выравнивать по стабильному landmark: таз, контактная стопа, центр корпуса или центр эмиттера. Сохранять намеренный bob, прыжок и squash; исправлять только случайный дрейф. Не выполнять отдельный trim → resize для каждого кадра.

Подробности и шаблон покадрового плана: references/animation.md.

Производство

1. Создать читаемый основной спрайт и проверить его в игровом размере. Для растровой генерации использовать доступный генератор изображений; не заменять запрошенный арт HTML-примитивами.
2. Генерировать остальные позы с этим спрайтом как референсом. Фиксировать идентичность, перспективу, палитру, масштаб, клетку, pivot и motion envelope. Для точных движений описывать конкретные контактные и промежуточные позы.
3. Просить настоящий прозрачный фон. Проверить alpha: нарисованная шахматка не является прозрачностью. При вынужденном chroma-key выбрать отсутствующий в палитре цвет и проверить ореолы после удаления.
4. Выполнить входную проверку по dimensions-and-repair.md: измерить файл, проверить число и размещение поз, записать проверенные crop-координаты. Исправить расхождения до дальнейшей обработки; не принимать кратность размеров за доказательство правильной сетки.
5. Выполнить подготовку alpha и Pixel Snapper по связанной инструкции. Держать одну палитру и согласованные параметры для одного персонажа/набора тайлов. После обработки снова проверить геометрию: Snapper не гарантирует прежние размеры или расположение кадров.
6. Разместить кадры на общем логическом canvas целочисленными смещениями относительно pivot. Проверить крайние фазы до упаковки.
7. Собрать нужные результаты: статический атлас для объектов; анимационный атлас с порядком кадров и временем; для окружения — тайлсет и настоящую тайлмапу, а не только иллюстрацию уровня.
8. Проверить файлы и воспроизведение, исправить наблюдаемые дефекты, затем передать ассеты вместе с метаданными.

Для упаковки, тайлов и карт прочитать references/atlases-and-tilemaps.md.

Локальный редактор атласов

Для визуального ревью использовать комплектный Pixel Studio. Порядок запуска и формат данных описаны в references/editor.md. Копировать редактор в рабочую папку проекта; примерные персонажи ему не требуются.

Загрузить PNG/JSON, проверить кадры на таймлайне и в режиме Atlas, включить onion skin и разметку. Редактор позволяет менять длительности, порядок кадров, loop, имена анимаций, pivot, baseline и inset с undo/redo и экспортом JSON. Проверки границ используют реальные пиксели PNG. Если проблема в обрезанном теле или дрейфе анатомии, исправить сам исходник по dimensions-and-repair.md: изменение метаданных этого не устраняет.

Демо и пользовательские PNG хранить в рабочей папке, отдельно от поставляемого редактора. Экспортированные метаданные повторно проверить и интегрировать в формат целевого движка; Pixel Studio не объявляет свой JSON универсальным engine API.

Приёмка

• PNG с корректной alpha, единая сетка и палитра, читаемый силуэт при 1×. Для обычных твёрдых спрайтов alpha 0/255; частичная alpha допустима только как осознанный материал/VFX.
• Все кадры помещаются в canvas с inset, не захватывают соседние клетки, имеют одинаковый масштаб и согласованный pivot.
• Анимация проверена покадрово, в целевом темпе, на стыке последнего/первого кадров и при смене состояний. Нет случайного дрожания, деформации личности и замены движения сдвигом целого изображения.
• Кадры атласа и ссылки в JSON существуют, rect не выходит за PNG, порядок и длительности правильные. Дубликаты допустимы для намеренного hold; случайные повторы требуют проверки.
• У тайлов нет щелей при повторении, стыки и углы проверены в собранной карте. Collision/navigation данные соответствуют смыслу карты.
• Рендер использует nearest-neighbor, согласованное округление камеры/координат и целочисленный масштаб там, где нужна строгая пиксельная сетка. Проверены светлый, тёмный и шахматный фоны.

Передать пути к PNG и JSON, размеры клеток, палитру, pivot, состав анимаций, параметры Pixel Snapper и результаты проверки. GIF/видео — превью; production-источник анимации — PNG-кадры или атлас с метаданными. Публикация и загрузка во внешние репозитории зависят от текущего запроса пользователя.