Unable to display a specific Atlas frame

[bali33]

Hi guys,

 

I'm trying to add a Sprite into a group - The Sprite is set-up with a specific Atlas Frame. I have 2 issues so far :

 

- if set-up the frame using the frame nam I have the following error : Cannot set frameName: Gordon_Technologies_0001.png - I tried without the .png extension but the error remains

 

- if I set-up the frame using the frame index I have no error but all the frames are displayed.

 

Her the code :

game = new Phaser.Game(400, 300, Phaser.AUTO, 'game', { init:init, preload: preload, create: create });    function init(){        console.log("Init game");    }    function preload(){        game.load.atlas('animations', 'animations.png', 'animations.json');    	       }    function create(){        var root = game.add.group();        root.create(0, 0, 'animations',1);    }

The Atlas JSON file as a structure like the following :

{"frames": {"Gordon_Technologies_0001.png":{	"frame": {"x":3,"y":3,"w":230,"h":142},	"rotated": false,	"trimmed": false,	"spriteSourceSize": {"x":0,"y":0,"w":230,"h":142},	"sourceSize": {"w":230,"h":142}},......"meta": {	"app": "http://www.codeandweb.com/texturepacker ",	"version": "1.0",	"image": "animations.png",	"format": "RGBA8888",	"size": {"w":1024,"h":2048},	"scale": "1",	"smartupdate": "$TexturePacker:SmartUpdate:c26915a687a9dea8827b53705bd7664c:1/1$"}}

I'm pretty sure I'm doing something wrong but can't find out what - Any idea ?

 

Thank you

[tonetheman]

I too would like some help here.

 

I have loaded an atlas that looks like this

 

{"frames":

{"cardClubsA":{"frame":{"x":0,"y":0,"w":140,"h":190},

"rotated":false,"trimmed":false,

"spriteSourceSize":{"x":0,"y":0,"w":140,"h":190},

"sourceSize":{"w":140,"h":190}},

 

"cardClubs2":{"frame":{"x":141,"y":0,"w":140,"h":190},"rotated":false,"trimmed":false,

"spriteSourceSize":{"x":0,"y":0,"w":140,"h":190},

"sourceSize":{"w":140,"h":190}},

 

"cardClubs3":{"frame":{"x":0,"y":191,"w":140,"h":190},"rotated":false,"trimmed":false,

"spriteSourceSize":{"x":0,"y":0,"w":140,"h":190},"sourceSize":{"w":140,"h":190}}

},

 

"meta":{"app":"http://www.leshylabs.com/apps/sstool/",

"version":"Leshy SpriteSheet Tool v0.8.1","size":{"w":281,"h":381},"scale":1}}

 

Then in the create I try to do this

var t = game.add.sprite(0,0,"t");

t.frameName = "cardClubsA";

 

And the entire spritesheet displays, not the small part I was asking for.

 

This would be a great example really. Just load an atlas and a png and display a few images from it.

[Tom Atom]

Hi, entire spritesheet displays usually when specified frame is not found. If you use TexturePacker you are probably using JSON (Hash) as export (at least as can be seen from your JSON files). Use JSON (Array). It has little bit different structure - see example below (it is from my atlas generator Spritor that mimicks TexturePacker's JSON (Array) output. Notice the "filename" attribute. TexturePacker outputs it with filename extension added - so be careful to reference the frame from your code exactly as it is in JSON.

{"frames": [{    "filename": "Title",    "frame": {"x":1,"y":1,"w":443,"h":56},    "rotated": false,    "trimmed": true,    "spriteSourceSize": {"x":0,"y":0,"w":443,"h":56},    "sourceSize": {"w":443,"h":56}},{    "filename": "Title_atom01",    "frame": {"x":287,"y":58,"w":101,"h":45},    "rotated": false,    "trimmed": true,    "spriteSourceSize": {"x":0,"y":0,"w":101,"h":45},    "sourceSize": {"w":101,"h":45}},{    "filename": "Title_row",    "frame": {"x":287,"y":104,"w":146,"h":3},    "rotated": false,    "trimmed": true,    "spriteSourceSize": {"x":0,"y":0,"w":146,"h":3},    "sourceSize": {"w":146,"h":3}}],"meta": {    "app": "Spritor"}}

[igin]

There are 3 different formats of texture atlas data file (json array, json hash, and xml).

JSON array format data looks like your data file:

{    "frames": {        "Gordon_Technologies_0001.png": {            "frame": {                "x": 3,                "y": 3,                "w": 230,                "h": 142            },            "rotated": false,            "trimmed": false,            "spriteSourceSize": {                "x": 0,                "y": 0,                "w": 230,                "h": 142            },            "sourceSize": {                "w": 230,                "h": 142            }        },        ......    },    "meta": {        "app": "http://www.codeandweb.com/texturepacker ",        "version": "1.0",        "image": "animations.png",        "format": "RGBA8888",        "size": {            "w": 1024,            "h": 2048        },        "scale": "1",        "smartupdate": "$TexturePacker:SmartUpdate:c26915a687a9dea8827b53705bd7664c:1/1$"    }}

JSON hash format data looks like following:

{    "frames": [{        "filename": "Title",        "frame": {            "x": 1,            "y": 1,            "w": 443,            "h": 56        },        "rotated": false,        "trimmed": true,        "spriteSourceSize": {            "x": 0,            "y": 0,            "w": 443,            "h": 56        },        "sourceSize": {            "w": 443,            "h": 56        }    },    {        "filename": "Title_atom01",        "frame": {            "x": 287,            "y": 58,            "w": 101,            "h": 45        },        "rotated": false,        "trimmed": true,        "spriteSourceSize": {            "x": 0,            "y": 0,            "w": 101,            "h": 45        },        "sourceSize": {            "w": 101,            "h": 45        }    },    {        "filename": "Title_row",        "frame": {            "x": 287,            "y": 104,            "w": 146,            "h": 3        },        "rotated": false,        "trimmed": true,        "spriteSourceSize": {            "x": 0,            "y": 0,            "w": 146,            "h": 3        },        "sourceSize": {            "w": 146,            "h": 3        }    }],    "meta": {        "app": "Spritor"    }}

The syntax of game.load.atlas method is:

game.load.atlas(key, textureURL, atlasURL, atlasData, format);

You can pass the format parameter into this function if the data file is not the default format(json array).

the format value can be one of these 3 values:

Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAYPhaser.Loader.TEXTURE_ATLAS_JSON_HASHPhaser.Loader.TEXTURE_ATLAS_XML_STARLING

Or you can use another api method:

game.load.atlasJSONHash(key, textureURL, atlasURL, atlasData);

For your JSON hash format data file , the code can be one of these two:

//use atlas methodgame.load.atlas('animations', 'animations.png', 'animations.json', null, Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);//or use atlasJSONHash methodgame.load.atlasJSONHash('animations', 'animations.png', 'animations.json');

If your data file is JSON array format, the code can be one of these three:

//use atlas method without format param because default format is json arraygame.load.atlas('animations', 'animations.png', 'animations.json');//or use atlas method with formatgame.load.atlas('animations', 'animations.png', 'animations.json', null, Phaser.Loader.TEXTURE_ATLAS_JSON_ARRAY);//or use atlasJSONArray methodgame.load.atlasJSONArray('animations', 'animations.png', 'animations.json');