Loading TexturePacker sprite atlas

[joseasv]

I can't seem to load a sprite atlas created by TexturePacker using JSON(Hash) data format with the Trim sprite names option activated. I choose this format because is the most similar to the texture atlas found in the phaser-boilerplate demo (https://github.com/goldfire/phaser-boilerplate/blob/master/src/assets/sprites/textures.json).

Following the phaser-boilerplate demo I have mi atlas.png and atlas.json files in the assets/sprites folder and the string "atlas.png" in the sprites array of the AssetManifest object.

The errors I get are: Phaser.AnimationParser.JSONDataHash: Invalid Texture Atlas JSON given, missing 'frames' object ./dist/95cfb517fde6e8c353c4115beda802af.json

And in my webpack file I have the rules: rules: [ ..., { test: /\.json$/, use: 'file-loader', }, ... ]

I can get to load images just fine.

[joseasv]

Ok, reading through the code I made the following fixes:

• In the AssetManifest I added the image file in the images array and the json file in the sprites array

const AssetManifest = {
  images: [
    ...,
    'atlas.png'
  ],
  sprites: [
    'atlas.json',
  ]
};
export default AssetManifest;

• Installed json-loader and change the webpack.config to load json with json-loader. I couldn't get this to work with file-loader

  rules: [{
    ...
    {
      test: /\.json$/,
      use: 'json-loader',
    },
   ...
  ]
  },

Now I can load sprite atlases made with TexturePack.

[goldfire]

It looks like your file-loader config may have been wrong. We use file-loader with TexturePacker atlas files with no issues:

{
  test: /\.(png|jpg|gif|ico|svg|pvr|pkm|wav|mp3|webm)$/,
  use: ['file-loader?name=assets/[name].[ext]?[hash]'],
},

[joseasv]

You are right. Using the rule you posted along file-loader solves everything. Thanks and sorry for bothering you.

[goldfire]

No problem! I should probably update the readme to make it more clear.