Creador de sprite sheets

Todo ocurre en tu navegador: tus imágenes nunca se suben a un servidor.

Qué son las hojas de sprites

Una hoja de sprites es un único archivo de imagen que contiene varias imágenes más pequeñas (fotogramas) dispuestas en una cuadrícula, comúnmente usada en el desarrollo de juegos y animación porque cargar una imagen combinada es más eficiente que cargar muchos archivos separados, y facilita la animación fotograma a fotograma. Esta herramienta combina varias imágenes subidas del mismo tamaño en una única hoja de sprites, permitiéndote establecer el número de columnas y el espaciado, y luego descargar tanto la imagen combinada como un archivo JSON que lista las coordenadas de cada fotograma.

Cómo se generan la hoja y los datos de fotogramas

Las imágenes se disponen de izquierda a derecha, pasando a una nueva fila según el número de columnas elegido, cada una dibujada en un canvas compartido en su posición de cuadrícula calculada con el espaciado que especifiques entre fotogramas. Si tus imágenes subidas tienen tamaños distintos, la herramienta las alinea dentro de una celda dimensionada según la imagen más grande para evitar solapamientos. El archivo JSON descargable registra la posición x/y y el ancho/alto de cada fotograma en la hoja final, que los motores de juego y las herramientas de animación suelen usar para saber dónde "recortar" cada fotograma durante la reproducción.

Preguntas frecuentes

¿Por qué necesito el archivo JSON de coordenadas y no solo la imagen?
El PNG combinado por sí solo no le dice a un motor de juego o biblioteca de animación dónde termina un fotograma y empieza el siguiente — el archivo JSON proporciona esas coordenadas de píxel exactas, que es lo que permite al software cortar correctamente la hoja de vuelta en fotogramas de animación individuales durante la reproducción.
¿Qué pasa si mis imágenes subidas no son todas del mismo tamaño?
La herramienta sigue funcionando, pero cada celda de la cuadrícula se dimensiona para ajustarse a la imagen subida más grande, así que las imágenes más pequeñas tendrán espacio vacío adicional a su alrededor dentro de su celda en lugar de estirarse o recortarse para coincidir.
¿Puedo reordenar los fotogramas después de subirlos?
Sí — puedes mover cualquier miniatura antes o después en la secuencia usando los controles de reordenación, o eliminar imágenes individuales, antes de generar la hoja de sprites final, ya que el orden de los fotogramas suele importar para cómo se reproduce una animación.