FNH

Sprite sheet json file

Recommended Posts

I'm trying to create a six frame movie. I'm at a loss for what the related sprite sheet json file should have in it. I keep seeing example code for loading the json file but not a hint for what needs to be in the file. Any good resources/examples about?

Share this post


Link to post
Share on other sites
var loader = PIXI.loader;
loader.add('sheet', 'myatlas.json'); //file has two frames: foo.png and bar.png
loader.load(init);

function init() {
    var sheet = loader.resources.sheet;
    // correct way
    var spr = new Sprite(sheet.textures['foo.png'];
    // deprecated
    var spr2 = Sprite.fromImage('bar.png');
}

 

Share this post


Link to post
Share on other sites

Hi!

You want to know what to put in the json file right?

I use texture packer (https://www.codeandweb.com/texturepacker). This creates the spriteSheet and the json too and is compatible with pixi.

Give it a try, i think there is a free option there.

Here is an example of json generated with texture packer that works with pix:

{"frames": {

"frame00":
{
    "frame": {"x":1946,"y":2,"w":80,"h":306},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":80,"h":306},
    "sourceSize": {"w":80,"h":306}
},
"frame01":
{
    "frame": {"x":1636,"y":178,"w":284,"h":42},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":284,"h":42},
    "sourceSize": {"w":284,"h":42}
},
"meta": {
    "app": "http://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "atlas.png",
    "format": "RGBA8888",
    "size": {"w":2048,"h":512},
    "scale": "1"
}}

 

Share this post


Link to post
Share on other sites

Yeah, that's what I needed. I didn't know what had to go in that json. It makes sense now I can see one.

I tried TexturePacker ... hmmm, the free version is crippled, not limited, actually crippled. Even a two frame animation gets overwritten with "buy me" logos.

I'll look into the other tools mentioned.  Thanks folks :)

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

  • Recently Browsing   0 members

    No registered users viewing this page.