Sprite Sheet
Sprite Sheet (Atlas de Imagens)
Uma unica imagem que combina multiplas imagens ou frames de animacao menores numa grelha, utilizada no desenvolvimento web e de jogos para reduzir os pedidos HTTP e melhorar o desempenho de renderizacao.
Detalhe técnico
As sprite sheets organizam frames ou icones numa unica textura com mapeamento de coordenadas. Em CSS, background-position seleciona sprites individuais. Em jogos, os atlas de texturas maximizam a utilizacao de VRAM e minimizam as mudancas de estado de desenho. Os formatos incluem: grids de tamanho uniforme (frames de igual tamanho), atlas empacotados (diferentes tamanhos, retangulos ajustados) e multi-atlas (multiplas texturas). Ferramentas como TexturePacker, ShoeBox ou empacotamento de sprites CSS geram automaticamente metadados de coordenadas.
Exemplo
```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)
```