Need help moving from spritesheets to atlases

[xzereus]

First, I want to thank everyone for all the help I've received so far. I'm having a great time developing for Phaser, and I've made a great amount of progress in a short amount of time.

 

I'm running into a roadblock, however, when I try to switch from using spritesheets to an atlas. Currently, when I want to change a character's equipment, I simply overlay the corresponding sprite. Since all of the equipment and character sprites are 64x64, this works perfectly.

 

To convert them to atlases, I'm using this tool. I import my spritesheets and click repack. My sprites are all 64x64, but unfortunately some (like equipment) are shrunk down to get rid of empty space when they are put into the Atlas. As a result, the sprites will not properly match up when they are rendered in Phaser. Additionally, I'm having trouble figuring out what type the spritemap should be--JSON, JSONArray, JSONHash, etc. 

 

What is the best way to handle sprite atlases? I have knowledge of spritesheets, but atlases are almost entirely new to me.

 

Thanks!

[sleekdigital]

I would guess you have to either tell your texture packer to conserve the space (if it has that option), or you have to re-position the sprite.  But it isn't 100% clear what you are doing... I can only guess from your description.

 

As far as the "type".  It seems that Phaser supports any one of those...

 

http://docs.phaser.io/Phaser.Loader.html

 

• atlas(key, textureURL, atlasURL, atlasData, format) → {Phaser.Loader}
• atlasJSONArray(key, textureURL, atlasURL, atlasData) → {Phaser.Loader}
• atlasJSONHash(key, textureURL, atlasURL, atlasData) → {Phaser.Loader}

[xzereus]

 

I would guess you have to either tell your texture packer to conserve the space (if it has that option), or you have to re-position the sprite.  But it isn't 100% clear what you are doing... I can only guess from your description.

 

As far as the "type".  It seems that Phaser supports any one of those...

 

http://docs.phaser.io/Phaser.Loader.html

 

• atlas(key, textureURL, atlasURL, atlasData, format) → {Phaser.Loader}
• atlasJSONArray(key, textureURL, atlasURL, atlasData) → {Phaser.Loader}
• atlasJSONHash(key, textureURL, atlasURL, atlasData) → {Phaser.Loader}

 

 

sleekdigital,

 

You seem to have a pretty good idea of what I'm trying to do based on your reply. I have two sprites. One is the character, and it fills up a 64x64 space. The other is a helmet, and each frame is positioned to fit into the same 64x64 area so that if you render the character and then the helmet, they will be synced. This works great, but I have a need to combine multiple spritesheets into an atlas to conserve space. Using the tool I found so far, the mapping automatically shrinks the helmet down to size, (i.e. deletes the empty space and, instead of each frame being 64x64, each frame's size varies). 

 

Do you happen to know of any texture packers that allow you to keep original frame size? I'm not sure if this is even possible as the nature of texture packers seems to be to pack a lot of sprites into the smallest area possible.

[dhaber]

I'm the author of Leshy SpriteSheet Tool.  I actually needed similar functionality a couple months ago, and so I implemented it into my development version.    I added a "Grid Map" button that lets you define a height and width, and then creates a new map breaking down the entire sheet into rectangles of that size.   From there, it is a texture atlas and you can name everything, add or delete images, repack, export sprite maps, etc.

 

If it is useful I could attempt to put together a quick release and get that functionality into the version on the web.  It may take me a few days to find the time.

 

As for which exporter to use, someone else may know better, but I think Phaser supports what I call JSON-TP-Array in the SpriteSheet Tool.  That is a format based off of TexturePacker's JSON array format.   I'm not sure about the Phaser side of things though.

[sleekdigital]

Texturepacker...

https://www.codeandweb.com/texturepacker

 

Just set trim mode to none and maybe some of the other options would work as well.  Not sure if this feature is included in the free version or not.

[Heppell08]

I'm the author of Leshy SpriteSheet Tool. I actually needed similar functionality a couple months ago, and so I implemented it into my development version. I added a "Grid Map" button that lets you define a height and width, and then creates a new map breaking down the entire sheet into rectangles of that size. From there, it is a texture atlas and you can name everything, add or delete images, repack, export sprite maps, etc.

If it is useful I could attempt to put together a quick release and get that functionality into the version on the web. It may take me a few days to find the time.

As for which exporter to use, someone else may know better, but I think Phaser supports what I call JSON-TP-Array in the SpriteSheet Tool. That is a format based off of TexturePacker's JSON array format. I'm not sure about the Phaser side of things though.

I've used that tool before and can safely say it helped me a lot! I needed a spritesheet to stick a load of images horizontally and worked perfectly!

Nice work on that tool dhaber!

[dhaber]

I'm the author of Leshy SpriteSheet Tool.  I actually needed similar functionality a couple months ago, and so I implemented it into my development version.    I added a "Grid Map" button that lets you define a height and width, and then creates a new map breaking down the entire sheet into rectangles of that size.   From there, it is a texture atlas and you can name everything, add or delete images, repack, export sprite maps, etc.

 

If it is useful I could attempt to put together a quick release and get that functionality into the version on the web.  It may take me a few days to find the time.

 

 

I just pushed an update to the web that adds the "Grid Remap" button to Leshy SpriteSheet Tool.  This makes it possible to easily work with perfect grids.   It is a little late and I did this quickly, so I'm hoping I got this right.    Also, hopefully that helps with the original problem here.  If anyone sees any issues, please let me know.

[xzereus]

I just pushed an update to the web that adds the "Grid Remap" button to Leshy SpriteSheet Tool.  This makes it possible to easily work with perfect grids.   It is a little late and I did this quickly, so I'm hoping I got this right.    Also, hopefully that helps with the original problem here.  If anyone sees any issues, please let me know.

 

dhaber,

 

Thanks for doing this! I will check when I get home to see if this works. Also, thank you for sharing your tool online as it has already proved to be a great resource!

[xzereus]

dhaber, just did a quick check and this works just great! Thanks!