Hoja de sprites explicada: formatos, herramientas y cómo convertir cualquier animación

Una hoja de sprites es una sola imagen que contiene todos los fotogramas de una animación dispuestos en una cuadrícula o tira fija, de modo que un renderizador puede muestrear una región por fotograma en lugar de cargar decenas de archivos. Si alguna vez exportaste fotogramas de una animación 3D y luego tuviste que averiguar por qué el personaje tiembla o el fondo se vuelve negro, la hoja de sprites suele ser donde vive el problema.

Esta página cubre todo el recorrido: qué es realmente una hoja, en qué se diferencia de un atlas, cuándo usar una cuadrícula frente a una tira horizontal, qué formato exportar y cómo convertir fuentes GIF, de imagen y de video en una hoja utilizable en el navegador. Los ejemplos hacen referencia a nuestras propias herramientas y mundos —Agent Sprite Forge, The Cyclops' Island, Mini World y el creador de juegos 3D— porque ese es el flujo de trabajo que publicamos y probamos.

¿Qué es una hoja de sprites?

Una hoja de sprites es una imagen rasterizada donde cada fotograma de animación ocupa una celda de igual tamaño en una cuadrícula regular. La hoja en sí no contiene información semántica sobre qué celda es qué fotograma; esa correspondencia vive en la convención de nombres de archivo, un índice JSON adjunto o la configuración de animación del motor. Las cuatro cosas que debes saber para cortar una hoja son: el ancho y la altura de la celda en píxeles, la cantidad de columnas, la cantidad de filas y el origen (arriba a la izquierda para la mayoría de los motores, pero algunos frameworks asumen abajo a la izquierda).

Si alguno de esos cuatro valores es incorrecto, el fallo es inmediato y visible. Un ancho de celda de 32 en lugar de 33 desplaza cada fotograma un píxel a la derecha a medida que avanzas por la hoja, lo que se percibe como una lenta deriva horizontal. Un origen incorrecto voltea la animación verticalmente. Una cantidad de fotogramas incorrecta elimina el último fotograma, así que un ciclo de caminata termina con un salto en lugar de una pose de contacto. Estos no son errores de renderizado; son desajustes de metadatos.

Anatomía de una hoja

Piensa en una hoja como una tabla. Las columnas y filas están implícitas en las dimensiones en píxeles: el ancho total dividido por el ancho de celda da la cantidad de columnas, y la altura total dividida por la altura de celda da la cantidad de filas. Una hoja de 512 por 128 con celdas de 64 por 64 tiene 8 columnas y 2 filas, es decir, 16 fotogramas. Si agregas un píxel de relleno entre celdas, la cuenta cambia: 512 píxeles de ancho con celdas de 64 píxeles y 1 píxel de relleno admite 7 celdas, no 8, porque el relleno consume 8 píxeles. El relleno y el espaciado deben tenerse en cuenta antes de escribir el código de corte.

Dónde importa el origen

La mayoría de los pipelines de WebGL y canvas colocan el origen en la esquina superior izquierda de la imagen, lo que coincide con el sistema de coordenadas que usan las herramientas de edición de imágenes. Algunos motores de juegos y frameworks más antiguos invierten el eje Y y esperan el origen en la esquina inferior izquierda. Si tu sprite aparece al revés, revisa el origen antes de cambiar el tamaño de nada. La solución suele ser una transformación de una línea o una regeneración con el orden de filas opuesto, no una reexportación completa.

Hoja de sprites vs spritesheet vs atlas de sprites

La ortografía no está estandarizada. 'Sprite sheet' con espacio es la forma común en inglés y la que usan la mayoría de la documentación y los tutoriales. 'Spritesheet' como una sola palabra aparece en identificadores de código, nombres de archivo y algunas API de motores porque los espacios son incómodos en esos contextos. Los motores de búsqueda los tratan como casi sinónimos, así que encontrarás la misma técnica con ambas grafías.

La verdadera distinción es entre una hoja y un atlas. Una hoja de sprites es una imagen empaquetada sin un índice obligatorio. Un atlas de sprites es la misma imagen empaquetada más una descripción legible por máquina de qué hay dónde —normalmente un archivo JSON, XML o binario que nombra cada región—. Ese índice es lo que permite que una herramienta encuentre el fotograma de reposo, el de carrera y el de ataque sin que codifiques manualmente las coordenadas de píxeles. Si tus fotogramas son uniformes y tu bucle es simple, una hoja simple es suficiente. Si tienes regiones irregulares o estados con nombre, quieres un atlas.

• HojaUna cuadrícula o tira de fotogramas del mismo tamaño. No se requieren metadatos. El corte es una operación aritmética.
• SpritesheetEl mismo artefacto, escrito como una sola palabra. Común en código y nombres de archivos de recursos.
• AtlasFotogramas empaquetados más un índice que asigna nombres o IDs a rectángulos. Permite la búsqueda por nombre en lugar de cálculos de coordenadas.

Cuadrícula vs tira horizontal de fotogramas

Una hoja en cuadrícula empaqueta los fotogramas en filas y columnas para mantener la imagen cerca de ser cuadrada. Eso importa porque la memoria de texturas y el muestreo de la GPU son más amigables con las dimensiones cuadradas o potencias de dos en cierto hardware, y porque una hoja cuadrada es más fácil de previsualizar en un editor de imágenes. Las cuadrículas son lo predeterminado para el corte del lado del motor: defines el tamaño de celda y la cantidad de fotogramas, y el motor recorre la cuadrícula fila por fila.

Una tira horizontal de fotogramas coloca cada fotograma en una sola fila. Ese es el diseño que esperan los shaders y las texturas de flipbook, porque el desplazamiento UV se convierte en una sola multiplicación: el índice de fotograma dividido por la cantidad de fotogramas da el desplazamiento X, y Y permanece constante. Si le entregas una hoja en cuadrícula a un shader que asume una tira, la animación muestreará a través de las filas y se repetirá de formas que no pretendías. Si le entregas una tira a un cortador de motor que asume una cuadrícula, tratará la tira como una fila muy ancha o no encontrará filas en absoluto.

El modo de fallo suele ser sutil al principio: la animación se reproduce, pero la sincronización se siente incorrecta o los fotogramas se repiten fuera de orden. Antes de depurar la lógica de animación, confirma que el diseño coincida con el consumidor. En nuestro creador de juegos 3D, los personajes basados en sprites usan una cuadrícula porque el motor maneja el corte; los efectos controlados por shaders, como fuego o agua, usan una tira porque el material la muestrea directamente.

Qué formato exportar

PNG es el valor predeterminado seguro. Admite alfa completo, es sin pérdidas y todos los motores y navegadores lo decodifican. Para sprites con bordes duros y colores planos, PNG comprime bien. Para sprites fotográficos o con mucho sombreado, WebP suele producir un archivo más pequeño con la misma calidad visual, y todos los navegadores actuales lo admiten. Usa WebP cuando el tamaño del archivo importe y puedas verificar que el entorno de ejecución de destino lo decodifique. GIF es un formato de entrega, no de autoría: solo admite transparencia de un bit, así que cada píxel semitransparente se vuelve totalmente opaco o totalmente transparente. Si tu fuente tiene bordes suaves, GIF les dejará flecos.

Incluye un sidecar JSON cuando tus fotogramas no sean una cuadrícula uniforme simple, cuando necesites estados con nombre o cuando el consumidor espere un atlas. El sidecar es pequeño y elimina la necesidad de codificar coordenadas manualmente. Si tus fotogramas son uniformes y la animación es un solo bucle, puedes omitirlo y dejar que el motor calcule los rectángulos. Nunca exportes sprites como JPEG. JPEG tiene pérdidas y no tiene canal alfa, así que la transparencia se vuelve negra o blanca, y los artefactos de compresión caen exactamente sobre los bordes duros que definen la silueta de un sprite. No hay ninguna configuración que arregle esto.

Todos nuestros conversores

Estas son las rutas de conversión que ofrecemos. Cada una se ejecuta en el navegador, así que puedes soltar un archivo y obtener una hoja de sprites sin instalar nada. Cubren las fuentes comunes: GIF animados, imágenes fijas y clips de video.

Para GIF animados, el conversor desempaqueta cada fotograma y lo empaqueta en una hoja o tira, preservando los retrasos de fotograma en un sidecar si lo solicitas. Para imágenes fijas, el conversor recorta y organiza una secuencia de imágenes que proporciones en una cuadrícula. Para video, el conversor muestrea fotogramas a una tasa elegida y los escribe en una hoja; tú controlas el intervalo de muestreo y el tamaño de celda. Si estás creando un personaje para The Cyclops' Island o un objeto para Mini World, empieza con el formato de origen que tengas y elige el conversor correspondiente.

• GIF a hoja de spritesDesempaqueta un GIF animado fotograma por fotograma y empaqueta los fotogramas en una cuadrícula o tira horizontal.
• Imagen a hoja de spritesToma una secuencia de imágenes fijas y las organiza en una cuadrícula uniforme con un tamaño de celda consistente.
• Video a hoja de spritesMuestrea fotogramas de un video a un intervalo elegido y los escribe en una hoja o tira.
• Agent Sprite ForgeNuestra herramienta enfocada en sprites para generar y empaquetar fotogramas de personajes en hojas usadas por el creador de juegos 3D.

Glosario

Estos son los términos que aparecen cuando lees documentación de hojas de sprites, configuración de motores o código de shaders. Las definiciones son breves a propósito.

• AtlasUna imagen empaquetada de regiones más un índice legible por máquina que asigna nombres o IDs a rectángulos.
• CeldaEl rectángulo de una hoja que contiene un fotograma. Su ancho y altura son el tamaño de celda.
• Tira de fotogramasUna hoja dispuesta como una sola fila horizontal de fotogramas, usada por shaders y texturas de flipbook.
• FlipbookUna textura que se muestrea una región a la vez a lo largo del tiempo para producir una animación, normalmente desde una tira de fotogramas.
• ÍndiceLos datos del sidecar que nombran o numeran regiones en un atlas. Sin él, el corte es una operación aritmética.
• OrigenLa esquina de la imagen o celda desde la que se miden las coordenadas, normalmente arriba a la izquierda o abajo a la izquierda.
• RellenoPíxeles adicionales entre celdas de una hoja, usados para evitar el sangrado de texturas. El relleno cambia cuántas celdas caben.
• EspaciadoLa distancia entre celdas, a menudo usada indistintamente con relleno, pero a veces se cuenta por separado.

Entra 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 de calle lluviosa—. 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.