Search code examples
javascripteaseljstexturepacker

If the CreateJS library supports the JSON output formats of Texture Packer

I'd been using CreateJS for a little time. I got trouble to load an image which is made by Texture Packer, and I got the JSON file like this: 

{"frames": [

{
"filename": "aim_dot",
"frame": {"x":118,"y":4,"w":76,"h":76},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":76,"h":76},
"sourceSize": {"w":76,"h":76}
},
{
"filename": "boundary",
"frame": {"x":4,"y":385,"w":250,"h":100},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":250,"h":100},
"sourceSize": {"w":250,"h":100}
}]

}

When a Bitmap represents an Image like this:

 var bitmap = new createjs.Bitmap("imagePath.jpg");

But if the image is an image sprites,could i use the bitmap like css sprite?

Solution

  • You should take a look at the SpriteSheet-Class: http://www.createjs.com/Docs/EaselJS/classes/SpriteSheet.html

    In TexturePacker you can chose EaselJS as a output format, so the JSON can be used for EaselJS SpriteSheet without further modifications. Another good way to generate EaselJS SpriteSheets would be spritesheet.js (https://www.npmjs.com/package/spritesheet-js-monkiki-fork).