Jump to content


Recommended Posts



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!

Link to comment
Share on other sites

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';
Link to comment
Share on other sites

  • 2 months later...
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...