GIF a hoja de Sprites

Convierte tu GIF animado en una hoja de sprites para desarrollar juegos y animaciones CSS. Elige diseños horizontales, verticales o de cuadrícula; luego, expórtalos con metadatos JSON o CSS listo para usar. Combínalo con... Extractor de fotogramas GIF para seleccionar primero fotogramas individuales, o cambia el tamaño de tu GIF antes de generar la hoja.

Deja tu GIF aquí

o haga clic para explorar los archivos

GIF animado
Máximo 10 MB por archivo
Herramientas relacionadas:
Extractor de marcos Cambiar tamaño de GIF Comprimir GIF Mejorador de GIF PNG a ICO

Cómo crear una hoja de sprites

  1. Sube tu GIF animado usando arrastrar y soltar o el explorador de archivos (hasta 10 MB). Usa el Cambiar tamaño de GIF Primero si necesitas ajustar las dimensiones.
  2. Elige un diseño: Horizontal (una sola fila), Vertical (una sola columna), Cuadrícula (columnas/filas personalizadas), o vehículos (disposición del cuadrado más cercano).
  3. Establezca el espaciado entre fotogramas y el relleno de la hoja en píxeles. Ajuste el control deslizante de escala para ajustar el tamaño de cada fotograma hacia arriba o hacia abajo.
  4. Seleccione qué marcos incluir utilizando la cuadrícula de marcos: deseleccione los duplicados o marcos innecesarios para mantener la hoja compacta.
  5. Elija formato de salida PNG (recomendado para transparencia), WebP o JPG. Habilite metadatos JSON para motores de juegos o CSS para animaciones web.
  6. Haga clic en Generar hoja de Sprite y descargar. Comprime tu GIF original de antemano para reducir el tamaño de entrada.

Explicación de las opciones de diseño

Horizontal

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

Vertical

Todos los fotogramas se apilan en una sola columna. Útil para animaciones con desplazamiento vertical o cuando se necesita un ancho de salida estrecho.

Cuadrícula

Marcos en una cuadrícula personalizable: especifica columnas y filas exactas. Ideal para Phaser, Unity y PixiJS, que requieren hojas de cuadrícula fijas.

vehículos

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

Casos de uso

Desarrollo de juegos

Exporta metadatos JSON compatibles con Phaser, PixiJS y Unity. Activa la salida JSON para la importación instantánea del motor.

Animaciones CSS

Genera la opción de archivo CSS para una animación de fotogramas clave lista para usar. Introdúcela directamente en tu hoja de estilos.

Rendimiento

Una sola solicitud de imagen en lugar de muchas. Las hojas de sprites reducen significativamente la sobrecarga HTTP en comparación con las solicitudes individuales. fotogramas extraídos.

Sprites de la interfaz de usuario

Combine animaciones de iconos en una sola hoja. Mejorar la calidad Primero, empaquetarlo en una hoja de sprites compacta.

Preguntas frecuentes

Una hoja de sprites es una imagen que contiene múltiples fotogramas de animación dispuestos en una cuadrícula o franja. Los desarrolladores de juegos y diseñadores web las utilizan para reducir las solicitudes HTTP y acelerar las animaciones. En lugar de cargar 20 imágenes independientes, el navegador carga una y mueve una ventana sobre ella para mostrar cada fotograma.

Se recomienda PNG para la mayoría de los trabajos con sprites, ya que admite transparencia total y calidad sin pérdidas. WebP ofrece archivos más pequeños con buena calidad y también admite transparencia, ideal para proyectos web modernos. JPG solo es útil cuando no hay transparencia y se necesita el tamaño de archivo más pequeño posible.

El archivo JSON describe cada fotograma: su posición x/y en la hoja, ancho, alto y retardo del fotograma original en milisegundos. Este formato es compatible con Phaser 3, PixiJS y el importador de hojas de sprites de Unity. Utilice el Extractor de marcos para inspeccionar marcos individuales antes de generar la hoja.

Habilite "Generar archivo CSS" antes de hacer clic en Generar. El resultado incluye una clase para la posición de fondo de cada fotograma y una animación de fotogramas clave que recorre todos los fotogramas a la velocidad original. Vincule el archivo CSS y aplique la clase de animación a cualquier div con la hoja de sprites como imagen de fondo.

El GIF se procesa completamente en tu navegador mediante JavaScript, sin necesidad de subirlo. Las hojas de sprites generadas se crean localmente en tu dispositivo y nunca se envían a nuestros servidores. Tus archivos son completamente privados.