How do I import a sprite sheet with its JSON file into my phaser game?

Question

I am creating a game using the phaser game engine. I created a sprite sheet and downloaded it. It came with the 256 × 384 .png file with my frames and a JSON file which I assume contains information about how to split up the frames. I don't know how to import the sprite sheet with the JSON file into my preload() function. I tried using the following code but it is not working. Any help would be greatly appreciated.

var game = new Phaser.Game(1200, 750, Phaser.AUTO, '', { preload:   preload, create: create, update: update });
function preload(){
    game.load.image('background', 'assets2/background.png');
    game.load.json('robot', 'assets2/VillainSpriteSheet_json.json');
    game.load.spritesheet('robot', 'assets2/VillainSpriteSheet.png');
}

var villain; 

function create(){

var villainjson = game.cache.getJSON('robot');

//enable physics
game.physics.startSystem(Phaser.Physics.ARCADE);

//create background
var background = game.add.sprite(0, 0, 'background');

//villain
villain = game.add.sprite(50, 50, 'robot');

//enable phsyics 
game.physics.arcade.enable(villain);
villain.body.bounce.y = .2;
villain.body.gravity.y = 300; 
villain.body.collideWorldBounds = true;  


}

Answer 1

I think you are confusing two frameworks, jQuery and Phaser. For loading and displaying sprites you don't need jQuery, just Phaser will do.

The load.spritesheet expects a spritesheet where all sprites have a fixed width and height, so with all sprites in a grid layout.

What you have sounds like a spriteatlas, the difference being that in a spriteatlas each sprite can have a different width and height, and all these widths and heights per sprite are described in the accompanying .JSON file.

So I think you are looking for the load.atlasJSONHash function, something like this:

function preload(){
    //..
    game.load.atlasJSONHash('robot', 'assets2/VillainSpriteSheet.png', 'assets2/VillainSpriteSheet_json.json');

// and then load a sprite like so
// Note: 'myframename1' should be some framename from the .json file
var villain = game.add.sprite(50, 50, 'robot', 'myframename1'); 

And btw just to clarify, the load.json in Phaser can be used to just load a .json file, for example with for your own customised data like level layouts, dialog/multilanguage texts, highscore data, enemy patterns etc.