Creador de hojas de sprites: constructor gratuito de hojas y atlas en línea
Crea tu propio creador de hojas de sprites
Combina fotogramas en una sola hoja: define columnas, relleno y escala, exporta un PNG y un atlas JSON, o genera una hoja animada completa a partir de un solo prompt.
Un creador de hojas de sprites hace una sola cosa: toma un conjunto de fotogramas individuales y los empaqueta en una sola imagen con coordenadas conocidas. Le das archivos PNG, JPG o WebP, eliges columnas, relleno y escala, y devuelve un PNG más un atlas JSON que asigna el nombre de cada fotograma a un rectángulo con x, y, ancho y alto. Ese rectángulo es todo lo que tu renderizador necesita para dibujar la celda correcta.
El término abarca dos herramientas distintas. Una es un empaquetador: ya tienes fotogramas y quieres tenerlos en una sola hoja. La otra es un generador: escribes un prompt y obtienes una hoja de personaje animada completa con un estilo consistente. El creador de mundos 3D basado en navegador de Neta Studio maneja ambas, y el resultado entra directamente en una escena de Three.js sin un paso de conversión.
Crea una hoja de sprites a partir de tus fotogramas
Esta es la ruta de empaquetado. Sueltas los fotogramas y la hoja se construye de forma determinista: de izquierda a derecha, de arriba a abajo, en el orden en que los suministraste. El primer fotograma ocupa la celda (0,0), el segundo queda una celda a la derecha, y así sucesivamente hasta que la fila se llena; en ese punto, el empaquetado continúa en la siguiente fila.
El orden importa más que cualquier otra cosa aquí. El empaquetador no ordena por nombre de archivo ni infiere grupos de animación a partir de los nombres. Si tus fotogramas están numerados de frame_1.png a frame_8.png y los sueltas fuera de orden, la hoja exportada queda mal y el atlas JSON registrará fielmente el orden incorrecto. Ordénalos antes de soltarlos, o revisa la tira de miniaturas antes de exportar.
La salida son dos archivos. El PNG es la imagen empaquetada. El JSON es un objeto pequeño indexado por nombre de fotograma, donde cada valor contiene el rectángulo y el tamaño de origen. La mayoría de los motores puede consumir ese JSON directamente; si el tuyo no puede, los números son lo bastante simples para reasignarlos a mano.
01
Exporta tus fotogramas como PNG con transparencia, o JPG/WebP si no necesitas un canal alfa. Mantén todos los fotogramas con las mismas dimensiones en píxeles.
02
Suelta los fotogramas en el empaquetador en el orden de reproducción. Verifica que la tira de miniaturas se lea de izquierda a derecha tal como debe reproducirse la animación.
03
Configura la cantidad de columnas. Déjala en automático si quieres una hoja aproximadamente cuadrada, o fíjala a la cantidad de fotogramas para obtener una sola tira ancha.
04
Configura el relleno y la escala. El relleno agrega píxeles transparentes entre celdas; la escala multiplica cada fotograma por un factor entero usando vecino más cercano.
05
Exporta el PNG y el atlas JSON juntos. Comprueba un rectángulo del JSON contra la hoja visible antes de conectarlo a tu renderizador.
Genera una hoja de sprites a partir de un prompt
El segundo significado de creador de sprites no tiene nada que ver con el empaquetado en cuadrícula. Describes un personaje y obtienes una hoja completa: un conjunto completo de poses renderizadas con un estilo consistente, ya distribuidas en una cuadrícula. No hay arte de origen que soltar, porque el arte es la salida.
La parte útil es la consistencia. Generar ocho direcciones de un ciclo de caminata en una sola pasada mantiene la silueta, la paleta y las proporciones alineadas entre celdas. Generar cada fotograma en una solicitud separada no lo hace, y la deriva se nota como un personaje que parece cambiar de masa entre fotogramas.
Neta Studio genera ciclos de caminata de 8 direcciones, y conjuntos de reposo, ataque y lanzamiento. Agent Sprite Forge es el recurso del estudio que produce estas hojas; puedes soltar una hoja generada en un mundo del creador de juegos 3D y controlarla con el mismo atlas JSON que habría producido el empaquetador.
- Caminata de 8 direccionesUna hoja que cubre las ocho direcciones de la brújula, de modo que girar al personaje en la escena se traduce en una búsqueda por fila en lugar de una nueva generación.
- Reposo, ataque, lanzamientoConjuntos de acciones separados generados con el mismo estilo que la caminata, para que puedas alternar entre ellos en tiempo de ejecución sin una ruptura visible de estilo.
- Continuidad de estiloDescribe al personaje una vez y los conjuntos de poses heredan la paleta y las proporciones, que es la parte que suele fallar cuando generas fotogramas de a uno.
Columnas, relleno, escala y el atlas JSON
Cuatro ajustes deciden si una hoja es utilizable. Déjalos bien en el momento de exportar, porque corregirlos después implica reempaquetar y volver a probar cada animación que hacía referencia a las coordenadas antiguas.
El atlas JSON es el contrato entre la hoja y tu código. Almacena, por fotograma, la posición y el tamaño de la celda. Si cambias la hoja y no regeneras el atlas, los sprites muestrean la región equivocada y obtienes una tira de fotogramas vecinos sangrando en la celda.
- ColumnasFija cuántas celdas caben por fila antes de pasar a la siguiente. Una tira ancha usa columnas iguales a la cantidad de fotogramas; una cuadrícula usa algo más cercano a la raíz cuadrada.
- Relleno y espaciadoInserta píxeles transparentes entre celdas. Esto importa cuando tu renderizador muestrea con cualquier filtrado, porque los píxeles del borde de un fotograma vecino pueden sangrar a través de un límite con relleno cero.
- EscalaMultiplica cada fotograma por un factor entero usando vecino más cercano. El escalado no entero con un filtro suave suaviza los bordes de los píxeles y destruye la nitidez por la que exportaste los fotogramas.
- Atlas JSONAsigna el nombre de cada fotograma a x, y, ancho y alto. Trata el origen como los pies del personaje, no como la esquina superior izquierda de la imagen, para que la colocación en el plano del suelo no requiera desplazamientos por fotograma.
Qué es un atlas de texturas
Un atlas es una sola textura que contiene muchas imágenes más pequeñas, más una tabla que describe dónde se ubica cada una. Una hoja de sprites es el caso común en el que esas imágenes más pequeñas son fotogramas de animación del mismo sujeto.
La razón por la que existen los atlas son las llamadas de dibujo. Vincular una textura separada por fotograma obliga al renderizador a cambiar de estado entre cada una, y los cambios de estado dominan el tiempo de fotograma cuando tienes muchos sprites en pantalla. Empaquetar todo en una sola textura significa una sola vinculación para todo el grupo. La geometría aún se dibuja por sprite, pero la textura no cambia.
La contrapartida es que la edición es tosca. Cambiar un fotograma implica reempaquetar la hoja y actualizar el atlas, y cualquier código que conserve un rectángulo antiguo ahora estará mal. Por eso el atlas se exporta como datos en lugar de coordenadas codificadas de forma fija. Nuestra guía de hojas de sprites cubre las decisiones de empaquetado con más profundidad.
Generador de hojas de sprites para RPG, plataformas e isométricos
La disposición que quieres está determinada en gran medida por el género. Los RPG indexan por dirección y fase de animación, así que una cuadrícula se lee de forma natural. Los juegos de plataformas suelen ejecutar una sola acción a la vez, así que una tira ancha es más simple. Los mundos isométricos necesitan dimensiones de celda que coincidan con la proyección de rombo o los sprites se superponen.
Elige la disposición antes de configurar las columnas y escribe el código de búsqueda contra esa disposición. Adaptar una cuadrícula a una indexación basada en tiras es un cambio mecánico pero tedioso, y toca cada punto de llamada de animación.
| Género | Disposición típica | Notas |
|---|---|---|
| RPG | Cuadrícula de 4 direcciones | Las filas son direcciones, las columnas son fotogramas. Indexa por dirección y luego por fase. |
| Plataformas | Tira ancha única | Una acción por hoja. La reproducción es un índice lineal, sin cálculos de filas. |
| Isométrico | Celdas de rombo | El tamaño de celda debe coincidir con la proyección. Agrega más relleno de lo habitual para evitar que los bordes sangren. |
Hojas de sprites de personajes
Mantener un elenco consistente es la parte difícil cuando tienes más de un personaje. Hojas que son plausibles por separado fallan en conjunto cuando las paletas se desvían, las proporciones cambian o la dirección de la luz se invierte entre personajes que están en la misma escena.
Genera el conjunto completo de acciones de un personaje en una sola pasada en lugar de una acción a la vez. La paleta y las proporciones se mantienen entre poses dentro de una pasada; entre pasadas no, y la diferencia se nota en el momento en que dos personajes comparten un fotograma.
Mantén el tamaño de celda idéntico en todos los personajes del elenco, incluso si el arte no llena la celda. Las celdas uniformes permiten que la escena coloque cualquier personaje en cualquier ranura sin una tabla de desplazamientos por personaje. El caso de uso del creador de sprites de personajes explica esto para un elenco completo.
Corta una hoja existente en partes
Si ya tienes una hoja y necesitas recuperar los fotogramas, eso es cortar, no empaquetar, y es la operación inversa. El conversor y animador de GIF maneja esta ruta: proporcionas la hoja, defines la cuadrícula de celdas o los límites de los fotogramas y obtienes fotogramas individuales.
Dos cosas hacen que el corte falle. Las hojas con relleno desigual no se dividen de forma exacta por un tamaño de celda supuesto, así que mide una celda conocida en lugar de dividir el ancho de la imagen por tu cantidad estimada de columnas. Las hojas exportadas desde un formato con pérdida llevan artefactos de compresión a lo largo de los límites de las celdas, y esos artefactos se vuelven visibles una vez que las celdas se separan y se amplían.
Entra caminando al mundo al que pertenece
Un sprite es un personaje sin un lugar donde pararse. El último paso es el que nadie más ofrece: toma la hoja que acabas de crear y ponla en un mundo por el que alguien pueda caminar: una isla pequeña, un planeta, una esquina lluviosa de una calle. Todos los mundos de este sitio se crearon a partir de una descripción escrita y se publicaron como una página que puedes jugar.
Preguntas frecuentes
¿Qué formatos de archivo puedo usar para los fotogramas de origen? +
PNG, JPG y WebP. PNG es el único de los tres que lleva un canal alfa de forma confiable, así que úsalo para todo lo que tenga transparencia.
¿Por qué mi hoja de sprites se ve borrosa cuando la amplío? +
Escalaste por un factor no entero, o el renderizador está aplicando un filtro suave. Escala solo por números enteros y configura el filtro de textura en vecino más cercano.
¿Necesito relleno entre fotogramas? +
Por lo general, sí. Con relleno cero y cualquier filtrado de textura, los píxeles del borde de un fotograma se muestrean en la celda vecina, lo que produce una costura visible durante la animación.
¿Qué contiene realmente el atlas JSON? +
Una entrada por fotograma, que contiene su x, y, ancho y alto en la hoja. Algunos exportadores también registran el tamaño del fotograma de origen y el origen, que para personajes suele estar en los pies.
¿Puedo cambiar la cantidad de columnas después de exportar? +
No sin volver a empaquetar. Cambiar las columnas mueve cada fotograma de la hoja, así que los rectángulos antiguos del atlas ya no apuntan a las celdas correctas y todas las animaciones que hacían referencia a ellos se rompen.
¿Cuál es la diferencia entre un creador de hojas de sprites y un generador de hojas de sprites? +
Un creador empaqueta fotogramas que ya tienes en una cuadrícula. Un generador crea los fotogramas a partir de un prompt —por ejemplo, un conjunto completo de caminata de 8 direcciones con un estilo consistente—, así que el arte es la salida en lugar de la entrada.
Volver al creador de juegos 3D
Los 31 mundos, juegos y escenas 3D terminados están en una sola página, y todos son jugables.
Comienza desde una plantilla de la biblioteca
Cada recurso de esta biblioteca es un PNG transparente, listo para juegos, con un prompt registrado: biblioteca de recursos de sprites y hojas de sprites gratis, etiquetados por acción, estilo y tema. Gratis para explorar y descargar.