Лист, который хорошо выглядит сеткой, в движении всё равно может прыгать, скользить или дёргаться. Открывать движок ради каждой правки долго. Этот просмотрщик проигрывает лист с заданным FPS, с попиксельным зумом, с onion skin для проверки шага между кадрами, с ping-pong для idle и с проигрыванием по строкам для листов с несколькими анимациями или направлениями.
Как пользоваться инструментом «Просмотр анимации»
- Перетащите спрайт-лист (сетка определяется сама), несколько PNG-кадров или анимированный GIF.
- При необходимости поправьте строки и столбцы. В многострочных листах выберите одну строку, чтобы проиграть отдельную анимацию или направление.
- Задайте FPS. Превью показывает и миллисекунды на кадр — именно их просит большинство движков.
- Шагайте по кадрам стрелками, включите onion skin, чтобы видеть предыдущий кадр, и попробуйте ping-pong.
- Увеличивайте с попиксельным масштабированием и переключайте фоны, чтобы проверить спрайт на тёмном, светлом и зелёном.
- Экспортируйте GIF с той же скоростью, ping-pong и фоном.
Что вы получаете
- Живое превью на 1–60 fps с покадровым шагом и горячими клавишами.
- Анимированный GIF в 1×–8× с прозрачным или сплошным фоном, готовый для девлога или страницы в сторе.
С какими движками работает
- Используйте FPS, который здесь выглядит правильно, как скорость анимации в Godot (скорость SpriteFrames), Unity (Sample Rate), GameMaker (скорость спрайта) или Phaser (frameRate).
- Проигрывание по строкам повторяет то, как большинство движков хранят листы на 4 и 8 направлений: одна строка на направление.
Советы из практики геймдева
- Циклы ходьбы обычно хорошо смотрятся на 8–12 fps, бег — на 12–16, idle — на 4–8.
- Onion skin показывает предыдущий кадр синим. Если конечность сильно перескакивает между двумя кадрами, добавьте промежуточный.
- Если персонаж скользит, кадры привязаны по-разному. Нарежьте лист заново с выравниванием по низу в «Нарезке спрайт-листа».
- Проверяйте и на светлом фоне. Тёмные контуры, которые хорошо видны на чёрном, могут пропадать на тёмных игровых картах.
Сценарии использования
- Проверка таймингов анимации перед импортом в движок.
- Просмотр листов от художника или из ассет-пака.
- Создание GIF из листа для соцсетей или питч-дека.
- Сравнение направлений персонажа на 8 направлений рядом, строка за строкой.
Вопросы и ответы
Как управлять воспроизведением с клавиатуры?
Пробел запускает и ставит на паузу. Стрелки влево и вправо переходят на один кадр и ставят на паузу.
Что такое onion skin?
Это бледный показ предыдущего кадра (с синим оттенком) под текущим, чтобы видеть, насколько далеко сдвигается каждая часть между кадрами, и замечать скачки.
Можно проигрывать только одну строку листа?
Да. Если в листе несколько строк, выберите строку, чтобы проиграть только эту анимацию или направление, или «Все», чтобы проиграть все кадры по порядку.
Поддерживаются ли GIF и отдельные кадры?
Да. Перетащите анимированный GIF, чтобы проиграть его кадры, или несколько PNG, чтобы проиграть их в естественном порядке имён файлов.
Мой лист загружается на сервер?
Нет. Превью полностью работает в браузере.
Почему в других просмотрщиках моя анимация выглядит размытой?
Большинство просмотрщиков масштабируют со сглаживанием. Этот масштабирует по ближайшему соседу — так же, как должна быть настроена пиксель-арт игра, — поэтому здесь вы видите то же, что увидят игроки.