Jump to content

Loading multiple json files generated with TexturePacker (assets images)


Recommended Posts

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:




For example:


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


and then:


var loader = new PIXI.AssetLoader(assetsToLoad);
loader.onComplete = onAssetsLoaded;
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




Link to comment
Share on other sites

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

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




Best regards

Link to comment
Share on other sites

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."



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

2) Uncheck Allow rotation in Settings / Layout



Thanks again


Best regards

Link to comment
Share on other sites

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 by patate
Link to comment
Share on other sites

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/.

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...