How to write spritesheets with JSON

[oliversb]

I am using this code:

game.load.atlasJSONArray(name, 'image.png', this.path + 'image.json');

 

I have a spritesheet with varying sizes and positions (apart from the Y position is at 0 all across the spritesheet).

 

What would be the appriopriate way to write this JSON. Would it be something like this:

{"frames": [

 

{

"frame": {"x":2,"y":0,"w":1920,"h":1080}

},

{,

"frame": {"x":1924,"y":0,"w":144,"h":90}

}]

}

}

 

Please let me know of any problems with this JSON file and if I am going about the right way of doing this. Thanks

[markjsb]

I wouldn't want to handwrite something like that. Personally I used Tiled (a free, open source tile map editor) It just exports the JSON file and is a nice visual editor.

 

http://www.mapeditor.org/

 

I realize there maybe a reason you want to hand write it!!

 

Hope that helps.

[sleekdigital]

I'm not sure Tiled is the tool your looking for in this case.  You want texturepacker...

 

http://www.codeandweb.com/texturepacker

[oliversb]

I am writing my own game engine with a basic texture packing algorithm so essentially I am creating my own texture packing system which means it won't be handwritten. Please tell me if my JSON file looks right. I am not handwriting but I am coding system which will generate this for me.

 

THANKS

[markjsb]

Ah sorry I misinterpreted what you meant ! Perhaps another forum might be appropriate as this is for Phaser

[oliversb]

Ah sorry I misinterpreted what you meant ! Perhaps another forum might be appropriate as this is for Phaser

No worries. I don't know which forum to go to. I should specified why I wanted to know this. I was hoping somebody on this forum might know how this is achieved.#

 

Thanks

[PAEz]

No idea bout ya system or what not, but that json is broken, here it is fixed.....

{  "frames": [{      "frame": {        "x": 2,        "y": 0,        "w": 1920,        "h": 1080      }    }, {      "frame": {        "x": 1924,        "y": 0,        "w": 144,        "h": 90      }    }  ]}

....can you spot your two errors?

 

But then, why bother with the "frame"?......

{  "frames": [{      "x": 2,      "y": 0,      "w": 1920,      "h": 1080    }, {      "x": 1924,      "y": 0,      "w": 144,      "h": 90    }  ]}

[sleekdigital]

It's still pretty unclear what you're trying to do.  You say you are using... "game.load.atlasJSONArray(name, 'image.png', this.path + 'image.json');" which is Phaser code, then later you say "I am writing my own game engine".  If you are using Phaser, try your JSON and see if it works.  You can also compare your JSON to the output from texturepacker.

 

I think this is a valid example of what you are looking for...

https://github.com/photonstorm/phaser-examples/blob/master/examples/assets/sprites/atlas_json_array_trim.json

[oliversb]

Thanks everybody. Got it working for one image. I am sure it is a syntax error as PAEz has stated. I compared mine to TexturePacker JSONs. I was just checking that everything was right. I don't want anything to go wrong and I was not sure what might end up making my game broken in some way.

[oliversb]

PAEz, your fixed version seems to work perfect. But your changes with the idea of not define each frame with 'frame' does not seem to work. Thanks

 

 

No idea bout ya system or what not, but that json is broken, here it is fixed.....

{  "frames": [{      "frame": {        "x": 2,        "y": 0,        "w": 1920,        "h": 1080      }    }, {      "frame": {        "x": 1924,        "y": 0,        "w": 144,        "h": 90      }    }  ]}

....can you spot your two errors?

 

But then, why bother with the "frame"?......

{  "frames": [{      "x": 2,      "y": 0,      "w": 1920,      "h": 1080    }, {      "x": 1924,      "y": 0,      "w": 144,      "h": 90    }  ]}

 

[PAEz]

In the future if all you want to know is if the json is valid then run it through this....

http://jsonlint.com/

....I forgot all about that before.

Me, I just put it in an editor and use jsbeautify to restructure it and then youll see the errors real quick.

[oliversb]

In the future if all you want to know is if the json is valid then run it through this....

http://jsonlint.com/

....I forgot all about that before.

Me, I just put it in an editor and use jsbeautify to restructure it and then youll see the errors real quick.

Thanks. Sorted.