Convertidor de GIF a hoja de sprites — gratis, en el navegador, sin subir archivos

La conversión de un GIF a hoja de sprites parece trivial hasta que la haces a mano. Un GIF ya es una secuencia de fotogramas completos con una paleta y retardos por fotograma, así que lo que realmente necesitas es una herramienta que decodifique cada fotograma, componga la transparencia correctamente y coloque esos fotogramas en un solo PNG dentro de una cuadrícula que puedas direccionar con coordenadas de textura. El convertidor de Neta Studio hace ese paso de decodificación localmente sobre un elemento canvas, así que tu archivo se queda en el navegador y nunca llega a un servidor. Sueltas un GIF, eliges columnas, filas y FPS, y descargas un único PNG atlas.

Lo difícil no es el dibujo. Son la paleta, el tiempo y las matemáticas de la cuadrícula. El GIF almacena la transparencia como un índice dentro de una tabla de color, así que un fotograma que se veía limpio en un visor de imágenes puede llegar al canvas con un fondo negro o blanco una vez compuesto. Los retardos de fotograma en un GIF están en centésimas de segundo y a menudo varían de un fotograma a otro, y por eso una exportación ingenua produce una hoja que se entrecorta. Esta página cubre los ajustes que importan y los modos de falla que encontramos al construir la herramienta.

Convierte un GIF a una hoja de sprites

El convertidor es lo primero en la página: una zona para soltar archivos, una tira de vista previa de fotogramas y cuatro controles — columnas, filas, FPS y un interruptor para conservar el canal alfa. Cuando sueltas un archivo, el navegador crea un ImageBitmap por fotograma a través del decodificador de GIF, dibuja cada uno en un canvas fuera de pantalla con las dimensiones de origen y luego los copia al canvas del atlas en las posiciones de celda calculadas. El archivo de origen se lee con la File API y se mantiene en memoria. No se realiza ninguna solicitud de red que transporte tu GIF.

La salida siempre es PNG. El PNG te da un canal alfa de 8 bits, que es lo que necesitas para trabajo de personajes; JPEG aplanaría cada borde suave en un fondo sólido. Si tu GIF no tiene transparencia, el atlas seguirá siendo RGBA y los bytes alfa sin usar solo cuestan tamaño de archivo. Si tu GIF sí usa transparencia, el decodificador debe solicitar el fotograma completo con su método de disposición en lugar de una actualización parcial, o los elementos en movimiento se arrastrarán por toda la hoja.

Construye la hoja según cómo la muestree tu motor, no según cómo se ve en un explorador de archivos. Una cuadrícula de 4x4 con fotogramas de 64x64 es una textura de 256x256 y direcciona el fotograma n en la columna n mod 4, fila floor(n / 4). Mantén el tamaño de la hoja en una potencia de dos cuando el motor o el shader de destino espere un atlas así; una hoja de 320x320 se rellenará o se remuestreará en algunas rutas y los bordes de los sprites se suavizarán.

GIF a hoja de sprites para VRChat

El shader flipbook de VRChat lee una textura como una sola tira horizontal, no como una cuadrícula. Si le entregas una hoja de 6x4, obtienes una tira de la primera fila repetida, porque las matemáticas de UV asumen que cada fotograma está en la misma fila y el índice de fotograma solo avanza en el eje U. Define las columnas como la cantidad de fotogramas y las filas como 1. Una animación de 24 fotogramas se convierte en una hoja de 24x1.

Haz que el ancho total de la tira sea una potencia de dos. Una tira de 24 fotogramas de 64 píxeles mide 1536 píxeles de ancho, que no es una potencia de dos; el siguiente tamaño que divide limpiamente a 64 píxeles es 2048, lo que da espacio para 32 fotogramas. Puedes rellenar las celdas sin usar con píxeles transparentes o con un duplicado del último fotograma. La potencia de dos importa porque una textura que no lo es y que pasa por generación de mipmaps o compresión en la ruta de subida puede desplazar el muestreo medio texel, y un sprite de un píxel de ancho lo va a evidenciar.

Aplica el alfa aquí, en la hoja, no en el shader. Una ruta de cutout o alpha-test en un shader es una herramienta tosca; los bordes suaves del contorno antialiasado de un GIF sobrevivirán o desaparecerán según el umbral, y el umbral no es algo que quieras ajustar avatar por avatar. Exporta el PNG con alfa real y un borde seguro para premultiplicación, y el shader simplemente lo muestrea. Mantén el ritmo del bucle constante: el flipbook de VRChat avanza en un paso de tiempo fijo, así que si tu GIF de origen tenía retardos irregulares por fotograma, igualalos antes de exportar o la animación correrá a una velocidad uniforme que no coincide con el tiempo original.

Para ver la lista completa de parámetros y la configuración de la textura, consulta la guía de texturas flipbook.

GIF a cuadrícula de fotogramas ("hoja de cálculo")

Cuando la gente busca gif to spreadsheet, casi nunca se refiere a un .xlsx. Se refiere a la cuadrícula de fotogramas: los fotogramas distribuidos en filas y columnas para que cada uno sea direccionable por un índice. Se usa esa palabra porque una cuadrícula se parece a una hoja de cálculo a primera vista. Esta herramienta produce esa cuadrícula, y la cuadrícula es lo mismo que una hoja de sprites: la diferencia está solo en cómo la llamas. Lo que importa es que el diseño sea regular: tamaño de celda fijo, columnas fijas y un orden de fotogramas que va de izquierda a derecha y de arriba a abajo.

La alternativa que a veces se intenta es dibujar los fotogramas uno por uno en un editor de pixel art, apilando capas de calco hasta que la animación se vea bien. Ese flujo de trabajo es bueno para personajes creados a mano y terrible para un GIF que ya tienes. Un editor de píxeles no leerá los retardos por fotograma de un GIF, e importar 24 fotogramas manualmente en 24 capas pierde por completo el tiempo. Si tu fuente ya es una animación, convertir la cuadrícula es el camino más corto. Vale la pena usar las herramientas de pixel art cuando estás creando, no cuando estás transcodificando.

Para el trabajo de fotogramas dibujados a mano, las páginas de pixel art cubren el lado del dibujo y la paleta.

Tamaño de fotograma, cuadrícula y fondos transparentes

Cuatro cosas arruinan la mayoría de las conversiones. Cada una tiene un síntoma específico.

La transparencia del GIF muere en la paleta. Un GIF puede usar como máximo 256 colores y marca la transparencia como un índice de paleta. Cuando un fotograma se decodifica con el método de disposición 2, el área que era transparente en un fotograma puede restaurarse al color de fondo de un fotograma anterior. La solución es componer cada fotograma sobre un búfer transparente, no sobre blanco. Si tu vista previa muestra una forma negra o gris alrededor del sprite, ese es el índice de fondo de la paleta, y ahora son píxeles reales.

La última fila queda incompleta. Si tu cantidad de fotogramas es 23 y eliges 6 columnas, obtienes tres filas completas y una última fila con cinco celdas, no seis. El alto del atlas igual se redondea al alto de la fila completa. Si las matemáticas del flipbook de tu motor asumen una cuadrícula completa y derivan el índice de fotograma dividiendo el total de fotogramas entre las columnas, leerán una celda vacía al final del bucle. Rellena la hoja hasta formar un rectángulo completo con celdas transparentes, o reduce las columnas para que la cantidad se divida de forma exacta.

El tamaño del fotograma debe dividir la hoja. Si extraes un sub-rectángulo de 64 de ancho de una hoja de 320 de ancho, obtienes cinco columnas exactas. De una hoja de 330 de ancho obtienes cinco columnas y un residuo de 10 píxeles que no es un fotograma. Mantén las dimensiones de la hoja en el tamaño del fotograma multiplicado por las columnas, y lo mismo en ambos ejes.

Error de uno en el origen. Las coordenadas UV de textura suelen ir desde la esquina inferior izquierda, mientras que la cuadrícula de fotogramas se distribuye desde la esquina superior izquierda. Si el fotograma 0 se renderiza como el último, tu motor está invirtiendo la V. La celda del sprite para la columna c, fila r está en x = c * width, y = r * height en el espacio de la imagen, y convertir eso a una UV invertida es una resta respecto de 1.

A dónde va la hoja después

La exportación es el mismo PNG en todos los casos; los motores difieren en cómo esperan que se corte la textura y en qué hacen con el alfa. Usa esto como referencia breve.

Para cada destino, exporta una hoja con la cuadrícula que ese destino pueda leer sin un shader personalizado. Si vas a soportar dos destinos, exporta dos hojas: una tira horizontal para VRChat y una cuadrícula para el motor. Volver a exportar desde el mismo GIF toma menos tiempo que escribir las matemáticas de UV para conciliarlas.

Mira tu hoja animarse en 3D

La mayoría de los convertidores se detienen en el PNG y te dejan verificar el resultado en otro lugar. El constructor de juegos 3D sigue avanzando: puedes cargar una hoja en un plano tipo billboard y verla animarse en una escena real, que es la única prueba que responde si la cuadrícula y el tiempo están bien. Agent Sprite Forge es donde un sprite se convierte en un personaje con un controlador; el sprite es el personaje, y el mundo 3D es donde vive.

The Cyclops' Island es la demo jugable de esa idea: una pequeña escena 3D por la que puedes moverte, construida en el navegador, usando sprites como personajes. Suelta tu propia hoja y el mismo rig que mueve los fotogramas de la demo muestreará tu atlas. Si el orden de los fotogramas está mal, lo ves de inmediato: el personaje camina hacia atrás, o salta a una celda vacía al final del bucle. Si el alfa está mal, ves un rectángulo duro alrededor del cuerpo. Son las mismas fallas que encontrarías en un motor, visibles en unos cinco segundos.

Prueba la escena jugable de Cyclops' Island y reemplázala con tu propio atlas.

Más herramientas de sprites gratuitas

El convertidor es una pieza. Estas tres cubren el resto del flujo de trabajo con sprites en Neta Studio, y se ejecutan en la misma sesión del navegador con el mismo manejo de archivos locales.

Entra al mundo al que pertenece

Un sprite es un personaje sin un lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una isla pequeña, un planeta, una esquina lluviosa de una calle. Cada mundo en este sitio se creó a partir de una descripción escrita y se publicó como una página que puedes jugar.

Preguntas frecuentes