Low budget? Rent a premium website today & own it later! We handle all design & hosting headaches so you can focus on growth. From INR 2499/mo →
S

GIF a hoja de Sprites

Convierte tu GIF animado en una hoja de sprites para desarrollo de videojuegos y animaciones CSS. Elige dise os horizontales, verticales o de cuadr cula, y exporta con metadatos JSON o CSS listo para usar. Comb nalo con el Extractor de fotogramas GIF para seleccionar fotogramas individuales o redimensionar 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 los fotogramas extra dos individualmente.

Sprites de la interfaz de usuario

Combina las animaciones de los iconos en una sola hoja. Mejora primero la calidad y luego empaqu talas 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 fotogramas para inspeccionar cada fotograma 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.

Welcome to SurITDev's official GIF a hoja de Sprites. Our enterprise-grade utility allows you to instantly process your data securely in your browser without tracking or logging. This tool is fully optimized for speed, accuracy, and professional workflow.

Our Marketplace & Social Media Partners

Trusted by leading brands and platforms worldwide