Jump to content

Need help moving from spritesheets to atlases


Go to solution Solved by dhaber,

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!

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

 

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.

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.

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!

Link to post
Share on other sites
  • Solution

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.

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!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...