Convertidor de imagen y video a hoja de sprites — fotogramas PNG a un atlas de juego

Un convertidor de imagen a hoja de sprites toma una secuencia de fotogramas PNG —o un video corto— y los empaqueta en un solo atlas que puedes entregar a un motor de juego. En Neta Studio la conversión se ejecuta por completo en tu navegador: sin cola de subida, sin ida y vuelta al servidor, sin archivos que salgan de tu equipo. Sueltas una carpeta de PNG numerados o un solo MP4, defines columnas, filas, tamaño de celda y eliminación de fondo, y exportas una hoja con un manifiesto JSON correspondiente.

Lo que realmente falla no es el empaquetado. Falla el orden (frame_10 ordenándose antes de frame_2), el padding (los filtros muestrean la celda vecina y producen un borde) y el tamaño de celda (una hoja cuyas dimensiones no son divisibles por la cuadrícula, de modo que la última columna queda recortada). Esta página cubre cada uno de esos puntos de forma concreta, además de cómo extraer fotogramas de un video y cómo comprobar el resultado animándose dentro de un mundo 3D real.

Suelta imágenes o un video

La primera pantalla tiene una zona para soltar archivos y dos ramas. Suelta una carpeta o una selección múltiple de fotogramas PNG, WebP o JPG y la herramienta trata la entrada como una secuencia ordenada de imágenes. Suelta un solo archivo de video —MP4, WebM o MOV que el navegador pueda decodificar— y la herramienta cambia a la rama de extracción, donde eliges una tasa de muestreo y extrae fotogramas con la ruta de WebCodecs o con un elemento de video oculto como respaldo.

Ambas ramas llegan al mismo editor: una cuadrícula de celdas a la derecha, una columna de ajustes a la izquierda y una vista previa en vivo que recorre la hoja en el lugar. No se escribe nada en disco hasta que presionas exportar. La decodificación ocurre en el hilo principal para las imágenes fijas y en un worker para el video, así que un clip en 4K mantendrá la interfaz fluida, pero una secuencia de 300 fotogramas PNG bloqueará brevemente el dibujado mientras se decodifica.

Si se rechaza lo que sueltas, la razón casi siempre es una de tres: el códec del video no se puede decodificar en tu navegador (frecuente con HEVC en MOV), las imágenes tienen dimensiones que no coinciden, o la cantidad de fotogramas supera el presupuesto de celdas para la cuadrícula que definiste. La herramienta nombra el archivo que falla en lugar de descartarlo en silencio.

Cómo crear una hoja de sprites a partir de fotogramas PNG

El orden es la primera decisión y la herramienta puede equivocarse si los nombres de tus archivos son inconsistentes. El comparador predeterminado divide cada nombre de archivo en segmentos de texto y numéricos y los compara, así que walk_0001.png … walk_0048.png queda en el orden correcto y walk_1.png … walk_48.png también. Si tus fotogramas tienen nombres basados en una marca de tiempo o en un UUID, el orden es arbitrario: renómbralos primero o arrastra para reordenar la tira de miniaturas antes de empaquetar.

Verifica la cantidad de fotogramas contra lo que esperas de la animación. Un bucle de reposo de 12 fotogramas y un ciclo de caminata de 24 fotogramas se ven idénticos en una cuadrícula de miniaturas a tamaños pequeños. Abre la vista previa, recorre hasta la última celda y confirma que es el fotograma que debe preceder al primero cuando el ciclo se repite: ese es el fotograma donde un bucle suele verse roto.

Todos los fotogramas deben compartir el mismo ancho y alto. El empaquetador toma las dimensiones de la primera imagen y rechaza cualquier archivo posterior que difiera. Si tu exportador agregó un borde de 1 px al recortar, o volcó un sprite con un ancla distinta, esos fotogramas son los atípicos y deben corregirse en el origen en lugar de rellenarse aquí.

Convertir un video en una hoja de sprites

La extracción de fotogramas de un video tiene un número que determina si el resultado es utilizable: la tasa de extracción. El video suele estar a 24, 30 o 60 fps; la animación de sprites rara vez necesita eso. Un clip a 30 fps muestreado a 30 fps durante tres segundos produce 90 celdas y un atlas innecesariamente grande. Muestrear el mismo clip a 12 fps produce 36 celdas y, para la mayoría de los movimientos de personaje, una reproducción indistinguible.

Elige la tasa de extracción según la velocidad de reproducción prevista de la animación, no según la fuente. Si el sprite se reproducirá a 12 fps en el juego, extrae a 12 fps. Si planeas retimarlo, extrae a 24 y descarta una celda de cada dos en el motor: conservas la opción, a costa de una hoja más grande.

El tamaño de celda proviene de las dimensiones del video después del escalado que apliques. Un clip de 1920×1080 escalado a 480×270 da celdas de 480×270. Conserva la relación de aspecto de la fuente; un escalado no uniforme distorsiona cada fotograma y ningún ajuste de padding lo corregirá. Cuando el video tiene barras negras, recórtalas antes de la extracción en lugar de eliminarlas después, porque un sujeto en movimiento puede tocar el color de la barra.

PNG a sprite: transparencia y padding

Conserva el canal alfa. La mayoría de los problemas de empaquetado que la gente reporta se remontan a un convertidor que aplanó RGBA a RGB al exportar, lo que vuelve negro o blanco cada píxel transparente según el relleno del lienzo. En esta herramienta el lienzo de exportación se crea sin fondo opaco, así que un PNG con fondo eliminado, o ya preparado para ello, conserva su alfa durante el empaquetado.

El padding existe porque el filtrado de texturas muestrea fuera de la celda. En el borde de un sprite, un filtro bilineal o trilineal lee los píxeles de la celda vecina y los mezcla, produciendo un borde de 1 px que cambia de color según el sprite que quede al lado. Un margen transparente de 2 px alrededor de cada celda impide que el filtro llegue afuera. Los valores de padding se escriben en el manifiesto, así el motor puede desplazar las UV por el padding cuando lee el atlas.

La mayoría de los motores ya no exige dimensiones de hoja que sean potencias de dos, pero siguen ayudando en hardware y en pipelines antiguos que las asumen. Define columnas y filas de modo que (celda + 2 × padding) × columnas y (celda + 2 × padding) × filas den 256, 512, 1024, 2048 o 4096. Si tu cuadrícula no divide de forma exacta, la última fila o columna queda recortada o rellena con espacio vacío: la herramienta muestra las dimensiones finales de la hoja en vivo para que lo veas antes de exportar.

Detección automática del tamaño de celda

La herramienta lee el tamaño de celda desde la fuente. Para una secuencia de imágenes toma las dimensiones del primer fotograma que se decodifica; para un video toma las dimensiones de salida después del escalado. Ese valor se precarga en el campo Tamaño de celda y se usa para calcular la cuadrícula predeterminada, así que una carpeta de fotogramas de 64×64 se abre con celdas de 64×64.

Anúlalo cuando el margen transparente alrededor de tu sujeto sea mayor que el sujeto. Un sprite exportado con un padding generoso producirá celdas mayormente vacías, y el atlas será más grande de lo necesario. El ajuste de recorte encuentra el cuadro delimitador de los píxeles no transparentes en todos los fotogramas y recorta a la unión: no por fotograma, porque el recorte por fotograma hace que el sprite tiemble mientras se anima.

Anúlalo en el otro sentido cuando los fotogramas sean inconsistentes. Si la secuencia mezcla 64×64 y 66×66 porque una pasada de exportación agregó un contorno, la detección de tamaño de celda se fija en el primer archivo y el resto se escala o se rechaza. Corrige la fuente. No hay tamaño de celda que vuelva correctos unos fotogramas que no coinciden.

Velo animarse en 3D

Una hoja de sprites solo es correcta si se reproduce. The Cyclops' Island es un mundo jugable en Neta Studio que usa personajes con estilo de sprite, y es la forma más rápida de comprobar un atlas en movimiento: pasea un personaje, observa el punto de enlace del bucle y mira si los bordes del padding aparecen cuando la cámara se aleja y el filtrado entra en acción.

Si prefieres armar tú mismo la prueba, el constructor de juegos 3D te permite soltar el PNG exportado y su manifiesto en una escena y controlar el desplazamiento de UV con un temporizador. Define el tiempo por fotograma según la tasa de extracción que elegiste y la animación se reproducirá a la velocidad que pretendías. Si se ve mal aquí, se verá mal en tu motor, y la causa casi siempre es el valor de celda o de padding del manifiesto.

Mini World es el sandbox más pequeño si solo quieres un plano con la hoja encima y una cámara que puedas orbitar, lo que suele bastar para detectar una eliminación de fondo mal hecha en el borde de un sprite.

Más herramientas gratuitas

El convertidor convive con tres herramientas que comparten el mismo editor y el mismo formato de exportación. Una hoja creada en una se abre en otra sin conversión.

GIF a hoja de sprites toma un GIF animado y extrae sus fotogramas. Los retrasos de fotograma de GIF son por fotograma, así que la herramienta los lee e informa la velocidad de reproducción efectiva de la hoja en lugar de suponer una constante. Hoja de sprites a GIF va en la otra dirección: elige un rango de tiempo sobre las celdas y exporta un GIF animado con un retraso de fotograma determinado, útil para compartir un bucle sin enviar un PNG. El animador de sprites toma una hoja y un manifiesto y los reproduce en un canvas con controles de velocidad, dirección y bucle, para que puedas comprobar el tiempo de los fotogramas antes de comprometerte con un motor.

Cada herramienta exporta la misma estructura de manifiesto. Ancho de celda, alto de celda, columnas, filas, padding y la lista ordenada de fotogramas, de modo que una hoja que empieza en el extractor de video y termina en el animador conserva los mismos números de principio a fin.

Entra al mundo al que pertenece

Un sprite es un personaje sin 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. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.