Sprite sheet explicado: formatos, herramientas y cómo convertir cualquier animación

Un sprite sheet 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, el sprite sheet suele ser donde vive el problema.

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

Qué es un sprite sheet

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

Si cualquiera de esos cuatro valores es incorrecto, la falla es inmediata 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 el sheet, lo que se percibe como una deriva horizontal lenta. Un origen incorrecto voltea la animación verticalmente. Una cantidad de fotogramas incorrecta descarta 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 un sheet

Piensa en un sheet como una tabla. Las columnas y las 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 el alto total dividido por el alto de celda da la cantidad de filas. Un sheet 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 padding entre celdas, la cuenta cambia: 512 píxeles de ancho con celdas de 64 píxeles y 1 píxel de padding admite 7 celdas, no 8, porque el padding consume 8 píxeles. El padding 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 juego 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 cualquier tamaño. 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.

Sprite sheet vs spritesheet vs sprite atlas

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 distinción real es entre un sheet y un atlas. Un sprite sheet es una imagen empaquetada sin un índice obligatorio. Un sprite atlas es la misma imagen empaquetada más una descripción legible por máquina de qué hay y dónde — por lo general 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 tú codifiques coordenadas de píxeles a mano. Si tus fotogramas son uniformes y tu bucle es simple, un sheet simple es suficiente. Si tienes regiones irregulares o estados con nombre, quieres un atlas.

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

Cuadrícula vs tira horizontal de fotogramas

Una cuadrícula empaqueta los fotogramas en filas y columnas para mantener la imagen cerca de un cuadrado. Eso importa porque la memoria de textura y el muestreo de la GPU son más amigables con dimensiones cuadradas o potencias de dos en cierto hardware, y porque un sheet cuadrado 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 todos los fotogramas en una sola fila. Esa es la disposición que esperan los shaders y las texturas 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 en X, y la Y permanece constante. Si le entregas una 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 sola fila muy ancha o no encontrará filas en absoluto.

El modo de falla suele ser sutil al principio: la animación se reproduce, pero el tiempo se siente mal o los fotogramas se repiten fuera de orden. Antes de depurar la lógica de animación, confirma que la disposición coincida con el consumidor. En nuestro 3D game builder, los personajes basados en sprites usan una cuadrícula porque el motor se encarga del corte; los efectos controlados por shaders, como fuego o agua, usan una tira porque el material la muestrea directamente.

Qué formato exportar

PNG es lo predeterminado seguro. Admite alfa completo, es sin pérdida 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 de 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 formen 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 a mano. 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érdida 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 ajuste que solucione esto.

Todos nuestros convertidores

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

Para GIF animados, el convertidor descompone cada fotograma y lo empaqueta en un sheet o una tira, conservando los retrasos de fotograma en un sidecar si lo solicitas. Para imágenes fijas, el convertidor recorta y organiza una secuencia de imágenes que proporciones en una cuadrícula. Para video, el convertidor muestrea fotogramas a una tasa elegida y los escribe en un sheet; 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 convertidor correspondiente.

• GIF a sprite sheetDescompone un GIF animado fotograma por fotograma y empaqueta los fotogramas en una cuadrícula o tira horizontal.
• Imagen a sprite sheetToma una secuencia de imágenes fijas y las organiza en una cuadrícula uniforme con un tamaño de celda consistente.
• Video a sprite sheetMuestrea fotogramas de un video a un intervalo elegido y los escribe en un sheet o una tira.
• Agent Sprite ForgeNuestra herramienta enfocada en sprites para generar y empaquetar fotogramas de personajes en sheets que usa el 3D game builder.

Glosario

Estos son los términos que aparecen cuando lees documentación de sprite sheets, ajustes 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 un sheet que contiene un fotograma. Su ancho y su alto son el tamaño de celda.
• Tira de fotogramasUn sheet dispuesto como una sola fila horizontal de fotogramas, usado por shaders y texturas flipbook.
• FlipbookUna textura que se muestrea una región a la vez a lo largo del tiempo para producir una animación, por lo general a partir de una tira de fotogramas.
• ÍndiceLos datos del sidecar que nombran o numeran regiones en un atlas. Sin él, el corte es aritmético.
• OrigenLa esquina de la imagen o de la celda desde la cual se miden las coordenadas, por lo general arriba a la izquierda o abajo a la izquierda.
• PaddingPíxeles adicionales entre celdas de un sheet, usados para evitar el sangrado de textura. El padding cambia cuántas celdas caben.
• EspaciadoLa distancia entre celdas, a menudo usada como sinónimo de padding, pero a veces contada por separado.

Entra al mundo al que pertenece

Un sprite es un personaje sin lugar donde pararse. El último paso es el que nadie más ofrece: toma el sheet que acabas de crear y ponlo en un mundo por el que alguien pueda caminar — una isla pequeña, un planeta, una esquina de calle lluviosa. Cada mundo de este sitio se creó a partir de una descripción escrita y se publicó como una página que puedes jugar.