game atlas

[Scroll3]

Hi,

 

I have an image with all my sprites and tiles of a game and I've packed it into a single picture with texture Packer. Now I want to read the json created by texturepacker and use the data with Phaser.

I load the atlas with: game.load.atlas('game', 'assets/my_atlas.png', null, my_atlas);

 

my_atlas is a var with the content of the json file.

 

Inside the atlas I have a background, a tile ground, animated character... I don't know how to use them.

 

Thank you!

[Nick]

Make sure you select JSON (array) as the output type in Texture Packer. Then, to display an individual image you use the frameName property and set it to the filename of the image that was imported to Texture Packer. e.g.

// Inside loadgame.load.atlas( 'game', 'assets/my_atlas.png', 'path/to/my_atlas.json' );// Inside createvar background = game.add.sprite( 0, 0, 'game' );background.frameName = 'background.png';

[Michel (Starnut)]

Also make sure to look through the examples at http://examples.phaser.io/ and the docs at http://docs.phaser.io/  in case you haven't already. There's quite some info there how to work with animations and images from atlases.

[jouniii]

Just a tip for others. Examples also show how to use object data, but I had trouble getting it working until I noticed it's actually not the url parameter:

 

 

game.load.atlas('name', 'texture.png', null /* use local data */, localAtlasData, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

Also note the use of TEXTURE_ATLAS_JSON_HASH. This allows you to use TexturePacker JSONHash format and query frames by name. Especially good if you are using atlas for other uses than animations. The names will be the filenames put in to the atlas. To make it more practical, I also made a grunt task (with grunt-contrib-concat) to pre-process the TexturePacker generated JSON files into JS files which can be easily included into project for minification and used as local objects.