Loading multiple json files generated with TexturePacker (assets images)

[spuglab]

Hello All,

 

I am starting with js and Pixi so please excuse me if there are errors in my description.

 

I am using TexturePacker for my animations. All my images do not fit in a 2048 x 2048 image

so I have multiple json files with their respective images (one image for each json file).

 

I am loading the json / image with AssetLoader based on this game:

http://www.emanueleferonato.com/2014/02/26/complete-html5-concentration-game-made-with-pixi-js/

 

 

For example:

 

var assetsToLoad = [ 'ani1.json', 'ani2.json' ];

 

and then:

 

var loader = new PIXI.AssetLoader(assetsToLoad);

loader.onComplete = onAssetsLoaded;

loader.load();

 

Then when I need the image I use (for example to load the first image in the first json file):

 

var icono = new PIXI.Sprite.fromFrame(0);

 

 

However I notice that when i load the second json the images are rewriten so the first image of the

second json file overrides the first image of the first json loaded.

 

I was expecting that loading two json files or more will append the images to the frame id list.

So if the first json has 50 images the first image of the second json file will have frameid = 50 and then 51, 52, etc..

 

I found that in PIXI.JsonLoader.prototype.onJSONLoaded

there is the following code:

 

        for (var i in frameData)

        {

       .....

                PIXI.TextureCache = new PIXI.Texture(this.texture, textureSize, crop, trim); 

       ......

       }

 

So this means that every json file loaded will start from 0 the frame id (TextureCache index) since i starts in 0

and will overwrite the last ones loaded.

 

A quick fix (but maybe not very clean) was adding a variable to check the frame id counter:

 

PIXI.TextureCache = {};

var cacheSize = 0;

 

and then:

 

PIXI.TextureCache[cacheSize++] = new PIXI.Texture(this.texture, textureSize, crop, trim);

 

Is there a correct way of loading multiple json files without modifying pixi source?

I tried also loading the json files with PIXI.AtlasLoader instead of PIXI.AssetLoader but was not able to.

 

 

 

Thank you

 

Best regards

 

 

 

 

 

 

 

 

 

 

 

[patate]

This is the correct way to load multiple files. 

 

You can avoid your hack by renaming every image of your animation as follow "my_animation_0.png", "my_animation_1.png" ... "my_animation_50.png". Next, go to your texturePacker, clean your project, import everything and publish.

 

Now use your sprite like that:

var icono = new PIXI.Sprite.fromFrame("my_animation_0.png");

or if you check "trim sprite name" into texturePacker:

var icono = new PIXI.Sprite.fromFrame("my_animation_0");

[spuglab]

I tried your suggestion but then i got:

 

Uncaught Error: The frameId "my_animation_0" does not exist in the texture cache[object Object]

 

I tough that PIXI.Sprite.fromFrame expects a frame number and not a frame name.

 

 

I loaded the json files as in my post. Do I need to do something different? 

 

If I do

var icono = new PIXI.Sprite.fromFrame(0);

It works correctly.

 

My first json file starts with:

 

{"frames": [

 

{

"filename": "my_animation_0",

"frame": {"x":2,"y":2,"w":247,"h":146},

"rotated": false,

"trimmed": false,

"spriteSourceSize": {"x":0,"y":0,"w":247,"h":146},

"sourceSize": {"w":247,"h":146},

"pivot": {"x":0.5,"y":0.5}

},

{

"filename": "my_animation_1",

"frame": {"x":251,"y":2,"w":247,"h":146},

"rotated": false,

"trimmed": false,

"spriteSourceSize": {"x":0,"y":0,"w":247,"h":146},

"sourceSize": {"w":247,"h":146},

"pivot": {"x":0.5,"y":0.5}

},

 

... etc

 

Thanks

 

Best regards

[spuglab]

I noticed my error.

 

Using TexturePacker I was using

 

JSON (Array)

 

Comparing my json file with the one in example 2 I noticed that I should use:

 

JSON (Hash)

 

 

After using JSON (Hash) I can use the name of the frame without problems

with PIXI.Sprite.fromFrame.

 

 

It would be nice for new people like me if the documentation says after:

 

"To generate the data you can use http://www.codeandweb.com/texturepacker and publish in the 'JSON' format."

 

NOTES:  

1) Use JSON (Hash) instead of JSON (Array)

2) Uncheck Allow rotation in Settings / Layout

 

 

Thanks again

 

Best regards

[patate]

Pixi does not really support this json data. In fact you have to ask for a JSON (Hash) project into TexturePacker; not the JSON (Array) as you did.

 

A valid export should look like that

{"frames": {"japan-back-1":{	"frame": {"x":506,"y":534,"w":221,"h":354},	"rotated": false,	"trimmed": true,	"spriteSourceSize": {"x":40,"y":99,"w":221,"h":354},	"sourceSize": {"w":435,"h":700},	"pivot": {"x":0.5,"y":0.5}},"japan-back-1-locked":{	"frame": {"x":233,"y":817,"w":221,"h":354},	"rotated": false,	"trimmed": true,	"spriteSourceSize": {"x":40,"y":99,"w":221,"h":354},	"sourceSize": {"w":435,"h":700},	"pivot": {"x":0.5,"y":0.5}},// etc...

Edit: nevermind my english skill is too slow

Edited December 15, 2014 by patate

[msha]

BTW, here is a command to generate a pixi-compatible spritesheet from the command line: 

TexturePacker  --png-opt-level "0" --algorithm "Basic" --disable-rotation --trim-mode "None"  --format "json" --data www/img/spritesheet.json   --sheet www/img/spritesheet.png images/to-pack

this packs all images inside images/to-pack/ and puts the spritesheet in www/img/.