How to load a sprite sheet from an image and a JSON file

[yltang]

I have a sprite sheet image ("character1.png") and a JSON file ("character1.json') indicating the frame positions. The positions of frames are specified as follows:

{
	"count" : 264,
	"filename" : "character1.png",
	"position" : 
	[
		{
			"x1" : 5,
			"x2" : 65,
			"y1" : 4,
			"y2" : 86
		},
		{
			"x1" : 69,
			"x2" : 131,
			"y1" : 2,
			"y2" : 87
		},

    ...

  ]
}

How do I load the sprite sheet with the command `game.load.spritesheet(...)`. Also, how do I play the animation and access a particular frame? Thanks.

 

character1.json

[stupot]

In PhaserWorld, a spritesheet is a grid of graphics, each cell is of the same size, the spritesheet is X cells across by Y down, Phaser only needs to know how big a cell is, from that it can determine the position of an cell by a frame index value, 0= first cell, 1 = the next cell moving left (then down from the beggining of the line, just like reading).  Looking at your source image, this isn't what you want.

What you have is what we'd call an atlas, ie an image containing many other images that have been packed together and you also have some data that describes the position/crop/rotation of the component images withing the main atlas image.

Depending on what created your atlas you may find it is a supported type within Phaser, if not you'll have to write a parser to decode your character1.json into a list of frame data to build your Phaser atlas.