Create Sprite Sheets with TexturePacker

2D game為了提高效能，通常會將一個個sprite集合成一張大圖，也就是所謂的sprite sheet。3D game也是如此，只不過換了個名詞：sprite換成texture、sheet換成atlas。

Picture 1. Sprite Sheet Example

拼圖的演算法有數個，這裡舉個簡單例子：
每插入一個新的sprite，該區塊將會產生兩個更小的區塊，依此類推。如果sprite都無法插入每個小區塊，則表示sheet不夠大，必須將sheet放大重新來過。

Algorithm Example

如果你想在iOS上寫2D game的話，cocos2d是一套相當不錯的開源軟體，當然它也提供了sprite sheet的功能。那麼問題就在於要如何產生sprite sheet？其實市面上已經有一堆現成工具讓使用者能夠方便快速地製作sprite sheet。這裡我會介紹TexturePacker這套跨平台免費軟體（高階功能需要付費）。

工商服務時間

主要支援框架

• Cocos2d iPhone – iPhone
• Corona(TM) SDK – iPhone & Android
• Gideros – Cross platform game development framework
• Sparrow – iPhone
• LibGDX – Java (Android + Desktop)
• LimeJS – Javascript / HTML5 framework
• Ogre with CEGUI – 3D gaming framework and GUI
• Moai - Multiplatform gaming framework
• CSS sprites
• JSON / Html5

支援貼圖格式

• Flash (.swf) – consisting of single frames
• PNG
• JPG
• TIFF
• BMP

支援輸出格式

• PNG – Portable Network Graphics
• PVR – iPhone’s native image format
• PVR.CCZ – zlib compressed version of PVR for cocos2d
• PVR.GZ – gnu zip compressed PVR files
• JPG – JPEG

TexturePacker提供兩種排版的演算法：

Basic
這是最基本的演算法，簡單無腦地依序插入sprite，直到填滿為止。免費版本只提供Basic排版。

MaxRects
MaxRects是一種快速、高密度的排版演算法。開啟sprite旋轉與修剪的功能可以得到更好的結果。TexturePackerPro/CLI版本可以使用這個演算法（付費版本）

如果對這些演算法有興趣，可以參考這個網頁(link)。

Dithering

• RGBA8888, BGRA8888 – 32bit, 256 colors per channel, 16777216 colors, 256 transparency values
• RGBA5555
• RGBA5551 – 16bit, 32 colors per channel, 32768 colors, 1 “hard” transparency value
• RGBA4444 – 16bit, 16 colors per channel, 4096 colors, 16 transparency values
• RGB565 – 16bit, 65536 colors, no transparency
• PVRTC2 – lossy compression for iPhone（付費版本）
• PVRTC4 – lossy compression for iPhone（付費版本）

Trimming
修剪功能可以移除sprite周圍的透明像素，可以縮減貼圖大小、提高繪圖效能。2.3.5版本以前是免費，之後就改成付費版本了。

除此之外，TexturePacker支援command line，可以讓開發者在建置專案的過程中，同時把需要的sprite sheets給自動產生出來。因此也不需要版本控管這些sheets啦。

Tips

• 使用PVR時可以補上–premultiply-alpha，當然也要記得作相對應的設定：[CCTexture2D PVRImagesHavePremultipliedAlpha:YES]
• 使用inner-padding可以避免sprite吃到其他相鄰srpite的像素，造成黑色邊緣。