Arrastra los fotogramas que ya tienes —exportados de Aseprite, dibujados a mano o generados en otro sitio— y obtén un sprite sheet PNG listo para el juego. Todo se ejecuta en tu navegador; no se sube nada.
¿Aún no tienes fotogramas? Deja que el generador de sprites con IA dibuje el personaje y la animación por ti.
¿Primera vez? Lee cómo hacer un sprite sheet →
Un archivo de imagen equivale a un fotograma. Los GIF se importan como una imagen fija; no se separa la animación.
Haz clic para ver el resultado. El ejemplo sustituye las imágenes actuales.
Columnas: imágenes por fila. El margen añade espacio alrededor de cada imagen.
Añade fotogramas para generar la hoja
Carga un ejemplo arriba o añade tus imágenes a la izquierda.
PNG transparente · píxeles originales · sin envío al servidor
Explora otros personajes y organiza tus propios fotogramas en una cuadrícula uniforme. Las imágenes de abajo ilustran la distribución.
Organizar mis fotogramas Tres pasos, todos dentro de tu navegador.
Arrastra y suelta las imágenes de cada fotograma. Se ordenan por nombre de archivo, así walk_01, walk_02 … quedan en el orden correcto. Reordena o elimina cualquiera con un clic.
Decide cuántas columnas tendrá la hoja, o déjalo en auto para una sola fila hasta 8 fotogramas. Añade 1–4 px de margen para evitar que los fotogramas vecinos se filtren al muestrear.
Cada fotograma conserva sus píxeles originales. Las celdas son uniformes (ancho máximo × alto máximo) y los fotogramas comparten la misma línea base, así que los motores pueden cortar la hoja con una cuadrícula fija.
Combina imágenes independientes en un PNG. Elige columnas y separación sin cambiar los píxeles originales.
Píxeles originales
Las imágenes no se redimensionan al empaquetarlas.
Celdas uniformes
El fotograma más ancho y el más alto determinan el tamaño de celda.
Procesamiento local
La organización y la exportación PNG se realizan en tu dispositivo.
Cómo coloca tus fotogramas, en números.
| Creador de hojas de sprites | |
|---|---|
| [R01] Entrada | PNG, WebP, GIF o JPEG; un archivo es un fotograma |
| [R02] Tamaño de celda | El fotograma más ancho × el más alto |
| [R03] Alineación | Centrado en horizontal, pegado abajo: los pies en la misma línea |
| [R04] Escalado | Ninguno. Se conservan los píxeles originales |
| [R05] Columnas | Auto, 1, 2, 4 u 8 |
| [R06] Espaciado | 0, 1, 2 o 4 px |
| [R07] Orden | Por nombre de archivo y luego arrastrando |
| [R08] Salida | PNG |
| [R09] Dónde se ejecuta | Tu navegador; nada se sube |
Las columnas deciden la forma de la hoja. El número correcto depende de la animación y de cómo la recorta tu motor.
Ideal para bucles cortos: ciclos de caminar, respiración en reposo, una moneda girando. Todos los fotogramas quedan en una línea, así que recortar es dividir el ancho de la hoja entre el número de fotogramas. Auto usa una sola fila hasta 8 fotogramas.
¿Varias acciones en una hoja? Si todas tienen el mismo número de fotogramas, pon ese número de columnas —4 u 8— y cada acción ocupa su propia fila, con el fotograma 1 de cada una alineado en la primera columna.
Una tira vertical. Algunas animaciones CSS y motores antiguos esperan los fotogramas apilados de arriba abajo.
Con más de 8 fotogramas, Auto pasa a una cuadrícula casi cuadrada: 12 fotogramas quedan en 4 × 3. Una hoja cuadrada se mantiene dentro de los límites de tamaño de textura de las GPU móviles, donde una fila de 40 fotogramas puede quedar demasiado ancha.
Lo que preguntan los desarrolladores antes de empaquetar sus fotogramas.
Sí, totalmente. Funciona en tu navegador, no tiene límite de fotogramas y no requiere cuenta. Solo el generador de sprites con IA de la página principal consume créditos.
No. Los fotogramas se leen y se empaquetan con la API canvas del navegador en tu equipo. Nada sale de tu dispositivo.
El tamaño de celda lo fijan el fotograma más ancho y el más alto. Los más pequeños se centran horizontalmente y se alinean abajo, así los personajes mantienen los pies en la misma línea base. Nunca se escalan.
Cualquiera que corte la hoja con una cuadrícula fija: Unity, Godot, GameMaker, Phaser, Pygame y más. Usa el tamaño de celda que aparece bajo la vista previa como ancho y alto del fotograma.
Sí. El generador de sprites de la página principal dibuja un personaje y sus fotogramas de animación a partir de una descripción y te entrega el sprite sheet terminado.
El creador de hojas empaqueta en una cuadrícula los fotogramas que ya tienes. El creador de sprites genera un sprite nuevo a partir de una descripción en texto. Uno ordena tu arte, el otro lo dibuja.
Describe un personaje y una acción, y el generador de sprites con IA te devuelve un sprite sheet animado en aproximadamente un minuto.
Cuatro caminos hasta una hoja de sprites. Elige el que encaje con lo que ya tienes.
