bali33 Posted January 16, 2015 Share Posted January 16, 2015 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 Link to comment Share on other sites More sharing options...
tonetheman Posted February 6, 2015 Share Posted February 6, 2015 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 thisvar 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. Link to comment Share on other sites More sharing options...
Tom Atom Posted February 7, 2015 Share Posted February 7, 2015 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"}} Link to comment Share on other sites More sharing options...
igin Posted March 21, 2015 Share Posted March 21, 2015 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_STARLINGOr 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'); Link to comment Share on other sites More sharing options...
Recommended Posts