Sprite sheet json file

[FNH]

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?

[ivan.popelyshev]

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

 

[nmiguelmoura]

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

 

[ivan.popelyshev]

There are also http://renderhjs.net/shoebox/ and https://github.com/twolfson/gulp.spritesmith , both are free.

[nmiguelmoura]

Hi Ivan, didn't knew these, thanks. Do you know any similar for audio (free or paid)?

Thanks

[FNH]

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

[Hadi]

Hi all

Check this free texture packer 

http://free-tex-packer.com/download/

[ggojedap]

On 3/26/2020 at 8:28 AM, Hadi said:

Hi all

Check this free texture packer 

http://free-tex-packer.com/download/

Great tool. Thanks for the advice!