Что такое спрайтшит? Понятное объяснение того, как двигаются персонажи в играх

Когда начинаешь рисовать персонажей в пиксель-арте, рано или поздно встречается термин «спрайтшит» (sprite sheet). Делюсь вступительным разбором Keitaro из note: он шаг за шагом объясняет, как всё устроено, и мне показался полезным.

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

Игра не выводит большую картинку целиком. По координатам она вырезает только нужный кадр. Например, если каждый кадр 128×128 пикселей и восемь стоят подряд, область вывода смещается с 0–127 px на 128–255 px и так далее. В статье также приведён пример: по горизонтали идут 8 направлений, по вертикали — действия (ходьба, атака, получение урона, защита), то есть 8 направлений × 7 состояний, всего 56 кадров.

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

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

Источник: note (Keitaro)