Pingüino caminando
Seis fotogramas en una fila, apoyados en la misma línea de suelo.
Crear sprite sheet
Suelta tus fotogramas PNG, iconos u objetos de juego y obtén una sola sprite sheet en segundos: en una cuadrícula ordenada o en una distribución compacta, con atlas JSON o XML, sprites CSS y un GIF animado. Este generador de sprite sheet gratis funciona en tu navegador, así que no se sube nada.
Generador de sprite sheetGratis · funciona en tu navegador
Suelta aquí tus imágenes
PNG, WebP, JPG, GIF o AVIF, todas las que necesites. Todo se queda en tu navegador.
- Gratis, funciona en tu navegador
- Cuadrícula o distribución compacta
- JSON, XML y CSS
- Recorte, margen y potencia de dos
Ejemplos del generador de sprite sheet
Ocho conjuntos de imágenes hechos para estos ejemplos, cada uno unido en una sola hoja con este generador de sprite sheet. Abre uno y prueba todos los ajustes.
Efecto de explosión
Ocho fotogramas en una cuadrícula cuadrada, de la chispa al humo.
Iconos de app
Nueve iconos de distintos tamaños, recortados y empaquetados muy juntos.
Objetos de juego en pixel art
Ocho objetos empaquetados y ampliados al 200 %, con píxeles nítidos.
Iconos de frutas para CSS
Seis iconos en una fila, listos como sprites CSS para una página web.
Stickers espaciales
Seis stickers en tres columnas, en una hoja en potencia de dos.
Murciélago volando
Cuatro fotogramas en una columna, para los motores que leen hacia abajo.
Piezas de ajedrez
Seis piezas de distintas alturas, empaquetadas con un atlas XML.
Cómo crear una sprite sheet
Tres pasos, sin subir nada.
Suelta, pega o elige archivos PNG, WebP, JPG o GIF, todos los que necesites. Ordénalos por nombre o arrástralos para cambiar el orden.
Usa una cuadrícula de celdas iguales para fotogramas de animación, o empaqueta imágenes de cualquier tamaño lo más juntas posible. Ajusta el recorte, el margen, el espacio y el tamaño.
Guarda la sprite sheet PNG con un atlas JSON o XML, sprites CSS para una web o los fotogramas como GIF animado.
Lo que mejor hace este generador de sprite sheet
Seis puntos fuertes, de un ciclo de caminata a una página de iconos web.
ImágenesCuadrícula o compacta
Una cuadrícula de celdas iguales mantiene en orden los fotogramas de animación; la distribución compacta encaja imágenes de cualquier tamaño en la hoja más pequeña que encuentra.
Bordes transparentes recortados
Los bordes vacíos se quedan fuera para ahorrar espacio, y el atlas guarda el tamaño y el desplazamiento originales de cada imagen, así que nada se mueve en tu juego.
Un atlas para cada motor
El atlas JSON usa el formato JSON hash que leen Phaser y PixiJS; el atlas XML usa el formato Sparrow y Starling que leen muchos frameworks de juegos.
Sprites CSS para webs
Una clase por imagen con su tamaño y su posición, así la página carga una sola imagen en lugar de decenas.
Vista previa de la animación y GIF
Reproduce las imágenes en orden a la velocidad que elijas y guárdalas como GIF animado para compartirlas o probarlas.
Gratis y privado
Este generador de sprite sheet funciona por completo en tu navegador: sin subir nada, sin cuenta, sin marca de agua, y sigue funcionando sin conexión una vez cargada la página.
Guía: sprite sheets que encajan en tu motor
Cinco consejos breves para una sprite sheet limpia.
Nombra tus archivos en orden
Los archivos llamados walk_1, walk_2 … walk_10 quedan en el orden correcto con “Ordenar por nombre”, porque los números se leen como números; arrastra cualquier imagen para moverla.
Cuadrícula para animar, compacta para conjuntos
Usa una cuadrícula cuando los fotogramas deben mantener un mismo tamaño y una misma posición; empaqueta iconos, objetos y tiles de distintos tamaños para ahorrar espacio.
Recorta y conserva los desplazamientos
El recorte hace la hoja más pequeña, y los motores que leen el atlas devuelven cada imagen a su sitio. Para una cuadrícula simple leída por tamaño de celda, deja el recorte desactivado.
Margen contra el sangrado
Añade de 1 a 2 px de margen o de espacio cuando la hoja se escala o se filtra, para que las imágenes vecinas nunca asomen por los bordes.
Vigila el tamaño de la hoja
El tamaño aparece debajo de la vista previa. Mantén cada lado dentro de 4096 px para teléfonos y activa “Tamaño en potencia de dos” para los motores que lo piden.
Quién usa un generador de sprite sheet
Motivos habituales para juntar muchas imágenes en una sola hoja con un generador de sprite sheet.
Desarrolladores de videojuegos
Empaqueta personajes, efectos y objetos en una sola textura con un atlas para el motor.
Desarrolladores web
Combina iconos en una sola imagen con sprites CSS para reducir el número de peticiones.
Artistas de pixel art
Organiza los fotogramas de animación y exporta una hoja limpia a tamaño 2× o 4×.
Modders y animadores
Crea hojas con atlas XML o JSON para mods, herramientas y programas de animación.
Preguntas frecuentes sobre el generador de sprite sheet
Respuestas sobre cómo crear sprite sheets, los atlas y la privacidad.
Añade tus imágenes, elige una distribución en cuadrícula o compacta y descarga la sprite sheet PNG con el atlas o el CSS que necesites.
Sí. Funciona por completo en tu navegador, sin cuenta y sin marca de agua.
No. Tus imágenes se leen y se colocan en tu dispositivo; nada se envía a un servidor.
Una cuadrícula da a cada imagen una celda del mismo tamaño, lo mejor para animaciones. La distribución compacta encaja imágenes de distintos tamaños lo más juntas posible, lo mejor para iconos y objetos.
JSON para Phaser, PixiJS y la mayoría de los motores web, XML para frameworks del estilo de Sparrow y Starling, y CSS para páginas web.
No. El atlas guarda el tamaño y el desplazamiento originales de cada imagen, así que los motores que lo leen dibujan cada fotograma en su sitio.
Sí. Abre el GIF en “GIF a sprite sheet”, que lee cada fotograma con su duración y los coloca todos en una sola hoja.
Hasta 1000 imágenes en PC o Mac y 400 en un teléfono, en una hoja de hasta 16.384 px por lado.
Crear sprite sheet ahora
Añade tus imágenes y descarga una sprite sheet en segundos, gratis con este generador de sprite sheet en tu navegador.
Añadir imágenes