GIF a hoja de Sprites

Convierte tus GIF animados en hojas de sprites para desarrollo de juegos, animaciones CSS y más. Elige entre múltiples opciones de diseño.

Deja tu GIF aquí

o haga clic para explorar los archivos

Tamaño máximo de archivo: 10 MB
Herramientas GIF relacionadas:
Extractor de marcos Cambiar tamaño de GIF Cambiador de velocidad Comprimir GIF

Cómo funciona

  1. Sube tu archivo GIF animado utilizando arrastrar y soltar o el explorador de archivos.
  2. Elija su diseño preferido: horizontal, vertical, cuadrícula o automático.
  3. Ajuste la configuración de espaciado, relleno y escala según sea necesario.
  4. Seleccione qué cuadros desea incluir en la hoja de sprites.
  5. Haga clic enGenerar hoja de Sprite" y descarga tus archivos.

Explicación de las opciones de diseño

Horizontal

Todos los fotogramas se organizan en una sola fila de izquierda a derecha. Ideal para animaciones CSS sencillas y motores de juego que requieren franjas horizontales.

Vertical

Todos los fotogramas se apilan en una sola columna. Útil para animaciones de desplazamiento vertical o cuando el ancho es limitado.

Cuadrícula

Marcos dispuestos en una cuadrícula personalizable. Especifique el número de columnas y filas para un control preciso.

Automática

Calcula automáticamente la disposición más cuadrada. Ideal para exportaciones rápidas sin configuración manual.

Preguntas Frecuentes

Una hoja de sprites es una imagen única que contiene varias imágenes más pequeñas (sprites) dispuestas en una cuadrícula o franja. Los desarrolladores de juegos y diseñadores web las utilizan para cargar y animar eficientemente personajes, objetos y elementos de la interfaz de usuario.

Se recomienda PNG para sprites con transparencia. WebP ofrece archivos de menor tamaño y buena calidad. JPG es mejor para fotografías, pero no admite transparencia.

El archivo JSON de metadatos contiene información sobre la posición, el tamaño y el tiempo de cada fotograma. Es compatible con motores de juego populares como Phaser, PixiJS y Unity, lo que facilita la importación de tu hoja de sprites.

¡Sí! El archivo CSS generado incluye estilos para cada posición de fotograma y un fotograma clave de animación listo para usar. Simplemente incluye el CSS y aplica la clase de animación a tu elemento.