TexturePacker

TexturePacker是一款把若干資源圖片拼接為一張大圖的工具。網(wǎng)頁設(shè)計(jì)師前臺(tái)制作css的時(shí)候，為了提高載入速度，往往把很多小圖拼接成一張大圖，一次載入，減少I/O，提高速度。這個(gè)好懂吧。
所以不管怎么樣，“拼大圖”這個(gè)流程不可少。文藝青年說他用photoshop。。。西西推薦用TexturePacker，拼圖更專業(yè)。

TexturePacker這個(gè)詞從字面來說就是Texture（紋理） + Packer（打包）。當(dāng)然TexturePacker的功能遠(yuǎn)遠(yuǎn)不止這些，你還可以用它來生成程序所需的框架，如Cocos2d，Corona(TM) SDK ，Gideros ，Sparrow ，LibGDX，LimeJS 和Moai等。

TexturePacker一鍵生成CSS sprites：

就標(biāo)題來看，其實(shí)是貶低了TexturePacker的功能的，因?yàn)門exturePacker遠(yuǎn)遠(yuǎn)不止用于生成CSS sprites，只不過對(duì)于小編來說，也就只能用這個(gè)功能而已。

CSS sprites是TexturePacker一大功能，你只要將所有網(wǎng)頁小圖片添加到TexturePacker，然后設(shè)置文件導(dǎo)出格式為css，即可快速生成一張整合后的圖片和css文件，這對(duì)網(wǎng)頁前端設(shè)計(jì)師來說是不可多得的高效率工具。

什么是CSS sprites：

先來簡(jiǎn)單介紹一下CSS sprites，這是干嘛用的。眾所周知，我們?cè)谠O(shè)計(jì)網(wǎng)頁時(shí)，會(huì)有很多很多的網(wǎng)頁小元素，例如導(dǎo)航按鈕，社交圖標(biāo)，網(wǎng)站背景圖等等。一般情況下，這些圖片都是單獨(dú)形式存在的，對(duì)于每一張圖片，在網(wǎng)頁加載時(shí)都屬于獨(dú)立的http請(qǐng)求。但使用CSS sprites，則會(huì)將所有的小圖片整合到一張圖片中，網(wǎng)頁加載只需要對(duì)一張圖片進(jìn)行請(qǐng)求，CSS再通過坐標(biāo)的形式定位每一個(gè)小圖片顯示出來。這樣有什么好處呢，個(gè)人認(rèn)為最大的好處是，大大減少http請(qǐng)求數(shù)，提高網(wǎng)頁加載速度。

TexturePacker神馬優(yōu)點(diǎn)：

>TexturePacker有windows版。不是所有人都有條件用水果。
>TexturePacker有免費(fèi)功能限制版。（你若要求不太高，TexturePacker夠你用）
>TexturePacker支持pvr格式。
>TexturePacker支持命令行集成。
>TexturePacker的兄弟軟件PhysicsEditor同樣是很好的物理建模工具。

TexturePacker怎么用？

1、打開TexturePacker

2、我的圖片資源存放在F:\_data\vPuzzle\resource.work，如果你喜歡，你可以把整個(gè)文件夾拖到右邊的①區(qū)，下圖是拖進(jìn)去以后的模樣。

3、但是往往我們不想一股腦把所有圖片合在一張超大的圖中，所以我個(gè)人比較喜歡手動(dòng)添加圖片，這樣便于控制。

4、我添加了一些圖片，并把它們拖到上面圖右邊的區(qū)域

5、ok，該保存了。在data file處填入你要的plist文件路徑，在texture format處選擇你要的圖片格式，在texture file填入你要生成的圖片路徑。(其他還有很多細(xì)節(jié)的設(shè)定，請(qǐng)嘗試體驗(yàn)幾次就明白怎么用了)另外，最后，點(diǎn)擊菜單條的publish按鈕，哦了。之后你可以利用它著手制作一款偉大的游戲了！

認(rèn)識(shí)TexturePacker的界面：

Data Format:導(dǎo)出什么引擎數(shù)據(jù)，默認(rèn)cocos2d,下拉列表中有很多，基本常用的引擎都支持了
Data File :導(dǎo)出文件位置(后綴名.plist)
Texture Format:紋理格式,默認(rèn)png
Image format:圖片像素格式，默認(rèn)RGBA8888...根據(jù)對(duì)圖片質(zhì)量的需求導(dǎo)出不同的格式
Dithering:抖動(dòng),默認(rèn)NearestNeighbour,(如果圖像上面有許許多多的“條條”和顏色梯度變化)將其修改成FloydSteinberg＋Alpha;
Scale: 讓你可以保存一個(gè)比原始圖片尺寸要大一點(diǎn)、或者小一點(diǎn)的spritesheet。比如，如果你想在spritesheet中加載“@2x"的圖片（也即為Retina-display設(shè)備或者ipad創(chuàng)建的）。但是你同時(shí)也想為不支持高清顯示的iphone和touch制作spritesheet，這時(shí)候只需要設(shè)置scale為 1.0,同時(shí)勾選autoSD就可以了。也就是說，只需要美工提供高清顯示的圖片，用這個(gè)軟件可以自己為你生成高清和普清的圖片。
Algorithm TexturePacker:里面目前唯一支持的算法就是MaxRects，即按精靈尺寸大小排列，但是這個(gè)算法效果非常好，因此你不用管它。
Border/shape padding: 即在spritesheet里面，設(shè)置精靈與精靈之間的間隔。如果你在你的游戲當(dāng)中看到精靈的旁邊有一些“雜圖”的時(shí)候，你就可以增加這個(gè)精靈之間的間隔。
Extrude: 精靈邊界的重復(fù)像素個(gè)數(shù). 這個(gè)與間隔是相對(duì)應(yīng)的--如果你在你的精靈的邊邊上看到一些透明的小點(diǎn)點(diǎn)，你就可以通過把這個(gè)值設(shè)設(shè)置大一點(diǎn)。
Trim: 通過移除精靈四周的透明區(qū)域使之更好地放在spritesheet中去。不要擔(dān)心，這些透明的區(qū)域僅僅是為了使spritesheet里面的精靈緊湊一點(diǎn)。--當(dāng)你從cocos2d里面去讀取這些精靈的時(shí)候，這些透明區(qū)域仍然在尋里。（因?yàn)�，有些情況下，你可能需要這些信息來確定精靈的位置）
Shape outlines: 把這個(gè)選項(xiàng)打開，那么就能看到精靈的邊邊。這在調(diào)試的時(shí)候非常有用。
AddSprite:添加圖片Add Folder:根據(jù)文件夾添加圖片
Publish：導(dǎo)出資源文件（.plist和png）