Extractor de Sprites

Drop files here or click (max 12 MB)

Suelta una imagen arriba para comenzar a extraer sprites.

Acerca de Extractor de Sprites en Línea

¿Necesitas convertir una hoja de sprites o imagen estática en sprites individuales? Este Extractor de Sprites detecta automáticamente las regiones de los sprites, los recorta limpiamente (con opciones de recorte y relleno) y exporta PNGs transparentes listos para usar. 🚀 Ideal para proyectos de Scratch, prototipos de juegos 2D, actividades en el aula y juegos independientes. Funciona muy bien con arte de píxeles, elementos de interfaz, iconos y personajes.

¿Por Qué Usar Este Extractor de Sprites?

  • Detección automática de sprites basada en transparencia y umbrales configurables
  • Recorte limpio con opción de eliminar bordes transparentes alrededor de cada sprite
  • Controla el relleno, alineación (centro/inferior) y tamaño de salida uniforme opcional
  • Conserva la transparencia (canal alfa) para exportaciones PNG – ideal para tilemaps y personajes
  • Galería visual de todos los sprites detectados para una inspección rápida antes de descargar
  • Exportación ZIP en el lado del cliente usando JSZip, manteniendo tus nombres de archivo y orden de sprites estables
  • Amigable con Scratch: convierte rápidamente una sola hoja de sprites en múltiples disfraces o recursos
  • Perfecto para reutilizar recursos en diferentes motores (Scratch, Godot, Unity 2D, Phaser, etc.)

🛠️ Cómo Extraer Sprites de una Hoja de Sprites for sprite-extractor

1

1. Suelta tu imagen

Arrastra y suelta una hoja de sprites o imagen en la zona de soltado, o haz clic para elegir un archivo. Para mejores resultados, usa PNG con fondo transparente o alto contraste entre sprites y fondo.

2

2. Ejecuta la detección automática

La herramienta envía una representación ligera de tu imagen a un endpoint de detección, que calcula los cuadros delimitadores para cada sprite basándose en transparencia y tamaño mínimo. Los cuadros se superponen en tu imagen para que puedas ver rápidamente lo que se exportará.

3

3. Ajusta las opciones de extracción

Ajusta el relleno, fondo transparente vs. color sólido, eliminación de bordes transparentes, alineación (centro o inferior) y ancho/alto de salida uniforme opcional. La herramienta reconstruye cada lienzo de sprite en consecuencia.

4

4. Previsualiza los sprites

Desplázate por la galería de sprites generados. Cada vista previa se construye en el cliente usando un lienzo fuera de pantalla y puede renombrarse o descartarse según las opciones de la interfaz.

5

5. Descarga PNGs o un ZIP

Exporta sprites PNG individuales o descarga un único archivo ZIP que contiene todas las vistas previas actuales. El ZIP se construye en el lado del cliente usando JSZip, y los nombres de archivo siguen un patrón secuencial como <code>sprite_0000.png</code>, <code>sprite_0001.png</code>, etc.

Especificaciones Técnicas

Detección y Cuadros Delimitadores

La fase de detección se ejecuta en un endpoint backend dedicado y devuelve cuadros delimitadores limpios que el cliente usa para construir los sprites finales.

AspectoComportamientoNotas
Endpoint de detecciónPOST /api/sprite-extractor/inspectAcepta una URL de datos y opciones de detección, devuelve un array de cajas de sprites.
Entradas de deteccióntolerancia, umbralAlfa, anchoMín, altoMínAjusta estos parámetros en la interfaz para ignorar ruido pequeño o capturar solo sprites significativos.
Forma de la cajaRectángulos alineados al ejeCada <code>SpriteBox</code> contiene <code>x</code>, <code>y</code>, <code>ancho</code>, <code>alto</code> en coordenadas de la imagen fuente.
Manejo de transparenciaConsciente del alfaLos píxeles transparentes influyen en las decisiones de recorte/ajuste pero pueden preservarse en la salida.
Manejo de erroresRespaldo eleganteSi la detección falla, la herramienta muestra un error legible y no interrumpe la interfaz.

Recorte, Ajuste y Alineación

Una vez conocidas las cajas, todo el renderizado de sprites se realiza en el navegador usando canvas HTML.

PasoImplementaciónDetalles
Recorte inicialdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)Cada sprite se recorta primero de la imagen original a un canvas temporal.
Ajuste transparenteescanea el canal alfa mediante getImageDataLa herramienta escanea píxeles para calcular la caja delimitadora mínima no transparente cuando el ajuste está activado.
Rellenoconfigurable 0–256 pxSe aplica relleno alrededor del sprite ajustado o recortado para reducir artefactos de borde en motores.
Alineacióncentro / inferiorLos sprites pueden centrarse o alinearse al fondo (útil para personajes sobre una línea base).
Tamaño de salida uniformeopcional anchoSprite / altoSpriteCuando está activado, todos los sprites se renderizan en un canvas de tamaño fijo para estandarizar animaciones.
Fondotransparente o color sólidoMantener transparencia completa o llenar el canvas con un color RGBA de fondo elegido.

Rendimiento y Límites

Diseñado para uso interactivo en el navegador.

ParámetroComportamiento TípicoNotas
Tamaño máximo de entradaImagen de ~10 MBLos archivos más grandes pueden funcionar, pero cargarán/detectarán más lentamente.
Cantidad de spriteshasta ~400 spritesEs posible tener cantidades muy altas, pero la representación de vista previa y la creación de ZIP tomarán más tiempo.
Formato de exportaciónPNG dentro de un ZIP (Blob)El ZIP se genera completamente en el lado del cliente usando JSZip.
Operaciones de lienzoRecorte y dibujo por spriteDepende de la API de lienzo 2D del navegador; el rendimiento escala con la resolución y la cantidad.

Alternativas de Línea de Comandos

Para hojas de sprites masivas o flujos de trabajo automatizados, puedes combinar herramientas CLI como ImageMagick con scripts.

Linux / 🍎 macOS

Recorte de cuadrícula uniforme con ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

Corta una cuadrícula regular de 64×64 en archivos PNG individuales.

Comprimir todos los sprites

zip sprites.zip sprite_*.png

Empaqueta todos los sprites generados en un solo archivo.

Windows (PowerShell + ImageMagick)

Recorte basado en cuadrícula

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

Igual que el anterior, usando la CLI <code>magick</code> en Windows.

Casos de Uso Prácticos

Desarrollo de Juegos 2D

  • Extrae fotogramas de animación de personajes de una hoja de sprites para Godot, Unity 2D, Phaser o Construct.
  • Aísla elementos de la interfaz de usuario (botones, iconos, barras de salud) de un diseño de maqueta.
  • Divide tilesets en mosaicos individuales para editores de niveles.
// Ejemplo en Godot: cargar múltiples fotogramas\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

Scratch y Proyectos Educativos

  • Convierte una sola hoja de sprites en múltiples disfraces para un personaje de Scratch.
  • Prepara paquetes de recursos temáticos (animales, planetas, iconos) para talleres de programación.
  • Permite a los estudiantes diseñar hojas de sprites en una herramienta de dibujo y luego extraerlos para Scratch.
// Pseudocódigo al estilo Scratch para animación simple\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

Arte Pixelado y Bibliotecas de Recursos

  • Divide hojas de arte pixelado antiguas en una biblioteca buscable de sprites individuales.
  • Extrae solo los recursos que necesitas de paquetes comerciales o de código abierto grandes.
  • Normaliza el relleno y la alineación entre sprites de diferentes fuentes.

❓ Frequently Asked Questions

❓¿La detección de sprites es completamente automática?

La herramienta realiza una detección automática basada en transparencia y umbrales configurables (tolerancia, umbral alfa, ancho/alto mínimo). En muchos casos "simplemente funciona", pero para hojas complejas puede que necesites ajustar opciones o ejecutar un segundo paso.

📏¿El extractor modifica mi imagen original?

No. Tu imagen original permanece intacta. La herramienta solo la lee en un lienzo en memoria, recorta regiones en nuevos lienzos y luego exporta sprites PNG nuevos.

🎯¿Puedo controlar el relleno y la alineación?

Sí. Puedes configurar el relleno (en píxeles), elegir entre un fondo transparente o sólido, habilitar el recorte de bordes transparentes y alinear los sprites centrados o alineados al fondo dentro del lienzo de salida.

🔒¿Se almacenan mis imágenes en el servidor?

El paso de detección envía tu imagen (como una URL de datos) a un endpoint dedicado para calcular las cajas de sprites, pero los sprites mismos se construyen y comprimen en tu navegador. El servicio está diseñado para procesamiento transitorio, no para almacenamiento a largo plazo. Como siempre, evita usar herramientas de terceros para recursos que deban permanecer estrictamente privados.

🧊¿Se conservará la transparencia en los sprites exportados?

Sí. Por defecto, el lienzo de salida se deja transparente y tus sprites conservan su canal alfa. Opcionalmente puedes elegir un color de fondo sólido si tu motor de destino prefiere recursos opacos.

Pro Tips

Best Practice

Usa una pequeña cantidad de relleno (2–4 px) alrededor de cada sprite para evitar el sangrado de bordes al escalar o rotar en tu motor.

Best Practice

Nombra los sprites consistentemente (ej., <code>hero_run_0001.png</code>, <code>hero_run_0002.png</code>) para simplificar las importaciones de animación y la programación.

Best Practice

En entornos educativos, comienza con hojas de sprites muy simples (pocos sprites grandes, fondo claro) para que los estudiantes vean resultados inmediatos.

Best Practice

Mantén el ZIP exportado junto a los archivos fuente de tu proyecto para poder regenerar o ajustar animaciones fácilmente más tarde.

Additional Resources

Scratch Wiki – Sprites
Documentation
Documentación de Godot – Animación de Sprites 2D
Documentation
Manual de Unity – Sprites 2D
Documentation

Other Tools