Jump to content

Sprite sheet json file


FNH
 Share

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?

Link to comment
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');
}

 

Link to comment
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"
}}

 

Link to comment
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 :)

Link to comment
Share on other sites

  • 4 years later...
  • 2 weeks later...

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...