Guía de Formatos de Exportación de Sprite Sheet
El sprite sheet en sí es solo un PNG. El verdadero poder proviene del archivo de metadatos que le dice a tu motor de juego dónde se encuentra cada frame y cómo llamarlo. Si eliges el formato incorrecto, obtienes desajuste de coordenadas, errores de nombre de frame o necesitas reescribir analizadores manualmente. Esta guía te muestra exactamente qué formato coincide con qué motor y cómo funciona cada estructura.
Por Qué Importa el Formato
Tu sprite sheet exportado ZIP contiene dos archivos: la imagen PNG y un archivo de metadatos. Cada motor espera metadatos en estructura diferente. Algunos esperan nombres de frames como claves de diccionario, otros como arrays ordenados. Algunos necesitan datos de recorte anidados, otros los ignoran. Si eliges el formato de exportación incorrecto, tu motor falla al cargar o requiere trabajo de análisis manual para corregir. La buena noticia es que Sprite Sheet Maker soporta todos los formatos principales, por lo que puedes exportar una vez y cambiar motores sin volver a empaquetar.
El archivo de imagen es universal
El PNG del sprite sheet es el mismo independientemente del formato de exportación. Obtienes una imagen de alta calidad con todos los frames organizados en tu diseño de cuadrícula o inteligente elegido.
Los metadatos determinan la compatibilidad
El archivo acompañante contiene coordenadas de frame (x, y, ancho, alto), nombres de frame y propiedades opcionales como recortado o rotado. Esto es lo que diferencia los formatos.
Mapa de compatibilidad de formatos
Formato JSON Hash
El formato JSON Hash usa nombres de frames como claves de objeto. Este es el estándar para Phaser 3 y funciona bien con motores que buscan búsquedas directas por nombre. Cuando exportas JSON Hash, obtienes un diccionario donde cada clave es el nombre de archivo del frame (sin extensión) y el valor contiene coordenadas de rectángulo, estado de recorte y tamaño de fuente del sprite.
Estructura
Cada frame se almacena como una clave de nivel superior en el objeto JSON. El valor incluye posición x, y dentro del sprite sheet, ancho, alto y bandera opcional isTrimmed.
Mejor para Phaser
El cargador de Phaser 3 espera formato JSON Hash por defecto. Suelta ambos PNG y JSON en tu carpeta de assets, luego carga con this.scene.load.atlas('key', 'image.png', 'data.json'). Phaser maneja el resto.
Acceso rápido a frames
El formato Hash proporciona búsqueda O(1) por nombre de frame. Cuando tu código conoce el nombre exacto del frame (idle_0001, walk_left_0005), accedes directamente sin iterar a través de un array.
Formato JSON Array
El formato JSON Array almacena frames como una lista secuencial. Pixi.js y otros motores prefieren arrays ordenados cuando quieren acceder a frames por índice o cuando construyen su propio mapeo de nombres de frames internamente.
Estructura
Los frames se almacenan en un array bajo la clave frames. Cada elemento del array contiene los mismos datos de rectángulo más la cadena de nombre de archivo. El orden coincide con tu secuencia de frames subida o generada.
Mejor para Pixi.js
Pixi.js funciona naturalmente con formato JSON Array. Después de cargar el spritesheet con PIXI.Spritesheet.from(), referencias frames por cadena de nombre igual que con JSON Hash, pero el analizador está optimizado para estructura de array.
Acceso basado en índice
Aunque todavía puedes usar nombres de frames, el formato de array te da un ordenamiento predecible. Esto ayuda cuando tu lógica de juego itera a través de frames secuencialmente (animaciones con orden de paso fijo).
Formato XML TextureAtlas
XML TextureAtlas es un estándar de TexturePacker y funciona nativamente con Unity y Godot. Almacena frames como elementos SubTexture dentro de un elemento raíz TextureAtlas. Unity importa esto automáticamente cuando colocas tanto PNG como XML en tu carpeta Resources.
Estructura
La raíz XML es TextureAtlas con atributo imagePath. Cada SubTexture tiene atributos name, x, y, width, height. Opcionalmente incluye frameX, frameY, frameWidth, frameHeight para datos de origen sin recortar.
Mejor para Unity
El editor de sprites 2D de Unity espera formato XML TextureAtlas. Importa el PNG, Unity encuentra automáticamente el XML, y obtienes segmentos de sprite individuales nombrados correctamente. No se necesita analizador personalizado.
Mejor para Godot
El AtlasTexture de Godot 4 usa formato XML. Referencias el XML en un nodo AtlasTexture, y Godot carga todos los SubTextures como frames nombrados. AnimatedSprite2D luego reproduce esos como animaciones.
Integración nativa del motor
Debido a que XML TextureAtlas es un estándar de la industria, tanto Unity como Godot proporcionan asistentes de importación que generan automáticamente assets de sprite. No escribes código de análisis XML.
Formato CSS Sprites
El formato CSS sprites genera una hoja de estilos con reglas de background-position para cada frame. Esto es ideal para animaciones web, íconos de UI y juegos basados en CSS donde no necesitas un motor de juego en absoluto.
Estructura
El archivo CSS define una clase para cada nombre de frame con background-image establecido en la URL de tu sprite sheet y background-position establecido en el desplazamiento de píxel correcto. Los valores negativos desplazan la imagen de fondo a la izquierda o hacia arriba.
Mejor para animaciones web
Usa CSS sprites para estados hover, animaciones de botones o animaciones de personajes simples en proyectos web puros. Añade la clase a un elemento, luego alterna o anima background-position con transiciones CSS.
No se requiere JavaScript
La reproducción básica de sprite funciona solo con HTML y CSS. No necesitas cargar un sprite sheet vía JavaScript o analizar JSON. Solo aplica la clase de frame y opcionalmente anima la posición.
Flujo de selección de formato
Problemas Comunes de Formato
La mayoría de los errores de importación de sprite sheet son desajustes de formato. Tu motor espera una estructura pero exportaste otra. Estas son las señales de advertencia y soluciones.
Error de nombre de frame no encontrado
Esto sucede cuando tu código referencia el frame walk_left_0001 pero el JSON usa walkLeft0001. Verifica tu archivo de metadatos exportado y actualiza el nombre de frame en código o regenera el sprite sheet con la convención de nomenclatura correcta.
Las coordenadas no coinciden con lo visual
Si tu sprite aparece desplazado o recortado, puede que hayas exportado JSON pero lo cargaste como XML (o viceversa) en un motor que por defecto usa un analizador diferente. Asegúrate de que tu código de importación coincida con el formato de exportación.
Las animaciones reproducen frames incorrectos
Cuando los frames se reproducen fuera de orden, el formato de exportación puede no estar preservando tu secuencia deseada. Verifica si tu motor espera formato hash donde el orden no está garantizado, luego cambia a formato de array si tu juego depende del acceso secuencial a frames.
El motor no puede cargar metadatos
Unity o Godot fallando al cargar generalmente significa archivo XML faltante o estructura XML incorrecta. Verifica que tu exportación fue XML TextureAtlas y que tanto PNG como XML comparten el mismo nombre de archivo base.
FAQ de Formatos de Exportación de Sprite Sheet
Exporta en el Formato Correcto
Crea tu sprite sheet una vez en Sprite Sheet Maker. Selecciona el formato de exportación que coincida con tu motor de juego, e importa directamente sin escribir analizadores personalizados o corregir desajustes de coordenadas.
Última actualización: 27 abr 2026 · Mantenido por Sprite Sheet Maker Team · v2026.4