how does one link a sprite sheet with a sprite map?

[Le Twitch]

how do you link a sprite sheet to a txt/xml/json/css sprite map?

[lewster32]

The term you're looking for is 'texture atlas', as demonstrated here: http://examples.phaser.io/_site/view_full.html?d=animation&f=starling+atlas.js&t=starling%20atlas

 

A sprite sheet in Phaser is specifically an image without a data representation; the frames are laid out in order and of a fixed size so they can be parsed programmatically instead, as a 'strip' of frames for instance.

[Le Twitch]

The term you're looking for is 'texture atlas', as demonstrated here: http://examples.phaser.io/_site/view_full.html?d=animation&f=starling+atlas.js&t=starling%20atlas

 

A sprite sheet in Phaser is specifically an image without a data representation; the frames are laid out in order and of a fixed size so they can be parsed programmatically instead (i.e. a 'strip' of frames for instance)

 

that's a really nice example. thanks!

[Le Twitch]

The term you're looking for is 'texture atlas', as demonstrated here: http://examples.phaser.io/_site/view_full.html?d=animation&f=starling+atlas.js&t=starling%20atlas

 

A sprite sheet in Phaser is specifically an image without a data representation; the frames are laid out in order and of a fixed size so they can be parsed programmatically instead, as a 'strip' of frames for instance.

 

would this be correct?

 

this.load.atlasJSON('colourSquare', 'images/colourSquares.png', 'images/colourSquares.json');var squareA = this.add.sprite(0, 409, 'colourSquare');squareA.frame = 5;var squareB = this.add.sprite(730, 409, 'colourSquare');squareB.frame = 0;

[lewster32]

The atlas will have names for each frame, so you can use these - for instance, if one of the items in the atlas is called 'red' then you'd do it like this:

var squareA = this.add.sprite(0, 409, 'colourSquare', 'red');

[Le Twitch]

 

The atlas will have names for each frame, so you can use these - for instance, if one of the items in the atlas is called 'red' then you'd do it like this:

var squareA = this.add.sprite(0, 409, 'colourSquare', 'red');

 

ahhh okay. thanks =]

[Le Twitch]

 

The atlas will have names for each frame, so you can use these - for instance, if one of the items in the atlas is called 'red' then you'd do it like this:

var squareA = this.add.sprite(0, 409, 'colourSquare', 'red');

 

this is exactly what i've done and it still doesn't work

preload: function() {  this.load.atlasJSON('colourSquare', 'images/colourSquares/colourSquares.png', 'images/colourSquares/colourSquares.json');}create: function() {  var squareA = this.add.sprite(0, 409, 'colourSquare', 'red');  var squareB = this.add.sprite(730, 409, 'colourSquare', 'blue');}

[lewster32]

Can you paste the contents of colourSquares.json in please?

[Le Twitch]

Can you paste the contents of colourSquares.json in please?

 

i made this with http://www.leshylabs.com/apps/sstool/

[{"name":"red","x":0,"y":0,"width":230,"height":230},{"name":"blue","x":231,"y":0,"width":230,"height":230},{"name":"yellow","x":0,"y":231,"width":230,"height":230},{"name":"green","x":231,"y":231,"width":230,"height":230},{"name":"orange","x":0,"y":462,"width":230,"height":230},{"name":"purple","x":231,"y":462,"width":230,"height":230}]

[wayfinder]

In Leshy Sprite Sheet Tool, set the output format to JSON-TP-Array

[Le Twitch]

In Leshy Sprite Sheet Tool, set the output format to JSON-TP-Array

 

would i still use 'this.load.atlasJSON'?

[wayfinder]

atlasJSONArray(key, textureURL, atlasURL) 

[Le Twitch]

atlasJSONArray(key, textureURL, atlasURL) 

everything solved and working well. thanks for the insight and the help =]