Sprite Sheet
Sprite Sheet (Bildatlas)
Eine einzelne Bilddatei, die mehrere kleinere Bilder in einem Raster angeordnet kombiniert, sodass ein Browser oder eine Game-Engine einzelne Grafiken durch Auswahl rechteckiger Bereiche aus dem größeren Blatt anzeigen kann.
Technisches Detail
Sprite Sheets reduzieren HTTP-Anfragen, indem viele Icons oder Animationsframes in einer Datei zusammengefasst werden. CSS-Sprites verwenden background-position, um bestimmte Bereiche anzuzeigen: .icon { background: url(sprites.png) -64px -32px; width: 32px; height: 32px; }. Spiel-Sprite-Sheets speichern Animationsframes in Sequenz und rücken den angezeigten Bereich jeden Frame vor. Tools wie TexturePacker oder ShoeBox optimieren die Packungsdichte, indem Sprites angeordnet werden, um verschwendeten Platz zu minimieren. Die Technik ist mit HTTP/2-Multiplexing weniger kritisch geworden, bleibt aber wertvoll für Spielanimationen und Icon-Sets, die als einzelne Textur geladen werden.
Beispiel
```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)
```