Cortador de hojas de sprites

Elige el método de corte adecuado para la hoja

Una hoja de sprites puede ser una matriz precisa de fotogramas de animación, un tileset con separaciones regulares o una colección de iconos empaquetada sin una estructura uniforme. Cada diseño necesita una forma de detección distinta. El cortador reúne todas en un mismo proceso, pero deja la decisión final en tus manos.

Estos controles siguen flujos de trabajo consolidados. El Sprite Editor de Unity ofrece corte automático, cuadrículas por tamaño o número de celdas y opciones de desplazamiento, padding, rectángulos vacíos y pivote. El importador de hojas de sprites de Aseprite también utiliza desplazamiento x/y, anchura y altura del sprite, padding y orden de lectura. Esta herramienta se centra en extraer: exporta coordenadas de recorte, pero no crea archivos de proyecto de Unity, Godot ni Aseprite.

La detección automática es un punto de partida, no una garantía

La detección automática busca regiones visibles que no estén conectadas. Es rápida cuando hay espacio transparente entre los sprites, pero ningún detector puede adivinar los límites que pretendía el artista en todas las hojas. Dos personajes que se tocan pueden parecer un solo componente; una sombra o chispa separada puede parecer otro. La guía de extracción de Phaser explica la misma limitación de los píxeles conectados: los sprites que se tocan se detectan juntos.

Revisa siempre los marcos numerados antes de exportar. La detección automática no ofrece controles de tolerancia, tamaño mínimo ni distancia de unión, así que corrige el resultado a mano. Si un fondo uniforme se confunde con la ilustración, ajusta la detección de píxeles vacíos al color de fondo de la esquina o desactívala y corta con la cuadrícula. Si el resultado está demasiado fragmentado, elimina los marcos sueltos y dibuja un solo marco alrededor de todo el sprite. Si dos fotogramas se tocan, sustituye la sugerencia combinada por marcos manuales. La hoja original nunca se modifica.

Qué contienen el ZIP y frames.json

PNG es el formato predeterminado porque conserva los píxeles exactos y la transparencia. Cada fotograma seleccionado recibe un nombre de archivo seguro y único a partir de su nombre o del prefijo elegido. El ZIP reúne esos PNG con el manifiesto frames.json. Cada entrada registra el nombre, el orden y el rectángulo de origen:

{
  "name": "player-run-03",
  "x": 128,
  "y": 64,
  "width": 32,
  "height": 48
}

Las coordenadas usan los píxeles de la imagen original y se miden desde su esquina superior izquierda. Son útiles para scripts y procesos personalizados, pero el archivo es deliberadamente genérico: no es un atlas ni un archivo de importación nativo de ningún motor.

Procesamiento local privado con recuperación limitada

La decodificación, detección, edición, recorte y creación del ZIP ocurren en el navegador. Los bytes de la imagen y los nombres de archivo no se envían al servidor. Para poder recuperar el proceso de varios pasos, la pestaña activa puede conservar una copia de trabajo local limitada y sus ajustes durante un máximo de dos horas. Empezar de nuevo elimina de inmediato el proyecto de la pestaña activa. Una pestaña abierta por separado tiene su propia copia aislada, que se borra automáticamente antes de dos horas aunque se restablezca otra pestaña.

Si la hoja es grande, cierra otras pestañas que consuman mucha memoria gráfica y evita crear cientos de fotogramas vacíos. El cortador avisa cuando se alcanza el límite de tamaño o de fotogramas; nunca reduce la calidad sin indicarlo. Las descargas usan URL de objeto temporales, que se liberan después de usarlas según la documentación de MDN.

Lista de comprobación antes de exportar

• Confirma que el orden de lectura coincide con la secuencia de la animación o de las teselas.
• Amplía la imagen y comprueba el primer fotograma, uno intermedio y el último por si hay desviaciones de un píxel.
• Excluye las celdas vacías y los píxeles sueltos accidentales, salvo que su posición sea relevante.
• Usa nombres distintos y busca duplicados antes de crear el ZIP.
• Comprueba los bordes transparentes sobre un fondo de vista previa que contraste.
• Corrige los marcos mediante campos o botones si arrastrar con precisión resulta difícil; el flujo sigue siendo manejable con teclado de acuerdo con las recomendaciones del W3C.