Generador de sprite sheets

Combina muchas imágenes en una hoja

Una sprite sheet guarda muchas imágenes pequeñas en un solo archivo. Los juegos las usan para fotogramas de animación y casillas, y las webs llevan años usándolas para cargar decenas de iconos con una sola petición. Montar una a mano en un editor de imágenes es lento y propenso a errores.

Este generador coloca tus imágenes en una cuadrícula regular, fila a fila, en el orden en que las añades. Cada celda tiene el tamaño de la imagen más grande, para que los fotogramas se alineen de forma predecible, y la hoja se guarda en PNG, que conserva la transparencia.

Cómo crear una sprite sheet

1. 1

   Paso 1: Añade tus imágenes

   Suelta hasta 100 imágenes, en el orden en que deben aparecer.

2. 2

   Paso 2: Ajusta las columnas

   Elige de 1 a 20 columnas; las filas se añaden automáticamente.

3. 3

   Paso 3: Ajusta margen y fondo

   Añade de 0 a 80 px de margen entre celdas y elige fondo transparente, blanco, negro o personalizado.

4. 4

   Paso 4: Descarga el PNG

   Revisa la vista previa en directo y descarga sprite-sheet.png.

Ajustes de la sprite sheet

Para qué sirven las sprite sheets

• Animación de juegos 2D. Agrupa ciclos de caminata y efectos para motores como Phaser, Godot o Unity.

• Sprites de iconos en CSS. Sirve muchos iconos como una sola imagen y colócalos con background-position.

• Juegos de casillas. Reúne las casillas de un mapa en un único atlas.

• Packs de emojis y pegatinas. Mantén una serie de gráficos pequeños en un solo archivo ordenado.

Cómo encontrar la posición de cada sprite

Como todas las celdas tienen el mismo tamaño, puedes calcular las posiciones en lugar de leer un archivo de mapa. Con un ancho de celda W y un alto H (las medidas de la imagen más grande) y un margen P, la imagen de la columna c y la fila r (contando desde cero) empieza en x = c por (W + P) e y = r por (H + P).

Las imágenes más pequeñas que la celda se colocan en su esquina superior izquierda y no se escalan. Para animaciones, exporta todos los fotogramas con el mismo tamaño para que cada uno quede exactamente en su celda.

• x = columna por (ancho de celda + margen).
• y = fila por (alto de celda + margen).
• Los fotogramas se numeran de izquierda a derecha y de arriba abajo.

Usar la hoja en CSS

Define la hoja como background-image de un elemento del tamaño de una celda y muévela con un background-position negativo, por ejemplo background-position: -64px 0 para el segundo icono de 64 px de la primera fila.

Para pantallas de alta densidad, crea la hoja con imágenes al doble del tamaño de visualización y escala el fondo con background-size.

Consejos para sprite sheets

• Numera tus fotogramas (01, 02, 03) y añádelos en ese orden.
• Usa de 1 a 2 px de margen en texturas de juego para evitar que los bordes se mezclen.
• Mantén los sprites del mismo tamaño en las animaciones.
• Comprime el PNG final con el compresor por lotes si el peso importa.

Preguntas sobre el generador de sprite sheets