Что такое набор пикселей при анимации

Набор пикселей (sprite sheet) — это изображение, содержащее несколько кадров анимации, объединённых в одну текстуру. Используется для оптимизации производительности, так как загрузка одного файла вместо множества отдельных уменьшает количество HTTP-запросов.

Пример с CSS-анимацией:

.sprite {
  width: 64px;
  height: 64px;
  background-image: url('sprite-sheet.png');
  animation: walk 1s steps(8) infinite;
}

@keyframes walk {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

Нюансы:

• Кадры должны быть одинакового размера
• Порядок кадров важен для плавности анимации
• Для адаптивности нужно учитывать плотность пикселей (retina-экраны)
• В WebGL/Canvas можно использовать JSON-манифесты для описания кадров