菜鳥教程 | 紋理集打包和動畫轉換工具Texture Merge的使用教程

　　Texture Merger 可將零散紋理拼合爲整圖，同時也能夠解析SWF、GIF動畫，製做Egret位圖文本，導出可供Egret使用的配置文件，其紋理集製做功能在小遊戲開發中能夠起到下降小遊戲包體的做用，是開發者們最爲喜歡的靠譜軟件開發工具。

下面就爲你們介紹Texture Merger的使用教程。

Texture Merge1.7.2版本相比以前操做更加便利，優化了內存佔用，修復了命令行輸出json中key值錯誤的問題。

打開TextureMerger，分爲三個選項：

​1.Egret MovieClip主要用於遊戲中的動畫製做和播放，支持swf、gif等。

​2.Sprite Sheet主要用於將零碎的小圖合併成一張整圖，減小加載圖片時http的請求次數。

​3.BitmapFont主要用於特殊字體在遊戲中的使用。

  

1、建立動畫：Egret MovieClip

1.打開Egret MovieClip界面，SpirteSheet相比上幾個版本沒有怎麼變化，工具提供了兩種數據導入的方式，拖拽或者點擊菜單導入，右下角能夠點擊查看使用教程。

 

 

2.界面介紹 附加拓展名：能夠對紋理名稱追加文件的拓展名，好比.png會被追加成_png，可是這個對Egret MovieClip是無效的。

佈局：BestAreaFit：區域適應

　　 　BestLongSideFit：長邊適應

　　 　BestShortSideFit：短邊適應

　　 　BottomLeftRule：左下角頁邊距框的樣式

　　 　ContactPointRule：鏈接點樣式 畫布：Power 2：獲得合適的2的次冪的尺寸

　　 　Free Size：獲得合適的自由尺寸。 間隙：調整各個圖片間的間隙，方便辨別

拓展：使圖片邊緣與邊框分離，能夠防止圖片裂縫

 

 

3.導入資源 容許一個文件包含多個動畫，工具方面也容許加載多個動畫。

對gif 的要求基本沒有，都能繪製出來，可是gif動畫製做方式存在不一樣，可能某些幀不能徹底繪製出來。

目前對SWF 是有要求的：swf 自己必須是個多幀mc，若是隻做爲容器嵌套其餘mc 子項的作法將不會被繪製。

點擊播放按鈕能夠預覽動畫，默認幀率爲24。也能夠導入多個資源。

 

 右鍵項目或動做能夠進行編輯：編輯能夠進行名稱修改和幀率修改；編輯中心點：按住ctrl或com鍵能夠更改中心點位置。

 

 

5.添加事件

只需在某一幀的名字前面加上@就能夠了，雙擊某幀就能夠更更名字，而後在導出json文件的」events」數組中就會出現相對應標籤名。 

 

​6.導出MovieClip

​選擇導出->選擇縮放比例->選擇保存位置

​最終導出了一個.json和.png文件

 

 

mc數據結構：

"mc": MovieClip數據列表, 列表中的每一個屬性都表明一個MovieClip名字

"frameRate": 幀率, 【可選屬性】，默認值24，能夠由開發者經過代碼設定

"labels": 幀標籤列表，【可選屬性】，若是沒有幀標籤，能夠不加這個屬性。

"name": 標籤名

"frame": 標籤所在的幀序號

"end": 標籤結束幀序號

"events": 特殊事件【可選屬性】

"res": 該關鍵幀幀上須要顯示的圖片資源，【可選屬性】，默認值爲空（用於空白幀的狀況）

"x": 圖片須要顯示的x座標, 【可選屬性】，默認值0

"y":圖片須要顯示的y座標, 【可選屬性】，默認值0

"res": 資源列表列表中的每一個屬性都表明一個資源名

"x": 資源所在紋理集位置的x座標

"y": 資源所在紋理集位置的y座標

"w": 資源寬度

"h": 資源高度

七、導入egret

將TextrueMerger導出的json與png文件放入到wing中的resource文件夾下，確認增長資源，而後須要引入Game類庫（由於Game已是egret內置類庫，因此能夠直接添加；其餘類庫添加請參考http://developer.egret.com/cn/github/egret-docs/extension/threes/instructions/index.html）：

​1）打開egretProperties.json文件，在modules下添加"name": "game"；注意：必定要保存。

​2）打開終端，輸入egret build -e。

​3）若是libs/modules下出現game文件夾，則類庫引入成功。

 

 

PS：引入未內置的類庫還有一種簡單的方法：

　　1.將類庫文件夾（包含三個文件，demo.js、demo.min.js、demo.d.ts）放在項目的上一層文件

　　2.編輯egretProperties.json文件，新增一個字段

　　{　　　"name": "demo", // 第三方庫的name　　"path": "../demo" // 路徑 （../意思是該項目的上一層文件夾）　　}

　　3.編譯egret build（編譯錯誤的話就egret clean）

　　4.libs/modules文件夾下若是出現該類庫文件夾就表明成功

　　　 注意：版本號必定要對應　　　 ​4）代碼編寫

//加載json文件與png文件
        let timeJson = RES.getRes("tim_json");
        let timePng = RES.getRes("tim_png");
//使用MovieClipDataFactory 類，能夠生成 MovieClipData 對象用於建立MovieClip,該數據集必須由Egret官方工具生成
        let timeFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(timeJson, timePng);
//根據名字生成一個MovieClipData實例
        let time1: egret.MovieClip = new egret.MovieClip(timeFactory.generateMovieClipData("zan"));
        time1.x=200;
        time1.y=400;
        this.addChild(time1);
//將播放頭移到指定幀並播放,
//參數：frame {any} 指定幀的幀號或幀標籤；
//     ayTimes {number} 播放次數。 參數爲整數，可選參數，>=1：設定播放次數，<0：循環播放，默認值0：不改變播放次數，
        time1.gotoAndPlay(0, -1);

 

2、建立紋理集合：SpriteSheet1.導入導出過程與Egret MovieClip一致。

其中附加拓展名：自動在圖片名後增長圖片格式。

注意：若是使用TextureMerger 打包後，發現使用圖集時有裂縫問題，請使用TextureMerger 1.7.0 或以上版本，在擴展設置爲1px 能夠解決。

2.導入egret

將TextrueMerger導出的json與png文件放入到wing中的resource文件夾下，確認增長資源。

點擊查看導入的json文件，能夠看到圖片集的名字、格式、以及單張圖片的名字及其餘信息：

 

{"file":"saber.png","frames":{
"saber1":{"x":412,"y":447,"w":500,"h":444,"offX":0,"offY":0,"sourceW":500,"sourceH":444},
"saber2":{"x":412,"y":1,"w":500,"h":444,"offX":0,"offY":0,"sourceW":500,"sourceH":444},
"saber3":{"x":1,"y":552,"w":310,"h":310,"offX":0,"offY":0,"sourceW":310,"sourceH":310},
"saber4":{"x":503,"y":893,"w":250,"h":459,"offX":0,"offY":0,"sourceW":250,"sourceH":459},
"saber5":{"x":1,"y":1,"w":409,"h":549,"offX":0,"offY":0,"sourceW":409,"sourceH":549},
"saber6":{"x":1,"y":893,"w":500,"h":361,"offX":0,"offY":0,"sourceW":500,"sourceH":361}}}

 

也能夠在default.res.json下看到，saber_json文件，它的二級key是剛纔的6張序列圖。

二級key等同於圖片的資源名，和普通的單張圖片資源名是同樣在Egret中使用的。

 

 

合圖預加載後能夠直接使用RES小圖名稱來獲取：

 

//加載saber1圖片
   let saber1:egret.Bitmap=new egret.Bitmap(RES.getRes("saber1"));
   this.addChild(saber1);
   saber1.scaleX=saber1.scaleY=0.5;
//加載saber2圖片
   let saber2:egret.Bitmap=new egret.Bitmap(RES.getRes("saber2"));
   this.addChild(saber2);
   saber2.x=300;
   saber2.scaleX=saber2.scaleY=0.5;
//加載saber3圖片
    let saber3:egret.Bitmap=new egret.Bitmap(RES.getRes("saber3"));
   this.addChild(saber3);
   saber3.y=300;
   saber3.scaleX=saber3.scaleY=0.5;
//加載saber4圖片
   let saber4:egret.Bitmap=new egret.Bitmap(RES.getRes("saber4"));
   this.addChild(saber4);
   saber4.x=200;
   saber4.y=300;
   saber4.scaleX=saber4.scaleY=0.5;
//加載saber5圖片
   let saber5:egret.Bitmap=new egret.Bitmap(RES.getRes("saber5"));
   this.addChild(saber5);
   saber5.x=380;
   saber5.y=300;
   saber5.scaleX=saber5.scaleY=0.5;

 

運行程序，能夠看到咱們的DrawCall是1：

 

 

若是不使用TextureMerge進行圖片合併，而是直接將圖片導入進行加載的話，能夠看到咱們的DrawCall是5：

 

 

DrawCall是什麼？

DrawCall是openGL的描繪次數。

一個簡單的openGL的繪圖次序是：設置顏色→繪圖方式→頂點座標→繪製→結束。 

每幀都會重複以上的步驟。這就是一次draw call

若是有兩個model，那麼須要兩次draw calls;，分別是：

​設置顏色→繪圖方式→頂點座標A→繪製→結束。 

​設置顏色→繪圖方式→頂點座標B→繪製→結束。 

也就是說在openGl繪製前，若是色彩通道(colorfilter)，繪圖方式(shader)，頂點座標（model）不一樣的狀況下draw calls就會增長。

對openGl來講繪製參數（狀態值）的變動要比繪製大量的頂點更耗費cpu。

能夠看出使用TextureMerge進行圖片合併後，能夠大量減小DrawCall的數量，從而大大優化CPU。

3、建立特殊字體：Bitmap Font

一、方法1：系統字體，適合使用已安裝的系統字體來製做位圖字體

選擇更多字符，系統字體，調整字體類型、大小、顏色、是否加粗，點擊肯定。TextureMerger會將這些字體制做爲圖片。注意了空格字符也是要輸入的。

 

 

二、方法2：添加字符，適合一張一張的零碎圖片來製做位圖字體

選擇0 1 2 字體圖片，記得去掉附加拓展名的勾。由於左側的命名和右側的圖片是對應關係，命名「0」就表明了圖片0。若是增長了拓展名，那麼你在文本中顯示0須要label.text = "0_png"。

三、方法3：字體紋理集，適合美術提供的整張圖字體來製做位圖字體

字符集這塊是爲了方便更個性的字體而生的，美術人員能夠將畫好的字符整齊的排列好導成一張圖片，而後用工具導入便可，工具會自動識別每一個字符的區域，咱們須要作的就是在下面的文本框依次填寫對應的文本就行啦。按順序輸入字符後，點擊肯定。

導出：

最終導出了一個.fnt和.png文件

導入egret：

將TextrueMerger導出的fnt與png文件放入到wing中的resource文件夾下，確認增長資源。

打開導出的.fnt文件，能夠看到位圖文字的名字、格式字及其餘信息

 

{"file":"hello.png","frames":{
"H":{"x":1,"y":1,"w":17,"h":22,"offX":2,"offY":8,"sourceW":19,"sourceH":30},
"e":{"x":37,"y":26,"w":14,"h":15,"offX":4,"offY":15,"sourceW":18,"sourceH":30},
"l":{"x":37,"y":1,"w":11,"h":23,"offX":5,"offY":7,"sourceW":16,"sourceH":30},
"o":{"x":19,"y":46,"w":15,"h":15,"offX":3,"offY":15,"sourceW":18,"sourceH":30},
" ":{"x":58,"y":1,"w":5,"h":5,"offX":0,"offY":0,"sourceW":17,"sourceH":48},
"E":{"x":1,"y":25,"w":16,"h":22,"offX":3,"offY":8,"sourceW":19,"sourceH":30},
"g":{"x":19,"y":25,"w":16,"h":19,"offX":3,"offY":15,"sourceW":19,"sourceH":34},
"r":{"x":36,"y":46,"w":15,"h":15,"offX":3,"offY":15,"sourceW":18,"sourceH":30},
"t":{"x":20,"y":1,"w":13,"h":20,"offX":4,"offY":10,"sourceW":17,"sourceH":30},
"！":{"x":50,"y":1,"w":6,"h":21,"offX":9,"offY":8,"sourceW":15,"sourceH":29}}}

 

加載位圖文字：

 

//位圖字體採用了Bitmap+SpriteSheet的方式來渲染文字
        let hello: egret.BitmapText = new egret.BitmapText();
//要使用的字體的名稱或用逗號分隔的字體名稱列表，類型必須是BitmapFont   
        hello.font = RES.getRes("hello_fnt");
//要顯示的文本內容
        hello.text = "Hello";
        this.addChild(hello);

 

 

小結：

經過本文您是否學會了Texture Merger的使用了呢？有任何技術問題或者認爲這篇文章對您有所幫助，歡迎在評論區留言與咱們交流互動！