Sprite Sheet Cutter: cortar sprite sheets en fotogramas sueltos
En resumen
El Sprite Sheet Cutter de Grab3D corta una hoja de sprites en fotogramas PNG sueltos directamente en tu navegador. Puedes cortar por cuadrícula con columnas y filas o tamaño de celda, margen y espaciado, o dejar que la detección automática extraiga sprites irregulares de un fondo transparente o de color liso. Obtienes un ZIP con PNG, un JSON con las coordenadas de cada fotograma y un GIF animado. No se sube nada.
- Entrada
- PNG, WebP, GIF, JPEG, BMP
- Modos
- Cuadrícula, detección automática
- Exportación
- ZIP de PNG, PNG suelto, JSON, GIF, WebP
- Privacidad
- Funciona en tu dispositivo, sin subir nada
- Precio
- Gratis, sin cuenta, sin marca de agua
Suelta una sprite sheet o prueba un ejemplo
Haz clic en un fotograma para descartarlo. Arrastra para mover, rueda o + y − para el zoom, 0 para ajustar, flechas para desplazar.Toca un fotograma para descartarlo. Arrastra con un dedo para mover y pellizca para el zoom.
Fotogramas
Cómo dividir una sprite sheet en fotogramas PNG
- Arrastra la sprite sheet a la página, elige un archivo o pégala con Ctrl+V. La imagen se lee en tu dispositivo y nunca se sube.
- Revisa el fondo. La herramienta detecta la transparencia o el color más frecuente del borde. Si es un color liso, tómalo con el cuentagotas y ajusta la tolerancia.
- En el modo cuadrícula, usa una de las cuadrículas sugeridas o escribe columnas y filas o el tamaño de celda. Añade el margen arriba y a la izquierda y el espaciado entre celdas si la hoja los tiene.
- Para hojas sin cuadrícula, cambia a detección automática. Cada sprite separado recibe su propio recuadro. Si un sprite se parte, sube la distancia de unión, y sube el tamaño mínimo para ignorar motas.
- Haz clic en los fotogramas de la hoja o de la lista para descartarlos, revisa la vista previa animada y ajusta recorte, relleno y escala.
- Descarga un ZIP con todos los PNG y el JSON, PNG sueltos o la animación como GIF o WebP.
¿Qué es una sprite sheet?
Una sprite sheet u hoja de sprites es una sola imagen que contiene muchas imágenes pequeñas, por ejemplo todos los fotogramas de un ciclo de andar, las direcciones de un personaje o un conjunto de objetos. Los juegos cargan una textura en lugar de decenas de archivos, lo que es más rápido y mantiene juntos los gráficos relacionados.
Pero muchas herramientas y motores quieren los fotogramas como archivos separados: un editor de animación que trabaja con imágenes sueltas, un editor de niveles que lista los objetos uno a uno o un sprite que quieres retocar y volver a empaquetar. Para eso hay que cortar sprites de la hoja, y este cortador lo hace sin programa de escritorio.
Cuadrícula o detección automática: qué modo usar
Modo cuadrícula
Para hojas donde cada fotograma ocupa una celda del mismo tamaño, lo habitual en animaciones y tilesets. Indica columnas × filas o el tamaño de celda en píxeles. La herramienta sugiere cuadrículas a partir de los huecos entre sprites, de las líneas separadoras dibujadas y de los divisores del tamaño de la imagen, y salta las celdas vacías.
Detección automática (extractor de sprites)
Para hojas sin cuadrícula: atlas empaquetados, colecciones de objetos u hojas sobre un color liso. Cada grupo de píxeles conectados se convierte en un sprite, las partes cercanas se unen y las motas diminutas se ignoran. Los fotogramas se numeran fila a fila desde arriba a la izquierda.
Margen y espaciado, explicados
El margen (offset) es el borde vacío antes de la primera celda, a la izquierda y arriba. El espaciado (spacing) es el hueco entre dos celdas, en horizontal y en vertical. Ambos son frecuentes en tilesets y en hojas exportadas por empaquetadores, a menudo de 1 o 2 píxeles para que los colores no se mezclen entre fotogramas.
Si los cortes se alejan poco a poco de los sprites de izquierda a derecha, falta el espaciado o no es correcto. Si cada fotograma muestra una franja del vecino en el mismo lado, el margen no encaja. La vista previa colorea margen y espaciado e indica cuántos píxeles sobran a la derecha y abajo. En el modo columnas × filas se aplica el mismo margen a la derecha y abajo, con tamaño de celda solo cuentan el margen izquierdo y el superior.
Usar los fotogramas en tu motor
Los PNG funcionan en cualquier motor. El JSON describe los fotogramas sobre la hoja original con el formato TexturePacker JSON Hash, así que también puedes conservar la hoja como una sola textura.
Godot 4
Crea un AnimatedSprite2D, abre sus SpriteFrames y arrastra los PNG numerados a una animación. Se añaden por orden de nombre. Para pixel art, pon el filtro de textura en Nearest en los ajustes del proyecto, en Rendering, Textures.
Unity
Importa los PNG con Texture Type Sprite (2D and UI). Selecciona todos los fotogramas y arrástralos a la escena, Unity crea un clip de animación con ellos. Para pixel art usa Filter Mode Point y Compression None.
Phaser
Carga la hoja original con el JSON como atlas: this.load.atlas(key, "sheet.png", "sheet.json"). Los nombres de los fotogramas son los nombres de los PNG, así que generateFrameNames con prefix, zeroPad y el sufijo .png crea la animación.
GameMaker
Añade los PNG como subimágenes de un sprite en el Sprite Editor, siguen el orden de los números. Para una tira limpia, Import Strip Image en el menú Image funciona con los mismos valores de tamaño, offset y separación.
Problemas típicos y soluciones rápidas
- La animación salta o tiembla
- Si cada fotograma se recorta por separado, el sprite se desplaza. En el modo cuadrícula usa «Recortar a caja común», que corta cada fotograma con el mismo rectángulo respecto a su celda. En detección automática usa «Mismo tamaño» con el anclaje abajo al centro para personajes.
- Se ven bordes del fotograma vecino
- El tamaño de celda, el margen o el espaciado no coinciden con la hoja. Elige una sugerencia o compara el espaciado coloreado de la vista previa con los huecos de la imagen. En detección automática deja activado «Ocultar partes de sprites vecinos».
- Queda un halo de color al quitar el fondo
- Los píxeles del borde se mezclaron con el color de fondo al crear la hoja. Sube un poco la tolerancia. Un borde perfecto solo es posible desde una fuente con transparencia real.
- Un sprite sale dividido en varios fotogramas
- Las partes que no se tocan, como una espada o una sombra, son grupos de píxeles separados. Sube la distancia de unión hasta que queden juntas.
- Falta la última columna o fila
- La cuadrícula no encaja con el tamaño de la imagen. La línea de información bajo los ajustes muestra los píxeles que sobran a la derecha y abajo. Revisa el tamaño de celda o cambia entre columnas × filas y tamaño de celda.
- El pixel art se ve borroso
- La herramienta nunca suaviza píxeles, la escala usa vecino más cercano a 2× o 4×. Si en el juego los fotogramas se ven suaves, cambia el filtro de textura del motor a nearest o point.
Herramientas relacionadas y sprites gratis
Preguntas frecuentes
¿El Sprite Sheet Cutter es gratis y se suben mis imágenes?
Es gratis, sin cuenta, sin límite y sin marca de agua. La imagen se decodifica y se corta en tu navegador. Ningún archivo se envía a un servidor, así que sirve también para arte que aún no has publicado.
¿Cómo divido una sprite sheet en archivos PNG individuales?
Abre la hoja, revisa el fondo, acepta una cuadrícula sugerida o escribe columnas y filas y pulsa Descargar ZIP. El ZIP contiene un PNG por fotograma con el nombre según tu patrón y un JSON con las coordenadas.
¿Qué diferencia hay entre un cortador de sprite sheets y un extractor de sprites?
Un cortador o divisor corta siguiendo una cuadrícula regular. Un extractor encuentra sprites colocados libremente. Esta herramienta hace las dos cosas: modo cuadrícula para hojas regulares y detección automática para las irregulares.
¿Qué significan margen y espaciado?
El margen es el espacio antes de la primera celda, a la izquierda y arriba. El espaciado es el hueco entre celdas vecinas. Ambos se ajustan por separado en X e Y.
¿Cómo quito un color de fondo liso?
Elige Color como fondo, tómalo con el cuentagotas y deja activado «Hacer el fondo transparente». La tolerancia decide cuánto puede diferir un píxel del color y seguir contando como fondo.
¿Puedo mantener todos los fotogramas del mismo tamaño?
Sí. «Recortar a caja común» corta cada celda con el mismo rectángulo y mantiene la animación en su sitio. «Recortar, mismo tamaño» coloca cada fotograma recortado centrado o alineado abajo sobre un tamaño común. El relleno añade píxeles vacíos en todos los lados.
¿Qué archivos puedo exportar?
Un ZIP con los PNG y un JSON opcional, PNG sueltos desde la lista de fotogramas, el JSON por separado y los fotogramas elegidos como GIF o WebP animado. El WebP necesita un navegador que pueda codificar WebP.
¿Qué tamaño puede tener una sprite sheet?
Se aceptan imágenes de hasta 16.384 píxeles por lado y 134 megapíxeles en total. La hoja se analiza por franjas para ahorrar memoria, así que 8192 × 8192 funciona en un navegador de escritorio. Los móviles con poca memoria pueden rechazar imágenes muy grandes.
¿Puedo crear una sprite sheet a partir de un modelo 3D?
Sí, con el Generador de sprite sheets. Renderiza un modelo o un ciclo riggeado de andar y correr desde varias direcciones en una hoja con JSON para motores.