PIXI.loaders.Loader with json

[Fovi]

Hi, i trying to find out in what format json spritesheet should be loaded. And how to do it properly.

I have seen tons of examples but all on old version of pixi. In documentation i found function, but there is nothing about structure of json.

Can anyone show me valid spritesheet json with example of how to properly load it to Pixi 4.4.3 ?

[Exca]

Here's a very basic json generated by texturepacker that works with pixi. It has 6 images without any trimming and so on. And with 1 px spacing.

{"frames": {

"img1.png":
{
	"frame": {"x":1,"y":1,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"img2.png":
{
	"frame": {"x":1,"y":131,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"img3.png":
{
	"frame": {"x":1,"y":261,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"img4.png":
{
	"frame": {"x":131,"y":1,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
},
"img5.png":
{
	"frame": {"x":1,"y":391,"w":45,"h":45},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":45,"h":45},
	"sourceSize": {"w":45,"h":45}
},
"img6.png":
{
	"frame": {"x":261,"y":1,"w":128,"h":128},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
	"sourceSize": {"w":128,"h":128}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "images.png",
	"format": "RGBA8888",
	"size": {"w":512,"h":512},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:46161b26d287299f6ef6a2db2a0a14ae:e96681437ee733b153b89a4773ea629d:8056528aade6b91f4a89f8c9da7f2d4c$"
}
}

And in the loader you could just say loader.add("images.json"); loader.load();

Edit: Using a software to generate spritesheets makes life a lot easier. Personally I use texturePacker, which is not free but it has lots of nice features. There are also free alternatives, but cant remember a name for one just now.

[Fovi]

Ok, and if i would like to make json myself (yes, i know that it is not practical):

"frames" meaning that there is more then one texture, right ? But what is the point of it when spritesheet always contains more then one texture. Do i always need to put it in json file ?

Then there is naming, how can i get that texture from loader, do i need to get full path or just "img1.png".

And at the end there is "meta", is that actually used by pixi ? Looks like just bunch of crap added by program for advertise. Well, technically scale and size could be use some way but what about smartupdate ?

 

[xerver]

Pixi's json format is the TexturePacker Hash output format. The meta contains metadata about the sprite sheet that doesn't necessarily describe the sheet itself. Smartupdate is used by TexturePacker but is not used by pixi. You can look at the source of the spritesheetParser loader middleware to know exactly what pixi does and does not use.

[DavidC]

Is there a way to add our own property of rotation with a fixed value for each frame ?