🍋
Menu
Image

Sprite Sheet

Спрайт-лист (атлас изображений)

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

Техническая деталь

Спрайт-листы сокращают HTTP-запросы, объединяя множество иконок или кадров анимации в один файл. CSS-спрайты используют background-position для отображения конкретных областей: .icon { background: url(sprites.png) -64px -32px; width: 32px; height: 32px; }. Игровые спрайт-листы хранят кадры анимации последовательно, меняя отображаемую область в каждом кадре. Такие инструменты, как TexturePacker или ShoeBox, оптимизируют плотность упаковки. Техника стала менее критичной с появлением мультиплексирования HTTP/2, но остаётся ценной для игровой анимации и наборов иконок, загружаемых как единая текстура.

Пример

```javascript
// Sprite Sheet: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```

Связанные инструменты

Связанные термины