Sign in to follow this  
xzereus

Need help moving from spritesheets to atlases

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

 

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

 

 

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.