Cómo dividir una hoja de sprites irregular generada con IA

Por qué las hojas de sprites con IA nunca tienen una cuadrícula perfecta

Una hoja de sprites tradicional se construye con una herramienta. Un artista dibuja fotogramas con un tamaño fijo de celda y un exportador los empaqueta con desplazamientos exactos en píxeles. Todas las celdas son iguales, cada sprite ocupa un cuadro conocido y dividir la hoja es una cuestión de cálculo.

Los generadores de imágenes no funcionan así. Los modelos de difusión como DALL·E, Midjourney y Stable Diffusion generan una imagen continua. Cuando pides «una hoja de sprites de un caballero caminando, cuadrícula 4x4», el modelo produce algo que parece una hoja de sprites porque ha visto miles. Imita el estilo visual de una cuadrícula, no calcula sus límites. Nada en la generación obliga a que la tercera fila empiece exactamente 384 píxeles más abajo.

Las consecuencias prácticas son constantes:

• Separación variable. Las separaciones entre sprites varían de unos pocos píxeles a varias decenas. La variación suele acumularse de izquierda a derecha y de arriba abajo, por lo que los fotogramas inferiores derechos son los más afectados.
• Tamaños de sprites inconsistentes. Un personaje a mitad de una zancada es más ancho que uno inmóvil. El modelo dibuja cada pose con el tamaño que considera adecuado, sin ajustarla a un cuadro uniforme.
• Contenido descentrado. Incluso cuando las celdas son más o menos uniformes, el sprite en su interior rara vez está centrado, así que un corte correcto de cuadrícula sigue produciendo fotogramas que tiemblan al reproducirse.
• Fotogramas ausentes o combinados. A veces obtienes quince sprites en 4x4 o dos poses superpuestas que parecen una sola mancha.
• Dimensiones de lienzo inusuales. Una salida de 1024x1024 dividida entre tres columnas da 341.33 píxeles. Hay que redondear, y los errores de redondeo se acumulan.

Por qué falla la división con cuadrícula fija

Dividir con cuadrícula fija parte de una suposición: la imagen es una retícula de celdas iguales. Divide el ancho entre las columnas, la altura entre las filas y corta. Cuando la suposición se cumple, es perfecto y rápido. Cuando no, el error no es ruido aleatorio que puedas ignorar. Cada corte cae en el lugar equivocado y los errores se ven precisamente en lo que más importa para la animación.

Un fotograma recortado cuatro píxeles por arriba no es solo un problema estético. En un motor de juegos los fotogramas se dibujan en el mismo punto de anclaje, por lo que un sprite cuyo contenido está cuatro píxeles más abajo en el segundo fotograma que en el primero dará un salto visible durante la reproducción. Los jugadores lo perciben como un fallo, aunque no sepan nombrarlo. Corregirlo después a mano, fotograma a fotograma, lleva más tiempo que dividirlo correctamente desde el principio.

La solución: cortar por contenido, no por coordenadas

Si la cuadrícula no indica dónde están los sprites, los píxeles sí pueden hacerlo. En una hoja con fondo transparente, cada píxel forma parte de un sprite (alfa mayor que cero) o del fondo (alfa cero). Esa única distinción basta para encontrar los sprites sin conocer previamente la distribución.

Cómo funciona la detección basada en contenido

1. Confirma que el fondo sea transparente. Muestrea los píxeles de las esquinas. Si son totalmente transparentes, la hoja puede detectarse automáticamente. Si son blancos o de un color uniforme, primero hay que eliminar el fondo.
2. Encuentra filas y columnas vacías. Recorre la imagen y registra las filas de píxeles sin ningún píxel opaco, y lo mismo para las columnas. Esas franjas vacías son las separaciones entre sprites, estén donde estén.
3. Corta por el centro de cada separación. Una separación es un intervalo, no una línea. Cortar por su centro da a cada sprite vecino el mayor espacio posible y tolera uno o dos píxeles aislados con suavizado.
4. Recorta cada pieza a su propio cuadro delimitador. Una vez aislada una pieza, redúcela al rectángulo más ajustado que contenga los píxeles opacos. Así eliminas el relleno irregular que hacía que las celdas parecieran desiguales.
5. Comprueba el resultado y repite. Una primera pasada suele dejar problemas: una pieza todavía contiene dos sprites porque se tocan, o una pieza tiene mucho más espacio vacío que sus vecinas. Volver a analizar la salida y subdividirla o recortar de nuevo los márgenes resuelve la mayoría de esos casos.

Esto es lo que hace el Corte mágico pestaña de nuestro Divisor de hojas de sprites hace. Detecta transparencia, encuentra límites por alfa y realiza hasta tres pasadas de refinamiento para quitar relleno o separar varios sprites. Sensibilidad baja, media o alta controla la agresividad: súbela si casi se tocan; bájala si divide partes separadas de un mismo sprite, como escudo o efecto.

Límites detectados en la hoja

Dieciséis archivos, cada uno recortado

Si tu hoja tiene un fondo uniforme

La detección de contenido necesita transparencia. Si tu hoja tiene un fondo blanco, negro o magenta uniforme, pásala primero por un eliminador de fondos; el nuestro está en /remove-bg y funciona muestreando las esquinas y eliminando los píxeles suficientemente cercanos a ese color, para exportar un PNG transparente. Hazlo antes dividir, no después: eliminar fondo en una hoja es una operación; en dieciséis fotogramas, dieciséis oportunidades de incoherencia.

Líneas manuales de cuadrícula: la alternativa que siempre funciona

La detección automática falla en algunas hojas y conviene saber cuándo. Los sprites superpuestos o que se tocan no se pueden separar buscando franjas vacías, porque no existe ninguna. Las hojas con una sombra o un resplandor que abarca todo el lienzo no tienen filas completamente transparentes. Las hojas donde un personaje está formado por partes separadas se dividen en exceso.

En todos esos casos, arrastra tú las líneas. El Manual y preajustes pestaña parte de cuadrículas de 2x2 a 6x6, o propias hasta 20x20, y permite arrastrar cada línea donde corresponde. El flujo es:

1. Elige el preajuste más cercano a la distribución prevista: 4x4 para dieciséis fotogramas, aunque la separación real varíe.
2. Arrastra cada línea vertical a la separación de su izquierda o derecha. Trabaja de izquierda a derecha para ajustar siempre respecto a una línea que ya hayas corregido.
3. Haz lo mismo con las líneas horizontales, de arriba abajo.
4. Amplía el fotograma más ajustado, normalmente la pose más ancha, y confirma que ninguna línea lo cruce.
5. Exporta. PNG conserva la transparencia y es lo adecuado para sprites; también hay JPG y WebP, pero JPG descarta por completo el canal alfa.

El ajuste manual parece lento, pero no lo es: una hoja de dieciséis fotogramas solo tiene seis líneas interiores, así que haces seis arrastres, no dieciséis recortes. Es mucho más rápido que abrir la hoja en un editor y seleccionar cada fotograma.

Preparar los fotogramas para un motor de juegos

Cuando tengas los PNG individuales, puedes importarlos al motor como fotogramas independientes o empaquetarlos de nuevo en una hoja uniforme. La elección depende del motor y del proyecto.

Unity

Para fotogramas sueltos, arrastra los PNG al proyecto y configura Texture Type en Sprite (2D and UI), Sprite Mode en Single. Configura Filter Mode en Point (no filter) y Compression en None para pixel art: el bilineal emborrona un sprite de 32x32. Configura Pixels Per Unit según la cuadrícula y arrastra todos los fotogramas a un GameObject para crear automáticamente un Animation Clip.

Para una hoja vuelta a empaquetar, utiliza Sprite Mode Multiple y el Sprite Editor. Grid By Cell Size solo funciona si la hoja reempaquetada es uniforme: justo lo que proporciona el reempaquetado y lo que faltaba en la hoja de IA original.

Godot

En Godot 4, añade un AnimatedSprite2D, crea un nuevo SpriteFrames recurso, y usa Add Frames from Sprite Sheet para una hoja uniforme o Add Frames from File(s) para cargar PNG individuales. Es más sencillo porque el importador de hojas exige celdas iguales. Para pixel art, usa Nearest por nodo en CanvasItem → Texture → Filter o globalmente con el rendering/textures/canvas_textures/default_texture_filter ajuste del proyecto.

Anclaje y alineación

Se omite este paso y luego se pierde la tarde depurando. Si recortas cada fotograma a sus límites, tendrán tamaños distintos y el motor centrará todos en el mismo origen. Un brazo extendido en el segundo desplazará el centro visual y hará parecer que el personaje retrocede.

Rellena todos los fotogramas hasta un tamaño común con posiciones coherentes, normalmente centradas horizontalmente y alineadas abajo para fijar los pies. Parte del mayor, redondea a una cifra cómoda y añade transparencia a los demás. No es circular: recortar elimina el relleno arbitrario del generador y volver a rellenar añade uno controlado.

Solución de problemas

La detección encontró demasiadas piezas

La sensibilidad es demasiado alta o los sprites tienen elementos separados. Bájala para no tratar pequeños huecos internos como separaciones. Si no funciona, usa líneas manuales: un personaje con un objeto separado siempre parecerá dos sprites al analizar el alfa.

La detección encontró muy pocas piezas

Los sprites se tocan o un brillo tenue une el hueco. Primero aumenta la sensibilidad. Si realmente se superponen, ningún método automático los separa; regenera pidiendo espacio claro entre fotogramas o corta a mano.

1. Sensibilidad demasiado baja: se detectan pocos límites

2. Ocho archivos cuando se esperaban veinte

3. Motivo: no hay una columna vacía entre ellos

4. Sensibilidad aumentada: cuatro archivos

Los fotogramas tienen un contorno tenue del fondo anterior

La eliminación del fondo dejó píxeles semitransparentes en los bordes teñidos con el antiguo color de fondo. Consulta nuestra guía sobre PNG transparentes y bordes blancos para las soluciones.

La animación tiembla en el motor

Casi siempre es un problema de anclaje, no de división. Confirma que todos los fotogramas tengan las mismas dimensiones y la misma convención de alineación, y comprueba el pivote del sprite en el motor.

Nada funciona, la hoja es un desastre

Regenerar es barato. Pide explícitamente fondo transparente, separación uniforme, tamaño constante y menos fotogramas por hoja: un 3x3 suele ser mucho más utilizable que un 6x6. Genera poses individuales si la animación importa más que la comodidad.

Preguntas frecuentes