优化你的图片资源：图片打包工具TexturePacker

当我们制作移动设备的HTML5 游戏时, 我们总是希望在不影响视觉效果的前提下，图片尽可能小以减少图片的锯齿和抖动。因此，性能良好的图片资源管理和打包工具无疑将会提高游戏开发的效率。TexturePacker就是这样一款优秀的付费工具。

创建精灵动画, 节省开发视觉

TexturePacker 可以轻松的创建精灵动画，可以说它是最好的精灵动画创建工具。It allows you to create image sprite sheets in the twinkle of an eye by dragging your artwork such as BMP, TiFF, JPG, TGA, PNG, PSD, SWF files and even complete image folders in to the application.

After configuring your desired settings, by clicking on the publish button it will export a sprite sheet image PNG, PVR, PVR, CCZ, PVR, GZ, JPG, and KTX together with a description data file. With some very handy features and the possibility to be integrated into your build process, it could save you hours of work!

兼容众多游戏开发引擎

TexturePacker的输出可以兼容大多数的游戏开发引擎，包括:

-JSON / HTML5

-LimeJS

- JavaScript / HTML5 framework

-Corona(TM) SDK – Cross-platform game development framework

-Gideros – Cross-platform game development framework

-Sparrow – iPhone

-LibGDX – Java (Android + Desktop)

-Ogre with CEGUI – 3D gaming framework and GUI

-Moai – Multiplatform gaming framework

-CSS sprites

-Cocos2d – iPhone

-Melonjs

减少50%的文件大小

There are lots of options for color reduction in TexturePacker that user can apply to reduce the size of the sprite sheets image. With some smart tricks it’s possible to reduce the size of the output with more than 50%. The following formats are supported:

The other very cool thing of TexturePacker is that when creating a sprite sheet, it will trim and remove transparent pixels from the border of your images. This will result in reducing the total texture size and thereby faster rendering. The framework will be able to restore the removed transparent pixels using the published description data file. Besides, the application also takes care of double identical images. If two images are identical after trimming, only one image is placed in the sprite sheet. The duplicates will be added to the published description data file. This is a fantastic way to save precious storing space especially for animations with multiple identical frames.

自动屏幕分辨率适应

There is also one very useful feature for developers targeting devices with multiple resolutions. You can simply focus on high-res sprites and TexturePacker does all the scaling for you while it creates the sprite sheet. There is no need to use an external tool to resize the images anymore. The new auto-SD feature creates sprite sheets in standard and high definition with one single click of the publish button!

小贴士

Sort your images and create multiple sprite sheets to apply an optimal compression. Each art asset could apply individual treatment to be stored in its most optimal form. For example a character with a lot of color gradient and transparency embedded in the artwork would need to be saved in a PNG or similar format which normally has a lower compression option (around 6-8%) to still look decent. Background images with a lot of color gradient without transparency can be very easily saved as a JPG or similar formats with a high compression option and still looks decent on most occasions with a quality of around 70% of its original.

However, it won’t work if you put both images in one sprite sheet, so you have to make the split and create two sprites, one sprite sheet for artwork that contains transparency, and the other for artwork that does not contain transparency. You could go even further for an optimal result by making the split among artwork with:

-Transparency including color gradient
-Transparency without color gradient
-No transparency including color gradient
-No transparency without color gradient

In this way all images will be saved in the smallest and most optimal form.

Depending on the projects you are working on, this could save you up to 40% of precious storing space and result in faster downloads of art assets and eventually a better gaming experience.

TexturePacker 提供一星期的试用，你可以在下面的链接中查找到更多信息:

http://www.codeandweb.com/texturepacker