Sign in to follow this  
oliversb

How to write spritesheets with JSON

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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    }  ]}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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    }  ]}

 

Share this post


Link to post
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.

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

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.