Cómo extraer un conjunto de piezas de una imagen

Conjunto de piezas frente a hoja de sprites: mayor exigencia

Una hoja de sprites contiene imágenes independientes. Si un fotograma de un ciclo de caminata está descentrado un píxel respecto al siguiente, nadie lo nota: cada fotograma se dibuja por separado y las pequeñas variaciones de posición se interpretan como movimiento natural. Un conjunto de piezas es distinto. Cada pieza se coloca borde con borde junto a sus vecinas en una cuadrícula, una y otra vez, a lo largo de todo un nivel. Un desajuste de un píxel en una pieza no se limita a ella; se repite en todas las uniones donde aparece y, en una textura de suelo o pared repetida, puede producir decenas de uniones visibles por un solo corte incorrecto.

Esa es toda la exigencia de diseño de un conjunto de celdas: las juntas deben ser invisibles, por lo que los bordes deben coincidir exactamente a nivel de píxel y la imagen debe tener una cuadrícula real e identificable antes de cortarla.

Elegir un tamaño de pieza

Si extraes piezas de un recurso existente de otra persona, el tamaño suele estar fijado por la ilustración: cuenta cuántas veces aparece un motivo repetido —un ladrillo, una mata de hierba o una tabla— a lo ancho y divide. Si defines el conjunto tú, a partir de una referencia o una hoja de texturas generada, los tamaños habituales son 16×16, 32×32 y 48×48 píxeles.

• 16×16 evoca pixel art retro clásico. Exige sintetizar material —hierba, piedra, agua— con pocos píxeles, una habilidad artística propia.
• 32×32 es el predeterminado moderno más habitual. Permite textura y sombreado legibles sin precisión subpíxel a zoom normal.
• 48×48 y superiores sirven para juegos con celdas mayores en pantalla o arte más pictórico, donde interesa el detalle de textura en vez de un estilo plano de pixel art.

Mantén el tamaño uniforme en todo el conjunto y, idealmente, en el proyecto. Mezclar tamaños obliga a escalar en ejecución —reintroduciendo desenfoque— o mantener varias cuadrículas en el editor.

Encontrar el desplazamiento cuando la cuadrícula no empieza en cero

Este paso confunde. Sabes que la celda mide 32px y cortas en 0, 32, 64, 96…, pero salen partidas, con suelo donde debía haber pared. La cuadrícula real no empieza arriba a la izquierda: tiene un desplazamiento por bordes, margen de captura o relleno de exportación.

Para encontrar el desplazamiento, amplía a nivel de píxel y busca una característica repetida: junta de ladrillo, sombra al pie de hierba o brillo superior. Mide dónde aparece primero y comprueba si se repite cada N píxeles donde N es el tamaño de celda. Si la primera junta está en x = 6 y la siguiente en x = 38, el desplazamiento es 6 y se confirma tamaño 32. Configura cada eje aparte: los desplazamientos horizontal y vertical son independientes.

Piezas sin separación y el problema de filtración

Las hojas de sprites suelen tener huecos transparentes. Los conjuntos de celdas no: se tocan sin separación para encajar sin juntas. En el motor eso puede causar contaminación de textura: una franja de la celda vecina aparece en el borde de la colocada.

La filtración ocurre por la forma en que las GPU toman muestras de las texturas. Cuando una pieza se dibuja a un tamaño que no corresponde exactamente a 1:1 píxeles —ligeramente escalada o con la cámara en una posición subpíxel—, el renderizador mezcla el píxel de borde de la pieza con lo que está directamente al lado en la textura original, que es la pieza vecina. La solución no es añadir separación en la imagen original, lo que rompería el encaje; es utilizar filtrado puntual/vecino más cercano para evitar la interpolación o hacer que el motor extruya automáticamente un borde de un píxel al empaquetar o importar. Sprite Atlas de Unity y el importador TileSet de Godot tienen una opción de margen o extrusión precisamente para esto: actívala para cualquier conjunto de piezas que vaya a escalarse o moverse en posiciones no enteras.

Eliminar piezas duplicadas

Tras dividir toda la cuadrícula, suelen quedar celdas idénticas o casi idénticas: una de hierba puede aparecer cuatro veces porque la ilustración la repitió por equilibrio visual. No es incorrecto conservar duplicados, pero agranda el recurso, dificulta examinar la paleta del editor y obliga a modificar «la celda de hierba» en varios lugares.

Una forma sencilla de detectar duplicados sin revisar decenas de cuadrados pequeños: calcula un hash de los datos de píxeles originales de cada pieza y compara los hashes. Las piezas con el mismo hash son idénticas píxel a píxel y pueden agruparse con seguridad en una sola. Las casi duplicadas —por ejemplo, una pieza que difiere en un píxel recoloreado, como una antorcha encendida frente a una apagada— tendrán hashes distintos y requieren que una persona decida si son piezas significativamente diferentes o variantes que conviene conservar separadas a propósito.

Importarlo en un motor

Unity: Tile Palette

Importa el conjunto de piezas dividido como Sprite con Sprite Mode en Multiple, divídelo en Sprite Editor mediante Grid By Cell Size con tu tamaño de pieza y después abre Window → 2D → Tile Palette, crea una nueva paleta y arrastra los sprites divididos a ella. Desde ahí, las piezas se pintan directamente sobre un componente Tilemap en la escena. Si ya dividiste los PNG de las piezas individuales fuera de Unity, puedes omitir por completo el paso del Sprite Editor y arrastrar la carpeta de PNG directamente a una paleta.

Godot: recurso TileSet

Crea un recurso TileSet en un nodo TileMapLayer y añade, en su fuente Atlas, la imagen del conjunto de piezas dividido con el tamaño de pieza correspondiente. El importador de Godot también ofrece los ajustes Separation y Margin en la fuente del atlas, que cubren hojas con una pequeña separación entre piezas en lugar de la distribución sin separación descrita antes. Si el original no tenía separaciones y ves filtración de colores en la vista del editor, activa la opción de margen de textura del atlas, que duplica internamente los píxeles de borde para que el muestreo nunca alcance una pieza vecina.

Un orden práctico de operaciones

1. Identifica el tamaño de pieza contando un elemento repetido a lo largo de la imagen.
2. Encuentra los desplazamientos x e y localizando dónde empieza realmente la primera pieza.
3. Divide sobre esa cuadrícula: una herramienta con líneas arrastrables hace el paso visual y comprobable, no un cálculo a ciegas.
4. Compara las piezas mediante hashes y agrupa los duplicados exactos.
5. Importa en tu motor con márgenes o extrusión activados si las piezas van a renderizarse a una escala o posición no entera.

Preguntas frecuentes