Sprite Animator: предпросмотр и экспорт анимаций из спрайт-листов

Sprite animator — это инструмент, который берёт спрайт-лист (сетку кадров анимации, упакованных в одно изображение) и воспроизводит его, чтобы вы могли оценить тайминг, интервалы и силуэт, прежде чем арт попадёт в игру. Sprite animator в Neta Studio читает лист, определяет размер кадра, число столбцов и порядок воспроизведения по размерам изображения и запускает воспроизведение на canvas в браузере. Ничего не загружается на сервер.

Неподвижный кадр ничего не говорит о цикле ходьбы. Нужно увидеть кадр 3 рядом с кадром 4, контактную позу рядом с проходящей, и понять, не «плывёт» ли вся анимация из-за того, что одна ячейка смещена на пиксель. Аниматор делает это сразу при загрузке, а затем позволяет вручную исправить размер кадра, порядок и FPS, если предположение оказалось неверным.

Предпросмотр анимации спрайт-листа

Перетащите PNG или WebP на canvas. Аниматор считывает исходную ширину и высоту, а затем выводит правдоподобную сетку: он раскладывает размеры на множители и ищет небольшое целое число столбцов (от 2 до 16), при котором получаются почти квадратные ячейки типичных спрайтовых размеров. Лист 512×512 с 4 столбцами кадров по 128 px, лист 384×256 с 6 столбцами кадров по 64 px — в большинстве случаев оба дают верное предположение. А лист 300×300 — нет, потому что 300 не делится нацело на 16/32/64, так что размер кадра придётся задать вручную.

Воспроизведение идёт на HTML canvas с `imageSmoothingEnabled = false`, поэтому пиксели остаются чёткими при целочисленном масштабе. Увеличение до 4× или 8× — это метод ближайшего соседа, как раз то, что нужно для пиксель-арта: кадр 32 px, показанный в 8×, — это спрайт 256 px на экране, где каждый исходный пиксель развёрнут в блок 8×8. Билинейное сглаживание превратило бы их в серую кашу.

Поскольку всё происходит на canvas, файл не покидает устройство. Нет ни загрузки, ни очереди, ни учётной записи. Можно перетащить невыпущенный лист клиента, и он останется во вкладке. Обратная сторона — очень большие листы ограничены памятью браузера: PNG 4096×4096 — это примерно 67 МБ в распакованном виде RGBA, что нормально для настольного компьютера и тяжело для слабого планшета.

Задайте размер кадра, порядок и FPS

Три настройки определяют то, что вы видите: размер кадра, порядок воспроизведения и скорость. Ошибка в любой из них — и анимация выглядит мусором по причинам, никак не связанным с артом.

Размер кадра — это ширина и высота одной ячейки в пикселях. Аниматор предлагает стандартные варианты 16, 32, 64 и 128, а также произвольное значение. Он должен нацело делить размеры листа. Кадр 128 px на листе шириной 400 px даёт 3,125 столбца, которые рендерер округляет вниз до 3 и оставляет справа полосу неиспользованных пикселей шириной 16 px — эти пиксели затем проявляются как полоска соседнего кадра в последнем столбце. Если кадры выглядят срезанными по правому краю, значит размер кадра не делит ширину листа.

Порядок бывает row-major или column-major. Row-major (обычное значение по умолчанию, которое выдаёт большинство экспортёров) читает слева направо, затем переходит к следующей строке. Column-major читает сверху вниз, затем сдвигается вправо. Лист ходьбы, экспортированный по столбцам, но прочитанный по строкам, воспроизводит кадр 1, затем кадр 5, затем кадр 9 — шаг, который перескакивает на четверть анимации за такт. Исправление — один переключатель, но нужно распознать симптом: движение с пропусками.

FPS и `image_speed` — это разные параметры, которые часто путают. FPS — сколько кадров воспроизводится за секунду. `image_speed` (термин GameMaker, который люди и ищут) — это множитель скорости анимации спрайта относительно скорости room; 1.0 означает, что лист воспроизводится по одному кадру за игровой шаг, 0.5 — через шаг. В браузерном аниматоре FPS задаётся напрямую. Если вы переносите спрайт из GameMaker и персонаж анимируется вдвое быстрее, проверьте `image_speed`, прежде чем перерезать лист.

Циклы ходьбы, покой и атаки

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

Правило для всех трёх: смотрите предпросмотр в конечном игровом масштабе, а не в увеличенном. Ходьба, которая читается в 8×, часто разваливается в 1×, потому что подъём ноги — 2 пикселя, а контраст между поднятой ступнёй и землёй слишком низкий. Уменьшите предпросмотр до размера, который игрок реально увидит, прежде чем что-то утверждать.

Лист ходьбы на четыре направления обычно упорядочен так: вниз, влево, вправо, вверх — вниз лицом к камере, вверх спиной, влево и вправо как горизонтальная пара. Некоторые экспортёры используют порядок вниз, вверх, влево, вправо. Если персонаж лунной походкой идёт назад при нажатии вверх, строки перепутаны и вы воспроизводите строку «вниз» для ввода «вверх». Это правка в две строки в проигрывателе, а не повторный экспорт.

Для движения на 8 направлений нужны диагонали: вниз-влево, вниз-вправо, вверх-влево, вверх-вправо. С четырьмя горизонтально зеркальными направлениями вы дёшево получаете 4 строки (лево и право — один и тот же арт, отражённый, поэтому многие листы имеют 4 строки, а не 8). Движение по диагонали всего с 4 направлениями заставляет движок выбирать ближайшее направление, что заметно переключается при диагональном вводе. Если в игре поддерживается диагональное движение, заложите 8 отдельных строк или смиритесь с переключением.

Число кадров: 6 или 8 кадров на направление — обычное дело при размере 16–32 px. При 4 кадрах ходьба выглядит рваной, но читается в малом размере; при 10 кадрах интервал между контактной и проходящей позами становится настолько плотным, что нужен тайминг по кадрам, который проигрыватель с равномерным FPS выразить не может. Браузерный аниматор воспроизводит равномерно, поэтому стройте лист с равными интервалами, если собираетесь смотреть предпросмотр здесь.

Покой — это анимация, на которую игрок смотрит, когда ничего не происходит, поэтому она несёт наибольший вес на кадр. Стандартная структура — цикл дыхания: грудь поднимается, плечи поднимаются на пиксель, вес смещается, и обратно. Squash and stretch — то, что не даёт этому выглядеть как статичный спрайт, который слегка толкают. На нисходящей доле сожмите персонажа на один-два пикселя по вертикали и расширьте на один; на восходящей — наоборот.

Частая ошибка — переборщить со сжатием. Персонаж 32 px, сжатый на 4 px, — это 12,5% его высоты, и читается как желе. Один пиксель вертикального растяжения на спрайте 32 px — это 3%, и читается как дыхание. Если покой выглядит так, будто персонаж прыгает на батуте, вы, вероятно, масштабировали всю ячейку, а не персонажа внутри неё — кадр изменил размер относительно сетки.

Смотрите покой при том же FPS, с которым будете выпускать игру. Покой на 6 FPS дрейфует; на 12 FPS дышит. Поскольку медленный покой — это в основном одно и то же изображение с небольшими смещениями, вы на самом деле проверяете точку зацикливания: последний кадр должен чисто переходить в первый без скачка положения плеч.

Атака — это три фазы с неравномерным таймингом, а не равномерная серия. Замах оттягивает назад — рука заносится, корпус сжимается, часто это 2–3 удержанных или замедляющихся кадра. Удар — один или два кадра, самая быстрая часть, где оружие достигает полного выноса, а поза максимально крайняя. Восстановление — это возврат, и именно на нём новички обрезают слишком рано. Атака на 6 кадров с 2 на замах, 1 на удар, 3 на восстановление читается; атака на 6 кадров, разбитая поровну 2-2-2, читается как толчок.

Поскольку аниматор воспроизводит равномерно, приём в том, чтобы удерживать позу замаха дублированием кадров, а не менять тайминг по кадрам. Два одинаковых кадра замаха дают удержание. Один кадр удара даёт резкость. Это тот же приём, что используется в листах, нарисованных вручную, и он выживает при переносе в любой движок.

Анимации сотворения заклинания добавляют вторую проблему: эффект должен появляться и исчезать на определённом кадре. Если в лист встроены снаряд или магический круг, проигрыватель должен знать, когда создавать реальный объект — обычно это первый кадр удара. Если эффект — отдельный объект, держите лист чистым и привязывайте появление к индексу кадра удара, а не к секунде реального времени.

Создайте цикл ходьбы из одного описания

Ручное создание восьми строк цикла ходьбы — это часы работы, и в награду получается лист, который всё ещё нужно проверять в проигрывателе. Agent Sprite Forge переворачивает это: вы пишете описание персонажа — и получаете лист. Одно описание, восемь направлений, лист приходит уже нарезанным по сетке с прозрачными кадрами и якорями у ног, чтобы персонаж не покачивался при размещении.

На первом проходе якоря важнее арта. Цикл ходьбы, где ступни не лежат на одной линии земли, выглядит так, будто персонаж на батуте, независимо от качества рисунка. Поскольку сгенерированные кадры несут якорь, вы можете перетащить лист в аниматор, воспроизвести его и увидеть, что линия земли держится — именно эту проверку статичное изображение дать не может.

Сгенерированный результат — обычный спрайт-лист: строки и столбцы, прозрачный фон, стандартные размеры кадров. Ничто в нём не привязано к Neta Studio. Экспортируйте его, перетащите в аниматор для проверки, перережьте, если движку нужна одна строка, и двигайтесь дальше. Если генератор выдал направление, которое вам не нужно — скажем, назад-влево, потому что игра поддерживает только 4 направления, — игнорируйте эту строку на этапе перерезки.

Программы для анимации спрайтов: что с чем сравнивать

Правильный инструмент зависит от того, что у вас уже есть на руках. Готовый лист и вопрос о тайминге — это другая задача, чем пустой холст и отсутствие персонажа. Таблица ниже сопоставляет отправную точку с подходящим инструментом и включает случаи, где собственный аниматор движка — верный ответ, а сторонний проигрыватель избыточен.

Простое правило: если вы смотрите предпросмотр — используйте проигрыватель. Если вы рисуете — используйте редактор. Если вы генерируете — используйте генератор. Большая часть путаницы возникает из-за использования проигрывателя для рисования: нельзя исправить плохую контактную позу в инструменте воспроизведения, и нельзя исправить ощущение тайминга в инструменте рисования, где нет воспроизведения.

Экспорт GIF или перерезанного листа

Два варианта экспорта покрывают большинство случаев. Первый — анимированный GIF: текущий цикл, при текущем FPS, в текущем масштабе, одним файлом. У GIF нет среды выполнения, он воспроизводится в любом окне чата, инструменте ревью или трекере задач. Именно это вы отправляете коллеге, который ничего не будет устанавливать. Цена — палитра на 256 цветов, что нормально для большинства пиксель-арта и даёт заметные полосы на мягких градиентах: если у спрайта плавное свечение, ожидайте постеризации.

Второй — перерезанный лист. Аниматор берёт загруженный лист и его настройки кадров и записывает новое изображение с другой упаковкой: одна строка для флипбука, или четыре строки для набора направлений, или та же сетка с другим размером ячейки. Перерезка не теряет качества, когда размер ячейки остаётся прежним и вы только меняете порядок. Когда вы меняете размер ячейки, инструмент делает ресемплинг, а любой ресемплинг пиксель-арта, не кратный целому числу, размывает края.

Частая перерезка — флипбук: каждый кадр одной анимации выложен слева направо в одну строку, без переноса. Некоторые движки и техники CSS-спрайтов хотят именно такую форму. Возьмите ходьбу на 6 кадров, перережьте в одну строку из 6 — и полоса будет 6× ширины кадра на 1× высоты кадра. Если нужна такая полоса в виде GIF, конвертер спрайт-листа в GIF делает тот же экспорт цикла из упакованного листа.

Задайте размер кадра и число столбцов до экспорта. Экспортёр записывает, используя сетку, настроенную в проигрывателе, а не ту, что была угадана при загрузке. Если вы исправили предположение, чтобы устранить срез, и не перепроверили число кадров, экспортированный лист унаследует неверное число.

Войдите в мир, которому он принадлежит

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

FAQ