Gato en pixel art caminando
De GIF a sprite sheet en una fila de seis fotogramas: la distribución que la mayoría de los motores lee como una tira.
Convertir GIF a sprite sheet
Suelta un GIF animado y obtén todos sus fotogramas en una sola sprite sheet PNG, con atlas JSON y animación CSS. Este conversor gratis de GIF a sprite sheet también abre WebP y PNG animados y clips de video cortos, todo en tu navegador.
GIF a sprite sheetGratis · funciona en tu navegador
Suelta aquí un GIF
GIF, WebP o PNG animado, o un clip corto MP4 o WebM. Todo se queda en tu navegador.
- Gratis, funciona en tu navegador
- GIF, WebP, PNG y video
- Filas, columnas y margen
- PNG, atlas JSON y CSS
Ejemplos de GIF a sprite sheet
Ocho animaciones hechas para estos ejemplos, cada una convertida en sprite sheet con el propio conversor de esta página. Abre una y prueba todos los ajustes.
Pájaro azul aleteando
Cuatro fotogramas en una sprite sheet en potencia de dos, 1024 × 1024, para los motores que la piden.
Antorcha parpadeante
Seis fotogramas a la mitad de tamaño, una sprite sheet pequeña para un juego de tiles.
Indicador de carga
Ocho fotogramas en una sprite sheet cuadrada, lista para una animación de carga en CSS.
Fantasma flotando
Cuatro fotogramas en una columna, para los motores que reproducen las sprite sheets de arriba abajo.
Icono de corazón latiendo
Cuatro fotogramas con 4 px de margen, para que los bordes nunca se mezclen con el fotograma siguiente.
Robot saludando
Cuatro fotogramas en una fila con 4 px de espacio entre ellos.
Llama de cohete
Cuatro fotogramas de una llama parpadeante en una sprite sheet casi cuadrada.
Cómo hacer una sprite sheet a partir de un GIF
Tres pasos, sin subir nada.
Suelta, pega o elige un GIF, WebP o PNG animado, o un clip corto MP4 o WebM. Cada fotograma se lee en tu dispositivo.
Conserva todos los fotogramas o un rango, toma uno de cada n, quita los repetidos y ajusta las columnas, el margen, el espacio y el tamaño de fotograma.
Guarda la sprite sheet PNG, el atlas JSON con la duración de cada fotograma, una animación CSS o los fotogramas como PNG en un ZIP.
Lo que mejor hace este conversor de GIF a sprite sheet
Seis puntos fuertes, de un ciclo de caminata en pixel art a una animación de carga para la web.
- Animación
GIF, WebP, PNG y clips cortos
Abre un GIF animado, un WebP o PNG animado, o un clip corto MP4 o WebM. Los fotogramas se leen tal como los muestra un visor, así que los fotogramas de GIF superpuestos salen completos.
Solo los fotogramas que necesitas
Conserva un rango, toma uno de cada dos o tres fotogramas y quita los repetidos. La duración de un fotograma omitido pasa al anterior, así la animación mantiene su velocidad.
Una distribución para cada motor
Una sprite sheet casi cuadrada, una fila, una columna o el número de columnas que elijas, con margen, espacio y tamaños en potencia de dos, para que cada conversión de GIF a sprite sheet encaje en tu motor.
Atlas JSON y animación CSS
El atlas JSON recoge la posición y la duración de cada fotograma en el formato que leen Phaser y PixiJS; el archivo CSS reproduce la sprite sheet en cualquier página web.
Tamaño de fotograma y pixel art
Reduce los fotogramas a un cuarto o a la mitad para sprite sheets más ligeras, o amplía el pixel art 2× o 4× con píxeles nítidos. El tamaño de la sprite sheet aparece antes de descargar.
Gratis y privado
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 limpias a partir de cualquier animación
Cinco consejos breves para una sprite sheet limpia a partir de cualquier animación.
Elige la distribución que lee tu motor
Una fila sirve para la mayoría de las herramientas de animación y para CSS; una sprite sheet casi cuadrada mantiene las animaciones grandes dentro del tamaño máximo de textura; una columna va bien con los motores que leen de arriba abajo.
Recorta los fotogramas
Ajusta “Desde el fotograma” y “Hasta el fotograma” para quedarte con un solo bucle, y “Uno de cada” para reducir a la mitad una animación larga. “Quitar fotogramas repetidos” elimina las pausas que algunos GIF guardan como copias.
Margen y espacio
Añade de 1 a 4 px de margen cuando los fotogramas se escalan en un juego, para que los bordes de cada fotograma queden limpios. El espacio deja sitio entre las celdas para editar.
Vigila el tamaño de la sprite sheet
El tamaño aparece debajo de la sprite sheet. Para teléfonos, un tamaño de fotograma menor o más columnas mantiene cada lado dentro de 4096 px; activa “Tamaño en potencia de dos” para los motores que lo piden.
Usa el atlas o el CSS
Carga el PNG con el atlas JSON en tu motor y tendrás cada fotograma con su nombre y su duración. En una web, enlaza el archivo CSS y dale su clase a un elemento.
Quién convierte animaciones en sprite sheets
Motivos habituales para convertir un GIF en sprite sheet.
Desarrolladores de videojuegos
Lleva GIF animados y clips a un motor de juego como una sola textura con fotogramas con nombre.
Diseñadores web
Cambia un GIF pesado por un solo PNG y una animación CSS corta.
Creadores de apps e interfaces
Convierte indicadores de carga y animaciones de iconos en sprite sheets para apps e interfaces.
Animadores y modders
Reúne todos los fotogramas de una animación en una sprite sheet para editarla, compartirla o modificarla.
Preguntas frecuentes sobre sprite sheets
Respuestas sobre cómo convertir animaciones en sprite sheets, los archivos y la privacidad.
Abre el GIF, elige los fotogramas y las columnas y descarga la sprite sheet PNG, más el atlas JSON o el CSS si los necesitas.
Sí. Funciona por completo en tu navegador, sin cuenta y sin marca de agua.
No. Tu animación se lee y se convierte en sprite sheet en tu dispositivo; nada se envía a un servidor.
Sí. Los WebP y PNG animados se abren en Chrome, Edge y Safari, y los clips cortos MP4 o WebM se leen a 12 fotogramas por segundo.
La duración de cada fotograma se guarda en el atlas JSON y en el CSS. Si omites fotogramas, su duración pasa al anterior, así el bucle dura lo mismo que el GIF.
Una fila es lo más habitual para animaciones, una sprite sheet cuadrada mantiene compactas las animaciones largas y una columna va bien con los motores que leen hacia abajo.
El formato JSON hash lo leen Phaser, PixiJS y muchos otros motores y herramientas; recoge el nombre, la posición en la sprite sheet y la duración de cada fotograma.
Sí. “Fotogramas (ZIP)” guarda cada fotograma conservado como su propio PNG, con nombre y numerado en orden.
Convierte tu GIF a sprite sheet ahora
Abre una animación y descarga su sprite sheet en segundos, gratis y en tu navegador.
Abrir un GIF