Sprite Sheet
Sprite Sheet (Image Atlas)
A single image file that combines multiple smaller images arranged in a grid, allowing a browser or game engine to display individual graphics by selecting rectangular regions from the larger sheet.
技術的詳細
Sprite sheets reduce HTTP requests by consolidating many icons or animation frames into one file. CSS sprites use background-position to display specific regions: .icon { background: url(sprites.png) -64px -32px; width: 32px; height: 32px; }. Game sprite sheets store animation frames in sequence, advancing the displayed region each frame. Tools like TexturePacker or ShoeBox optimize packing density by arranging sprites to minimize wasted space. The technique has become less critical with HTTP/2 multiplexing but remains valuable for game animations and icon sets loaded as a single texture.
例
```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)
```