🍋
Menu
Image

Sprite Sheet

Sprite sheet (atlas de imágenes)

Un archivo de imagen único que combina múltiples imágenes más pequeñas dispuestas en una cuadrícula, lo que permite que una aplicación web o juego cargue una sola imagen y muestre porciones individuales según sea necesario.

Detalle técnico

Los sprite sheets reducen las solicitudes HTTP al consolidar muchos iconos o fotogramas de animación en una sola imagen. En desarrollo web, los CSS sprites usan background-position para mostrar regiones específicas. En el desarrollo de juegos, los sprite sheets incluyen metadatos (JSON/XML) que definen el nombre de cada frame, su posición, tamaño y punto de pivote. Las herramientas modernas como TexturePacker optimizan el empaquetamiento para minimizar el espacio desperdiciado.

Ejemplo

```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)
```

Herramientas relacionadas

Términos relacionados