COCOS學習筆記--TexturePacker使用詳解


本文轉載於:http://blog.csdn.net/gzy252050968/article/details/50708464

一.TexturePacker的優點


TexturePacker是一款把若干資源圖片拼接為一張大圖的合圖工具,在游戲開發以及網頁制作中經常會使用到這個工具。為什么需要使用這個工具呢?

1.我們知道,大部分游戲引擎底層的渲染方式都是基於OpenGL的,但是,你知道嗎?OpenGL載入紋理圖片時,所用內存會自動擴張到2的N次方。比如,一張圖片的大小為10*10像素,OpenGL會按照16*16的規格將圖片載入到內存中;如果圖片大小為64*65,那么就會按照64*128載入了,這就造成了內存的無必要開銷。

具體浪費了多少內存空間呢?

我們這里需要了解一個概念:圖片格式(Image format)。圖片格式有RGBA8888、RGBA4444、RGBA5555、RGB888等等。假如我們使用的圖片格式為RGBA8888,也就是說圖片每個像素點都由R、G、B、A4個值組成,每個值占用8位(值為0-255),那么一個像素點會占用8位*4=32位=4字節。所以圖片大小為64*65時我們按照64*128載入,此時會造成64*(128-65)*4字節=16128字節=15.75KB的內存空間浪費,要知道整張圖片的大小才有64*65*4/1024=16.25KB。

所以,在游戲開發使用圖片資源時,我們要盡量保證圖片的大小在接近且不大於2的整數倍,理想狀態下,如果每一張圖的長寬都恰好是2的n次方數值,就不會有任何浪費了。TexturePacker正是幫助我們將圖片資源進行這樣優化的一款軟件。

2.另外,TexturePacker不僅能幫助我們在加載圖片時節省內存,它將很多小圖拼接成一張大圖后,合成的大圖會比之前所有的散圖所占用的物理存儲更小,也許一堆散圖的大小為20KB,將它們合成一張大圖后可能就變成了10KB,這樣便從而通過減小圖片資源物理存儲大小起到壓縮游戲安裝包的作用。

3.最后,將很多小圖拼接成一張大圖,載入內存時一次載入,提高了載入速度。

 

二.如何獲得TexturePacker的激活碼

一般我們下載的TP都是試用7天的,但是TexturePacker的作者Andreas人很nice,你可以向他申請激活碼:https://www.codeandweb.com/request-free-license ,不過要求就是你自己要有關於游戲開發的博客,Andreas會根據你的博客決定是否給你激活碼:

 

 一般申請幾天后就會有回復(在這里還要謝謝Andreas啦):

 

 

 

三.使用TexturePacker合圖

 

TP這個軟件其實很好用。打開TexturePacker軟件:

我們先看軟件最上方的選項:

 

分別為:新創建一個TP工程;

打開一個文件夾;

保存現在對圖片的操作;

添加一些圖片;

添加一個文件夾里的所有圖片;

刪除正在操作的圖片;

發布TP工程。

 

這里有還一些地方需要注意:

1.Output-DataFormat:壓縮成支持什么引擎的文件,如cocos、unity等:

 

 

2.Geometry-Size constraints :

POT(Power of 2):導出的大圖為大小是2的N次方的方形圖;

Anysize:任何尺寸都可以,所以它導出的圖的尺寸是最小的;

NPOT(Anysize but power of 2)與POT區別就是導出的圖為矩形。

 

 

3.Output-Image format:圖片格式,上面提到過,比如RGBA8888,圖片每一個像素點由R、G、B、A四個值組成,每個值占8位。

我們看軟件的右下角顯示的size,這就是合圖加載到內存中會占用的內存大小:

 

若選擇RGBA4444占用的內存大小會減少一半,這樣會節省一倍內存,代價就是圖片質量有損失,但由於算法存在這種損失是極小的。

 

我們新建一個項目,導入圖片資源並設置相關屬性,就可以發布了。這里我將6個按鈕圖片合成了一張大圖。發布后會生成兩個文件,一個保存各圖片信息的.plist文件和一個.png格式的大圖。

          

 

 

四.使用代碼加載合圖,並創建sprite

用TP發布出來文件后,接下來我們要在工程項目中通過代碼使用合圖。

在這之前我們要將.plist和.png文件拷到工程的res文件目錄下;

1.首先需要加載合圖

 

[cpp]  view plain  copy
 在CODE上查看代碼片派生到我的代碼片
  1. //加載TP文件  
  2. //參數:1.plist文件名 2.png文件名  
  3. SpriteFrameCache::getInstance()->addSpriteFramesWithFile("TPtest.plist","TPtest.png");  

可以看到,我們通過精靈幀緩存的單例對象將合圖加載到了工程中,使用的方法為addSpriteFramesWithFile(),也就是說合圖中的圖片資源都是以精靈幀的形式存儲起來的

 

2.加載完資源后,我們就可以使用合圖里的圖片資源了。比如之前我的博客中講過精靈的3種創建方法,其中有一種就是通過精靈幀創建精靈

 

[cpp]  view plain  copy
 在CODE上查看代碼片派生到我的代碼片
  1. //使用TP合圖里的資源創建精靈  
  2. auto _sprite = Sprite::createWithSpriteFrameName("Button01.png");  
  3. addChild(_sprite);  

運行結果:

 

 

 

以上。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM