Video a sprite sheet

La mayoría de los convertidores de video a sprite sheet capturan fotogramas a intervalos fijos y ahí se quedan. Eso sirve para un efecto de una sola vez. Para un ciclo de caminata te deja una hoja que se traba donde hace loop, un halo verde en cada contorno y un personaje que tiembla porque cada fotograma se recortó por separado. Esta herramienta resuelve esos tres problemas por ti: encuentra el periodo del movimiento, elimina el fondo con despill de bordes y recorta todos los fotogramas con un mismo recuadro.

Cómo usar la herramienta Video a sprite sheet

1. Suelta un MP4, WebM o MOV. Un personaje filmado o renderizado sobre un fondo liso verde, magenta, azul o blanco da el resultado más limpio. Un WebM con canal alfa conserva su transparencia en Chrome y Edge.
2. Define el inicio y el fin de la parte que quieres (hasta 30 segundos) y el tamaño de captura, y luego pulsa Extraer fotogramas. El clip se reproduce una vez mientras se captura cada fotograma decodificado.
3. Si el movimiento se repite, la herramienta encuentra un ciclo completo y lo selecciona. Elige cuántos fotogramas tendrá la sprite sheet; se reparten uniformemente por el ciclo y se omite el fotograma de cierre para que el loop no dé saltos.
4. Revisa la clave del fondo. El modo automático lee el color del fondo desde el borde del fotograma. Si se equivoca, haz clic en el fondo del fotograma de origen. Ajusta la tolerancia, la suavidad de bordes, el despill y la reducción de 1px mientras el resultado se actualiza en vivo.
5. Define el tamaño máximo del fotograma y activa Pixelar si quieres bordes duros y una sola paleta compartida para todos los fotogramas.
6. Exporta la sprite sheet PNG con datos de Aseprite, Phaser/TexturePacker, Godot o CSS, un GIF animado o un ZIP con todo eso más los fotogramas sueltos.

Qué obtienes

• Sprite sheet PNG con fondo transparente, en una cuadrícula (columnas automáticas o fijas, padding opcional).
• Datos de fotogramas en JSON de Aseprite, JSON de Phaser/TexturePacker (hash o array), un SpriteFrames .tres de Godot 4, clases de sprites CSS con una animación por pasos con keyframes, o ajustes de corte para Unity.
• GIF animado a cualquier escala entera, transparente o sobre negro/blanco.
• ZIP con la sprite sheet, el GIF, todos los formatos de datos y cada fotograma como PNG independiente.

Con qué motores funciona

• Godot 4: pon el PNG y el .tres en la misma carpeta y asigna el SpriteFrames a un AnimatedSprite2D. Si el PNG está en otro lugar, edita la ruta res:// de la primera línea.
• Unity: importa el PNG como Sprite (Multiple), pon Filter Mode en Point y córtalo con Grid By Cell Size usando los números del archivo de ajustes de Unity.
• Phaser 3 y PixiJS: carga el PNG con el JSON de TexturePacker (hash) como atlas. El JSON también lista en orden los nombres de los fotogramas de la animación.
• GameMaker, Defold, Construct, RPG Maker: importa el PNG como tira o cuadrícula con el tamaño de fotograma que aparece en los ajustes de exportación.

Consejos de quienes la usan para hacer juegos

• Filma o renderiza sobre un color que no aparezca en el personaje. El magenta es lo más seguro para héroes vestidos de verde; el verde, para cualquier cosa roja o rosa.
• Deja margen alrededor del personaje. Si una extremidad sale del cuadro, el recorte común no puede recuperarla.
• Para ciclos de caminar y correr, 8 fotogramas a 10–12 fps se leen bien a 32–64 px. Los idle pueden usar 4–6 fotogramas en ping-pong; revisa los tiempos en Sprite sheet a GIF.
• Si los contornos conservan un tinte después de quitar el fondo, sube un poco la suavidad de bordes y deja activado el despill. Activa Reducir 1px solo cuando quede un anillo de color.
• Pixela al tamaño final del juego. Reducir un fotograma de 512 px a 48 px con una sola paleta compartida se ve mucho mejor que escalar una hoja ya pixelada.

Casos de uso

• Convertir metraje de referencia rotoscopiado en animación provisional para un prototipo.
• Extraer un ciclo en loop de un clip generado con IA de tu personaje sobre pantalla verde.
• Convertir un render de Blender o Spine en sprite sheet sin montar un pipeline de render.
• Llevar a un juego como sprite sheet efectos (humo, magia, agua) renderizados como video.

Preguntas frecuentes