Texture Packer: The tool that stands the test of time
We have started developing mobile apps using Flash. Then saw it’s shortcomings and decided to move to CoronaSDK and released our fist app with it. Currently, we’re working with Unity3D.
Each of those changes had a big impact on how we work and yet, the change was necessary. But there is one tool we are using since the day 1 and I’m sure it’ll be a major part of our workflow for a long time, it’s Texture Packer from Code’n’Web.
Andreas Löw created an exceptional tool for working with sprites and the more you use it on your workflow the more you’ll understand it’s value. First of all, as I noted above we have switched our core tools 3 times but the Texture Packer was compatible with all of them. That was a big plus for us as working with sprites, bitmaps and optimising the texture memory is the core part of mobile development no matter which SDK you are using.
Texture Packer has many time/life saving features that’ll be hard to cover in one blog post. So, today I’d like to mention one particular feature that recently saved the day for me. It’s a little tick box located in Layout section called “Reduce border artifacts”.
Let me explain the problem first. When dealing with the sprites & sprite sheets, you’ll use transparencies in almost all cases. Your alpha transparency might good look on Photoshop, but depending on the device (or your framework/SDK) hardware accelerated textures & transparencies might be handled a little bit differently.
In Photoshop, transparent or semi-transparent pixels have an undefined color and Photoshop handles them in software based on layer blending methods among other things. But with graphics hardware / OpenGL transparent pixels still have a color, even if it’s fully transparent. When the graphics card mixes a transparent pixel with the image below it, color value of the transparent pixel also gets mixed in. This colour is black and as a result “ghost” outlines, a thin grey border might appear around your sprites.
Unity uses straight alpha blending, and alpha textures needs a special treatment to prevent that problem as explained here. The trick is expanding the RGB section of the image (not alpha) so transparent pixels would have proper color. They have even provided a AlphaUtility (actions for Photoshop) to help you with that problem.
But if you are working with Texture Packer, fix is one click away. Simply enable “Reduce Border Artifacts” checkbox and Texture Packer will handle that for you when exporting the sprite sheet!
Here is a simulated sample image, take a look at the three light green dots on the top left. Image on the left shows expected/fixed result while image on the right shows the alpha problem.
Texture Packer is simply the best sprite sheet generation tool you can get your hands on and it will save you many precious hours. Andreas just released v3.0.0 and I must say it’s now better than ever…