Cómo empaquetar una hoja de sprites con herramientas gratis (2026)

Una hoja de sprites es una sola imagen que contiene muchas imágenes más pequeñas. Un atlas de texturas es la misma idea, pero con un archivo de datos al lado que indica dónde está cada fotograma: su nombre, su posición, su tamaño y, a veces, si fue recortado o rotado. En la práctica, la gente usa ambos términos para lo mismo, y cada motor y cada herramienta de empaquetado lo llama de una forma ligeramente distinta.

Este tutorial explica cómo empaquetar una hoja de sprites con herramientas gratuitas, los ajustes que deciden si se verá bien en el juego, cómo cargar el resultado en Phaser 3, Unity, Godot y CSS puro, y los errores que aparecen con más frecuencia. Al final hay una breve sección para quienes venden paquetes de sprites.

Por qué empaquetar sprites

El motivo es el mismo en todas las plataformas: menos elementos separados que tengan que gestionar el hardware o el navegador.

• Menos draw calls en un juego. Un renderizador suele poder agrupar en un solo dibujado los sprites que comparten una textura. Si cada fotograma de cada personaje es una imagen independiente, el renderizador tiene que cambiar de textura constantemente y el agrupamiento se rompe. Si los pones en un atlas, decenas de sprites pueden enviarse juntos.
• Menos peticiones en la web. Cargar cuarenta iconos pequeños como cuarenta archivos implica cuarenta peticiones. Una hoja de sprites es una petición y una decodificación. HTTP/2 abarató las peticiones pequeñas, pero una sola imagen sigue siendo más sencilla de almacenar en caché y de precargar.
• Menos memoria desperdiciada. Las GPU antiguas y algunos controladores móviles redondean las texturas a la siguiente potencia de dos. Una imagen de 130 por 70 píxeles puede acabar ocupando 256 por 128 en memoria. Empaquetar muchas imágenes en un atlas bien dimensionado desperdicia mucho menos.
• Gestión de recursos más fácil. Un par de archivos (imagen más datos) es más fácil de versionar, distribuir y cargar que una carpeta con cientos de fotogramas.

Empaquetar no siempre vale la pena. Una imagen de fondo única, o un sprite que ya es enorme, no gana nada con un atlas. La ventaja viene de muchas imágenes pequeñas que se dibujan juntas.

Herramientas gratuitas para empaquetar hojas de sprites

No necesitas pagar nada para conseguir un buen atlas. La tabla siguiente enumera las herramientas que se tratan aquí. "Gratis" significa que puedes producir un atlas utilizable sin comprar una licencia; algunas de ellas tienen planes de pago con funciones adicionales.

Herramienta	Compatible con	Salida habitual	Coste
TexturePacker	Phaser, Pixi, Unity, Godot, Cocos, CSS y muchos más	PNG + JSON, XML, archivos específicos de cada motor	Modo básico gratuito, funciones Pro de pago
Free Texture Packer (free-tex-packer)	Phaser, Pixi, JSON genérico, XML, CSS	PNG + JSON hash o array, XML	Gratis, código abierto
Aseprite	Cualquier motor que lea datos de fotogramas en JSON	PNG + JSON hash o array	De pago, con código fuente disponible para compilarlo tú mismo
Unity Sprite Atlas	Solo Unity	Atlas interno generado al compilar o al ejecutar	Integrado en Unity
Godot AtlasTexture	Solo Godot	Recurso que apunta a una región de una textura	Integrado en Godot
Sprite CSS hecho a mano	Navegadores	Un PNG o SVG + CSS background-position	Gratis

Si solo recuerdas una cosa de la tabla: cuando tu destino es un motor de JavaScript como Phaser o Pixi, Free Texture Packer cubre casi todo sin coste. Cuando estás dentro de Unity o Godot, usa primero el sistema de atlas del propio motor y recurre a un empaquetador externo solo si necesitas algo que este no hace.

Paso a paso: empaquetar con Free Texture Packer

Free Texture Packer es una aplicación de escritorio (también hay una versión web) que toma una carpeta de imágenes y escribe un atlas. Es una buena opción por defecto para juegos web porque tiene ajustes de exportación para los motores de JavaScript más comunes.

1. Prepara tus fotogramas. Exporta cada fotograma como un PNG independiente con transparencia. Ponles nombres que se ordenen correctamente: run_00.png, run_01.png y así sucesivamente. Los números con ceros a la izquierda importan; sin ellos, run_10 se ordena antes que run_2.
2. Añade la carpeta. Arrastra la carpeta a la aplicación. Los nombres de las subcarpetas suelen pasar a formar parte del nombre del fotograma, lo cual es útil para agrupar (hero/run_00.png).
3. Elige el formato de exportación. Para Phaser 3 elige el ajuste de Phaser 3 o JSON hash. JSON array también funciona; la diferencia se explica más abajo.
4. Configura el padding y el extrude. Empieza con 2 píxeles de padding y 1 píxel de extrude. En la sección de ajustes se explica por qué.
5. Decide sobre el recorte y la rotación. El recorte elimina los bordes transparentes y ahorra espacio. La rotación permite que el empaquetador gire los fotogramas 90 grados para que quepan más. Deja la rotación desactivada, salvo que tu motor admita claramente fotogramas rotados con este formato.
6. Define un tamaño máximo. 2048 por 2048 es un límite seguro para la mayoría de los destinos, incluidos los teléfonos. Si los fotogramas no caben, divídelos en varios atlas en lugar de subir el límite a ciegas.
7. Exporta. Obtienes una imagen y un archivo de datos con el mismo nombre base. Mantenlos juntos.

TexturePacker sigue el mismo flujo: añade sprites, elige un formato de datos de su larga lista de frameworks, ajusta el padding y el recorte, y publica. Algunas opciones avanzadas están marcadas como Pro, y la aplicación te avisa cuando un ajuste elegido requiere una licencia. Para un atlas sencillo de PNG más JSON, el modo gratuito es suficiente.

Exportar desde Aseprite

Si dibujas pixel art en Aseprite, en muchos proyectos puedes prescindir de un empaquetador aparte. Usa File, Export Sprite Sheet. En el cuadro de diálogo eliges la disposición (por filas, por columnas, empaquetada), qué capas y etiquetas incluir, el padding del borde y de la forma, y si quieres recortar. En la pestaña de salida puedes escribir un archivo de datos JSON junto a la imagen, ya sea como hash o como array.

El JSON también incluye tus etiquetas de animación con sus rangos de fotogramas y la duración de cada fotograma que fijaste en la línea de tiempo. Algunos motores y plugins pueden leerlos directamente, lo que te evita escribir a mano los números de fotograma. Cuando trabajas con varios archivos, una configuración habitual es exportar cada personaje desde Aseprite como fotogramas sueltos o como una tira, y luego empaquetarlo todo junto con un empaquetador general para que todo el juego comparta menos texturas.

Los ajustes que de verdad importan

La mayoría de los errores visuales con los atlas proceden de cuatro o cinco ajustes. Dominarlos es la verdadera habilidad.

Padding y extrude

Cuando la GPU muestrea una textura con el filtrado activado, mezcla los píxeles vecinos. En el borde de un fotograma, el vecino puede pertenecer al fotograma siguiente del atlas. El resultado es una fina línea de un color incorrecto en el borde de un sprite, que a menudo solo se nota cuando la cámara se mueve o el sprite se escala. Esto se llama bleeding (sangrado).

El padding añade espacio vacío entre fotogramas para que no haya nada ajeno con lo que mezclarse. El extrude repite hacia fuera la fila exterior de píxeles de cada fotograma, de modo que, si el muestreador llega más allá del borde, recoge el color del propio fotograma. En los tiles que deben quedar pegados unos a otros, el extrude es el ajuste que elimina las costuras visibles. Dos píxeles de padding y uno de extrude son un punto de partida sensato; auméntalos si usas mipmaps o reduces mucho la escala de los sprites.

Recorte

El recorte elimina los bordes transparentes y registra el tamaño original y el desplazamiento en el archivo de datos. Después, el motor coloca el fotograma recortado donde le corresponde. Esto ahorra mucho espacio en personajes con espacio vacío alrededor. La pega: si tu motor o cargador ignora los datos de recorte, las animaciones temblarán porque cada fotograma tiene un tamaño distinto. Phaser, Pixi y los empaquetadores habituales lo gestionan correctamente con los formatos JSON hash y array. Si ves que un sprite tiembla en su sitio, revisa primero el recorte.

Rotación

Permitir que el empaquetador gire los fotogramas 90 grados puede hacer que quepa más en la misma hoja. El motor tiene que devolverlos a su orientación al dibujarlos, y no todos los cargadores lo hacen. Si los fotogramas aparecen de lado, desactiva la rotación. El espacio ahorrado rara vez compensa el esfuerzo de depuración.

Potencia de dos y tamaño máximo

Las GPU de escritorio modernas manejan sin problema las texturas que no son potencia de dos, y WebGL 2 también. Los tamaños que son potencia de dos (512, 1024, 2048, 4096) siguen siendo la opción segura cuando necesitas mipmaps en destinos antiguos, cuando usas formatos de textura comprimidos que los esperan o cuando no estás seguro del hardware. En cuanto al tamaño máximo, 2048 por 2048 se admite casi en todas partes. 4096 por 4096 funciona en la mayoría de los dispositivos actuales, pero en teléfonos de gama baja puede tardar en subirse a la GPU o simplemente ser rechazado. Si tu juego apunta a móviles, mantén los atlas en 2048 y usa varios.

Pixel art y filtrado

El pixel art debe dibujarse con muestreo de vecino más cercano, no con filtrado lineal, o se verá borroso. En Phaser, activa pixelArt: true en la configuración del juego. En Unity, pon el modo de filtro de la textura en Point y desactiva la compresión en las hojas pequeñas. En Godot, establece el filtro de textura en Nearest en el nodo o en los ajustes del proyecto. Con el muestreo de vecino más cercano el sangrado es menos frecuente, pero el padding sigue ayudando cuando los sprites se mueven a posiciones fraccionarias.

Formatos de exportación: JSON hash, JSON array, XML

La imagen casi siempre es un PNG. El archivo de datos es donde los formatos difieren.

• JSON hash almacena los fotogramas como un objeto con el nombre del fotograma como clave: "frames": { "run_00.png": { ... } }. Es fácil de consultar por nombre.
• JSON array almacena los fotogramas como una lista, cada uno con un campo filename. Mantiene un orden garantizado, que algunas herramientas prefieren.
• Los formatos XML, como el estilo Starling / Sparrow, enumeran cada subtextura con atributos x, y, ancho y alto. Phaser puede cargar este estilo con load.atlasXML.

Phaser 3 lee tanto JSON hash como JSON array mediante la misma llamada load.atlas, así que para Phaser la elección apenas importa. Elige uno y mantenlo de forma coherente en todo el proyecto.

Cargar un atlas en Phaser 3

Esta es una escena mínima que carga un atlas, coloca un sprite de él y crea una animación de carrera a partir de fotogramas numerados.

class GameScene extends Phaser.Scene {
  preload() {
    // image and data file exported by the packer
    this.load.atlas('hero', 'assets/hero.png', 'assets/hero.json');
  }

  create() {
    this.anims.create({
      key: 'run',
      frames: this.anims.generateFrameNames('hero', {
        prefix: 'run_',
        start: 0,
        end: 7,
        zeroPad: 2,
        suffix: '.png'
      }),
      frameRate: 12,
      repeat: -1
    });

    const player = this.add.sprite(200, 300, 'hero', 'run_00.png');
    player.play('run');
  }
}

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  pixelArt: true,
  scene: GameScene
};

new Phaser.Game(config);

Los nombres de fotograma de generateFrameNames deben coincidir exactamente con los nombres del JSON, incluida la extensión si el empaquetador la conservó. Abre el JSON una vez y compruébalo; la mayoría de los avisos de "missing frame" se deben a un prefijo o sufijo que no coincide.

Unity Sprite Atlas y Godot AtlasTexture

En Unity, crea un Sprite Atlas desde el menú Create, en 2D, y arrastra carpetas o sprites individuales a su lista de objetos para empaquetarlos. El inspector del atlas tiene padding, una opción para permitir la rotación y otra para el empaquetado ajustado (tight packing). El empaquetado ajustado sigue el contorno del sprite en lugar de su rectángulo y ahorra espacio, pero puede recortar sprites de formas poco habituales, así que revisa el resultado. Tus sprites conservan sus propias referencias en escenas y prefabs; Unity sustituye el atlas al compilar. Asegúrate de que el empaquetado de sprites esté habilitado en los ajustes del editor del proyecto; de lo contrario, no verás el efecto en el modo de juego.

En Godot, un AtlasTexture es un recurso que apunta a una región rectangular de otra textura. Puedes crear uno en el inspector, asignar la hoja grande como su atlas y definir la región. Para personajes animados, el editor SpriteFrames que usa AnimatedSprite2D puede dividir una hoja en una cuadrícula y añadir los fotogramas directamente, lo que suele ser más rápido que crear muchos recursos AtlasTexture a mano. Para los mapas de tiles, el editor de TileSet trabaja a partir de la propia hoja y tiene sus propios ajustes de separación y margen.

Sprites CSS para la web

Para los iconos de un sitio web, un sprite es una sola imagen con todos los iconos y un CSS que muestra la parte correcta. Muchos empaquetadores pueden exportar una hoja de estilos; también puedes escribirla a mano.

.icon {
  width: 32px;
  height: 32px;
  background-image: url('/img/icons.png');
  background-repeat: no-repeat;
}
.icon-cart   { background-position: 0 0; }
.icon-search { background-position: -32px 0; }
.icon-user   { background-position: -64px 0; }

Para pantallas de alta densidad, exporta la hoja al doble de tamaño y fija background-size a las dimensiones originales para que cada icono se vea nítido. Para iconos sencillos de un solo color, un sprite SVG con elementos <symbol> y <use> suele ser mejor opción que un PNG, porque escala sin archivos adicionales.

Errores comunes

• Líneas finas en los bordes de los sprites. Sangrado por el filtrado. Añade padding y extrude, o cambia el pixel art a muestreo de vecino más cercano.
• La animación tiembla en su sitio. Fotogramas recortados cuyo cargador no lee los desplazamientos del recorte, o fotogramas exportados con lienzos de distinto tamaño. Mantén el mismo lienzo en cada animación o asegúrate de que se usen los datos de recorte.
• Los fotogramas aparecen rotados. El empaquetador los rotó y el cargador no los gira de vuelta. Desactiva la rotación.
• El atlas funciona en el escritorio, pero se ve en blanco en un teléfono. La hoja supera el tamaño máximo de textura del dispositivo. Divídela en hojas de 2048.
• Avisos de "Frame missing". Los nombres no coinciden por un prefijo, un sufijo, una subcarpeta o la falta de ceros a la izquierda.
• Reempaquetar lo cambia todo. Las posiciones en la hoja se desplazan cuando añades un fotograma. Carga siempre los fotogramas por nombre, nunca por coordenadas fijas en el código, y el siguiente reempaquetado no romperá nada.
• Un atlas gigante para todo el juego. Agrupar por nivel o por pantalla reduce el uso de memoria, ya que solo cargas lo que necesita la escena actual.

Si vendes paquetes de sprites

Los compradores usan motores y empaquetadores distintos, así que el paquete más útil es el que funciona con todos. Algunos hábitos hacen que un paquete sea más fácil de comprar y de usar:

• Incluye ambas formas. Añade los fotogramas sueltos como archivos PNG separados y un atlas empaquetado con su JSON. Quienes reempaquetan con sus propios ajustes quieren los fotogramas sueltos; quienes quieren soltarlo en el proyecto y empezar a usarlo prefieren el atlas.
• Indica los datos en la ficha del producto. Tamaño del fotograma en píxeles, número de fotogramas por animación, padding y extrude usados en el atlas, si los fotogramas están recortados, el formato de datos (JSON hash, JSON array, XML) y la velocidad de fotogramas para la que lo diseñaste.
• Mantén una nomenclatura predecible. Con ceros a la izquierda, en minúsculas y con un prefijo por animación. Los compradores escribirán código basado en esos nombres.
• Incluye una vista previa. Un GIF animado o un vídeo breve de cada animación responde a la pregunta principal antes de la compra.
• Aclara la licencia. Indica si el paquete puede usarse en juegos comerciales.

Si quieres ver cómo presentan sus paquetes otros creadores, o poner a la venta los tuyos, la categoría de sprites 2D de Getly es un lugar donde se venden paquetes de sprites.

Empaquetar una hoja de sprites lleva unos minutos cuando los ajustes están claros: nombres de fotograma coherentes, algo de padding y extrude, un uso cuidadoso del recorte, nada de rotación salvo que sepas que el cargador la admite, y un tamaño de atlas que acepte el hardware de destino. Si aciertas con todo eso, el atlas pasa a un segundo plano, que es justo lo que debe hacer.