Packing texture with texture atlas

[Lizard]

Hello everyone!

I'm almost finished my project, during project building i used sprites and spritesheets as separated images.

Now i think that was not a good idea  So now i want to pack my sprites and spritesheets to texture atlas.

I found such cool program as texture packer and did all the things to pack my images. Now i have follow severities:

1) After loading textures from texture atlas previous keys, wich i used for sprites will be not valid and as i understand it impossible to rebind it to textures from atlas (i hope this is wrong ).

So may be here exists some easier way then rewrite all the lines which contained previous sprite keys.

2) I used spritesheets for animation in my project and the second problem is i don't know how to make spritesheet using image inside atlas. Is it possible? Or should i slice all my spritesheets on frames and add it 1by 1?

3) Is it worth the efforts?

 

Best regards and the for advance  

[drhayes]

1. Yes, you'll have to go through and rename your sprite's keys and redo their animation declarations to use the new names from the atlas.

2. Since you're using the atlas you don't use spritesheets anymore. Anything that you were getting out of the spritesheet you now get out of the atlas.

3. I think memory usage is biggest benefit. There are performance benefits too, I think. Other people might be better qualified to talk about this part, though.

[stupot]

addressing your point 2 - I've been through this process, starting with spritesheets then wanting to pack them into an atlas.  You can split the spritesheet up into separate frames and add them to an atlas and then reference them by strings, but I'll talk about the case where you want to reference them in your game just like a spritesheet with zero based index referencing.

Phaser doesn't support nested spritesheets so you will have to manualy construct a spritesheet from the gfx in the atlas, it's not too dificult.  There two approaches

1. Put the exact spritesheet graphic into the atlas and construct a spritesheet from it.
2. Split the spritesheet into individual frames and add them to the atlas, construct a spritesheet from them.

Eitherway you will have to modify your code to handle the changed loading/creation methods, but by recreating a spritesheet you'll still be able to use it as before, which if you've got a lot of animations or just specify frames by their numerical index then this a good reason to do this.

Approach 1, calculating the frame references in your constructed spritesheet is fairly easy you'll just need to know the size of each frame to chop it up, it's the same as the original spritesheet frames with the atlas XY offset added.  If your atlas is packed with trimming you need to ensure that nothing gets cut off the sides of your spritesheet.  This approach is less likely to pack optimally into an atlas because it'll be a larger chunk and can not take advantage of any possible trimming of the individual frames.

Approach 2, there's work up front to be done to split the spritesheet up into individual frames with a naming convention chosen to make it easier to handle the string refs in code.  You'll get the full benefit from trimming.

I started with approach 1 because it seemed easier, but the problems with trimming became a bit of a pain so then implemented 2 which required a bit more work, mostly to automate the spritesheet unpacking.

 

[drhayes]

When I converted from spritesheets to an atlas, I did approach #2. My main graphics app is PyxelEdit (which is great!). I figured out the file format and wrote a frame extractor: https://github.com/drhayes/pyxel-edit-cli

I use that to spit out each individual frame in my graphics, then use TexturePacker's CLI to bundle them into an atlas. Ultimately it's a oneliner command to run the whole process.

[stupot]

Yup, TexturePacker CLI to build the atlas, ImageMagick to split the spritesheet into frames.