GIF a sprite sheet

Cómo convertir un GIF en un sprite sheet

1. 1

   Elige el sentido

   «GIF a sheet» coloca todos los frames en una rejilla. «Sheet a GIF» hace lo contrario: le dices la rejilla y reconstruye la animación.

2. 2

   Abre tu fichero

   Un GIF, WebP animado, APNG o AVIF animado en un sentido; una sheet en PNG, WebP o JPG en el otro.

3. 3

   Monta la rejilla

   Deja las columnas en cero para una rejilla casi cuadrada, o fíjalas tú. Añade separación entre celdas si tu motor la necesita, y reduce el tamaño de los frames si la sheet saldría demasiado grande.

4. 4

   Descarga

   Con los metadatos activados, te llevas el PNG y el JSON en un ZIP, porque el JSON se refiere a la imagen por su nombre y separarlos rompe el enlace.

Qué lo diferencia

• Las duraciones sobreviven

  Un sprite sheet suelto pierde justo lo que la hacía una animación: cuánto dura cada frame. El JSON lleva todas las duraciones, así que la animación se puede reconstruir exacta, en un motor o aquí de vuelta.

• El formato de Aseprite, no uno nuestro

  Los metadatos usan el formato que exporta Aseprite, que ya leen Phaser, PixiJS y los importadores de Godot y Unity. Inventarnos uno propio habría significado que tú escribieras un adaptador.

• Te dice el tamaño antes de montarla

  El área de la sheet es el número de frames por el tamaño del frame, con cualquier rejilla, así que una animación larga simplemente no cabe en una sola imagen. Las medidas resultantes se enseñan mientras cambias las opciones, calculadas por el mismo código que la monta.

• Al cortar, la última fila incompleta no molesta

  Cinco frames en una rejilla de 3×2 dejan una celda vacía. Dile cuántos frames hay de verdad y esa celda se salta, en vez de aparecer un frame en blanco al final de tu animación.

• La separación que los motores piden de verdad

  El padding entre celdas evita que el filtrado bilineal arrastre píxeles del frame vecino, que es la causa habitual de las costuras finas alrededor de los sprites. El margen alrededor de la sheet también está.

Formatos admitidos

Hacia sheet: GIF animado, WebP animado, APNG y AVIF animado. Sale una sheet en PNG, transparente salvo que elijas un fondo, más el JSON opcional. En el otro sentido entra cualquier sheet en PNG, WebP o JPG y sale un GIF animado.

Preguntas frecuentes

¿Para qué sirve un sprite sheet?

Los motores de juego dibujan las animaciones desde una única textura en vez de desde un fichero por frame: una sola subida a la GPU y una sola imagen que gestionar. Es la forma estándar de meter animación 2D en Godot, Unity, Phaser y compañía.

¿Necesito el JSON?

Si tu motor lee el JSON de Aseprite, sí: te ahorra teclear a mano los rectángulos de cada frame y los tiempos. Si vas a colocar la sheet en una rejilla uniforme y a poner la velocidad en el código, con el PNG te basta.

¿Por qué no puedo hacer la sheet en una sola fila larga?

Puedes, fijando las columnas al número de frames, pero rara vez ayuda: el área es la misma de cualquier manera, y las texturas muy anchas topan con los límites de las GPU antiguas. Una rejilla casi cuadrada es la opción segura.

¿Por qué dice que la sheet saldría demasiado grande?

Porque el área es frames × ancho × alto, y ninguna rejilla cambia eso. Una animación de 200 frames a 400×400 son 32 megapíxeles en una sola imagen. Reduce el tamaño de los frames, o acorta la animación primero.

Los frames cortados salen desplazados un píxel. ¿Qué ha pasado?

La rejilla no divide la sheet de forma exacta. La herramienta rechaza una rejilla que necesitaría píxeles fraccionarios en vez de redondearla, porque el error crece con cada columna; repasa los números, o describe la rejilla por tamaño de frame.

¿Puedo sacar los frames como ficheros sueltos?

Sí, pero desde el divisor de GIF: abre ahí la animación y exporta los frames como PNG dentro de un ZIP.