Accessing Texture Atlas Metadata
Demonstrates how to load a texture atlas using an inline JSON object and retrieve its custom metadata, such as version and image format, via the texture's customData property.
800 × 600
class Example extends Phaser.Scene
{
atlasJSON = {
frames: [
{
filename: '128x128',
frame: {x: 893,y: 342,w: 128,h: 128},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 128,h: 128},
sourceSize: {w: 128,h: 128},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'advanced_wars_land',
frame: {x: 132,y: 641,w: 320,h: 48},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 320,h: 48},
sourceSize: {w: 320,h: 48},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'contra2',
frame: {x: 2,y: 316,w: 142,h: 222},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 142,h: 222},
sourceSize: {w: 142,h: 222},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'contra3',
frame: {x: 645,y: 197,w: 246,h: 201},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 246,h: 201},
sourceSize: {w: 246,h: 201},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'diamonds32x5',
frame: {x: 585,y: 596,w: 318,h: 49},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 1,y: 15,w: 318,h: 49},
sourceSize: {w: 320,h: 64},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'exocet_spaceman',
frame: {x: 146,y: 316,w: 153,h: 175},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 153,h: 175},
sourceSize: {w: 153,h: 175},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'explosion',
frame: {x: 2,y: 2,w: 319,h: 312},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 1,y: 6,w: 319,h: 312},
sourceSize: {w: 320,h: 320},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'helix',
frame: {x: 724,y: 472,w: 221,h: 28},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 6,y: 0,w: 221,h: 28},
sourceSize: {w: 233,h: 30},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'knight3',
frame: {x: 323,y: 204,w: 320,h: 131},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 0,y: 0,w: 320,h: 131},
sourceSize: {w: 320,h: 200},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'lance-overdose-loader-eye',
frame: {x: 2,y: 540,w: 128,h: 128},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 128,h: 128},
sourceSize: {w: 128,h: 128},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'mask-test',
frame: {x: 323,y: 2,w: 320,h: 200},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 320,h: 200},
sourceSize: {w: 320,h: 200},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'metalslug_monster39x40',
frame: {x: 436,y: 337,w: 156,h: 160},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 156,h: 160},
sourceSize: {w: 156,h: 160},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'pacman_by_oz_28x28',
frame: {x: 454,y: 647,w: 308,h: 28},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 308,h: 28},
sourceSize: {w: 308,h: 28},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'parsec',
frame: {x: 281,y: 527,w: 302,h: 80},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 302,h: 80},
sourceSize: {w: 302,h: 80},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'profil-sad-plush',
frame: {x: 146,y: 493,w: 133,h: 142},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 133,h: 142},
sourceSize: {w: 133,h: 142},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'saw',
frame: {x: 594,y: 400,w: 128,h: 128},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 128,h: 128},
sourceSize: {w: 128,h: 128},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'shocktroopers-lulu2',
frame: {x: 301,y: 337,w: 133,h: 188},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 133,h: 188},
sourceSize: {w: 133,h: 188},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'snowflakes_large',
frame: {x: 585,y: 530,w: 379,h: 64},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 2,y: 0,w: 379,h: 64},
sourceSize: {w: 384,h: 64},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'spaceman',
frame: {x: 724,y: 502,w: 225,h: 16},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 15,y: 0,w: 225,h: 16},
sourceSize: {w: 240,h: 16},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'steelpp-font',
frame: {x: 645,y: 2,w: 320,h: 193},
rotated: false,
trimmed: true,
spriteSourceSize: {x: 0,y: 0,w: 320,h: 193},
sourceSize: {w: 320,h: 200},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'treasure_trap',
frame: {x: 893,y: 197,w: 127,h: 143},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 127,h: 143},
sourceSize: {w: 127,h: 143},
pivot: {x: 0.5,y: 0.5}
},
{
filename: 'vu',
frame: {x: 281,y: 609,w: 300,h: 30},
rotated: false,
trimmed: false,
spriteSourceSize: {x: 0,y: 0,w: 300,h: 30},
sourceSize: {w: 300,h: 30},
pivot: {x: 0.5,y: 0.5}
} ],
meta: {
app: 'http://www.codeandweb.com/texturepacker',
version: '1.0',
image: 'megaset-3.png',
format: 'RGBA8888',
size: {w: 1023,h: 691},
scale: '1',
smartupdate: '$TexturePacker:SmartUpdate:5e8f90752cfd57d3adfb39bcd3eef1b6:87d98cec6fa616080f731b87726d6a1e:b55588eba103b49b35a0a59665ed84fd$'
}
};
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.atlas('megaset', 'assets/atlas/megaset-3.png', this.atlasJSON);
}
create ()
{
const atlasTexture = this.textures.get('megaset');
const frames = atlasTexture.getFrameNames();
for (let i = 0; i < frames.length; i++)
{
const x = Phaser.Math.Between(0, 800);
const y = Phaser.Math.Between(100, 500);
this.add.image(x, y, 'megaset', frames[i]).setOrigin(0.5, 0);
}
// We can access any extra data from the texture atlas json via the Texture.customData property:
const str = [
`app: ${atlasTexture.customData.meta.app}`,
`version: ${atlasTexture.customData.meta.version}`,
`image: ${atlasTexture.customData.meta.image}`,
`format: ${atlasTexture.customData.meta.format}`,
`scale: ${atlasTexture.customData.meta.scale}`
];
this.add.text(10, 10, str, { font: '16px Courier', fill: '#00ff00' });
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'game-container',
scene: Example
};
const game = new Phaser.Game(config);
More in Texture Atlas Json11 examples
Atlas with Normal Map from Configuration ObjectDemonstrates how to load a Texture Atlas and its associated Normal Map using a single configuration object, enabling dynamic lighting for all frames within the atlas.
Get Atlas Custom Frame DataDemonstrates how to access and use custom data fields defined within a Texture Atlas JSON, such as using custom properties to set sprite tints.
Load Atlas with JSON ObjectDemonstrates how to load a Texture Packer atlas by passing a local JSON object directly to the loader instead of using an external file.
Load Atlas With Local JSONThis example demonstrates how to load a Texture Atlas by passing a local JavaScript object as the frame data instead of loading an external JSON file.