Saltar al contenido

Empaquetador de atlas de sprites

Suelta una carpeta de sprites y obtén una textura bien empaquetada, con un archivo de datos que le dice a tu motor dónde está cada sprite. Nada sale de tu dispositivo.

Se crea en tu dispositivo. Tus imágenes nunca se suben.

  • Nunca se suben
  • PNG y archivo de datos
  • Una carpeta entera a la vez

Cómo funciona

Cómo empaquetar sprites en un atlas

  1. Paso 1: Añade tus sprites

    Elige, suelta o pega las imágenes, o suelta la carpeta donde están. Pueden ser todas de tamaños distintos.

  2. Paso 2: Elige el empaquetado

    Ajusta la separación, recorta los bordes vacíos y elige el archivo de datos que lee tu motor. La hoja se actualiza sobre la marcha.

  3. Paso 3: Descarga el ZIP

    Contiene el PNG del atlas y el archivo que indica dónde está cada sprite.

Empaquetador de atlas de sprites

Una textura en lugar de cien archivos

  • Empaquetado ajustado

    Sprites de cualquier tamaño encajan con poco espacio desperdiciado, sin rotarlos ni redimensionarlos nunca.

  • Recorta los bordes vacíos

    El espacio vacío alrededor de cada sprite se omite y se registra, así el atlas es más pequeño y nada se mueve.

  • Datos que lee tu motor

    JSON para Phaser, PixiJS e importadores de motores, o un .meta de Unity que corta la textura por ti.

  • Nunca se suben

    Todo ocurre en tu navegador, así que tus imágenes se quedan en tu dispositivo.

En detalle

Los atlas de sprites en la práctica

Para qué sirve un atlas

Cada imagen separada que dibuja un juego le cuesta a la tarjeta gráfica un cambio de textura. Reunir muchos sprites en una sola imagen, el atlas, permite al motor dibujarlos juntos, lo que funciona más rápido y carga antes que cien archivos pequeños.

El empaquetador encaja sprites de distintos tamaños como un rompecabezas, empezando por los mayores, y anota dónde ha quedado cada uno. Los sprites nunca se rotan ni se escalan, así que se ven exactamente como los dibujaste.

Ajustes que importan

  • Separación: 1 o 2 píxeles vacíos entre sprites evitan que el borde de uno se vea en su vecino cuando la textura se escala o se filtra.
  • Recortar bordes vacíos: deja fuera el borde vacío de cada sprite. El archivo de datos registra cuánto se quitó, así el sprite sigue en su sitio.
  • Tamaño en potencia de dos: redondea la hoja a 256, 512, 1024, etc. Los motores modernos rara vez lo necesitan; algunos destinos móviles y web aún lo prefieren.
  • Nombres: cada sprite toma el nombre de su archivo, sin la extensión, así que nombra los archivos como quieras referirte a ellos en el código.

Archivos de datos

JSON, fotogramas por nombre es el formato que popularizó TexturePacker. Phaser y PixiJS lo cargan directamente, y hay importadores para Godot, GameMaker y casi todos los demás motores. JSON, lista de fotogramas contiene los mismos datos como lista ordenada.

Godot (.tres) escribe un archivo AtlasTexture por sprite, con su mismo nombre. Cópialos al proyecto en la misma carpeta que el PNG y usa cualquiera como textura, por ejemplo en un Sprite2D. No hace falta ningún plugin importador, y los sprites recortados conservan su tamaño original.

Unity (.png.meta) es el archivo de importación propio de Unity. Cópialo al proyecto junto al PNG y la textura llega cortada en sprites con nombre, con filtrado por puntos y sin compresión, como necesita el pixel art.

Empaquetador de atlas de sprites

Preguntas frecuentes

¿Mis imágenes se suben a algún sitio?

No. Todo funciona en tu navegador, en tu propio dispositivo. Tus imágenes nunca se envían a Moriqa ni a nadie más, y no se conserva nada después de cerrar la página.

¿Cómo hago un atlas de sprites?

Añade tus sprites, elige una separación y un archivo de datos, y descarga el ZIP. Contiene la imagen del atlas y sus datos.

¿Qué tamaño puede tener el atlas?

Hasta 4096 × 4096 píxeles, un tamaño que carga cualquier dispositivo actual, y hasta 1000 sprites. Si los sprites no caben, la herramienta lo indica.

¿En qué se diferencia de una hoja de sprites?

Una hoja de sprites suele ser una cuadrícula de fotogramas iguales de una animación. Un atlas empaqueta imágenes de cualquier tamaño donde quepan, y necesita su archivo de datos para leerse.

¿Por qué no se rotan mis sprites para ahorrar espacio?

Los sprites rotados se empaquetan algo más ajustados, pero muchos importadores no los admiten. Dejar todos los sprites derechos hace que el atlas se pueda leer en cualquier parte.

¿Puedo empaquetar los fotogramas de una animación?

Sí. Nombra los archivos en orden, como walk_01 y walk_02, y conservan esos nombres en el archivo de datos. Para una cuadrícula sencilla de fotogramas iguales, usa Hoja de sprites a GIF y guarda como hoja de sprites.

¿Aún estás dibujando los sprites?

Abre el editor de pixel art de Moriqa para dibujarlos y animarlos, y luego exporta hojas de sprites para Godot, Unity y GameMaker. Gratis en tu navegador.