摘要：對的要求基本沒有，都能繪制出來，但是動畫制作方式存在不同，可能某些幀不能完全繪制出來。目前對是有要求的本身必須是個多幀，如果只作為容器嵌套其他子項(xiàng)的做法將不會被繪制。點(diǎn)擊播放按鈕可以預(yù)覽動畫，默認(rèn)幀率為。

Texture Merger 可將零散紋理拼合為整圖，同時也可以解析SWF、GIF動畫，制作Egret位圖文本，導(dǎo)出可供Egret使用的配置文件，其紋理集制作功能在小游戲開發(fā)中可以起到降低小游戲包體的作用，是開發(fā)者們最為喜歡的靠譜軟件開發(fā)工具之一。

下面就為大家介紹Texture Merger的使用教程。

Texture Merge1.7.2版本相比之前操作更加便利，優(yōu)化了內(nèi)存占用，修復(fù)了命令行輸出json中key值錯誤的問題。

打開TextureMerger，分為三個選項(xiàng)：

1.Egret MovieClip主要用于游戲中的動畫制作和播放，支持swf、gif等。

2.Sprite Sheet主要用于將零碎的小圖合并成一張整圖，減少加載圖片時http的請求次數(shù)。

3.BitmapFont主要用于特殊字體在游戲中的使用。

一、創(chuàng)建動畫：Egret MovieClip

1.打開Egret MovieClip界面：SpirteSheet相比上幾個版本沒有怎么變化，工具提供了兩種數(shù)據(jù)導(dǎo)入的方式，拖拽或者點(diǎn)擊菜單導(dǎo)入，右下角可以點(diǎn)擊查看使用教程。

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

布局：BestAreaFit：區(qū)域適應(yīng)

BestLongSideFit：長邊適應(yīng)

BestShortSideFit：短邊適應(yīng)

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

ContactPointRule：連接點(diǎn)樣式 畫布：Power 2：得到合適的2的次冪的尺寸

Free Size：得到合適的自由尺寸。 間隙：調(diào)整各個圖片間的間隙，方便辨別

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

3.導(dǎo)入資源 允許一個文件包含多個動畫，工具方面也允許加載多個動畫。

對 gif 的要求基本沒有，都能繪制出來，但是gif動畫制作方式存在不同，可能某些幀不能完全繪制出來。

目前對 SWF 是有要求的：swf 本身必須是個多幀mc，如果只作為容器嵌套其他 mc 子項(xiàng)的做法將不會被繪制。

點(diǎn)擊播放按鈕可以預(yù)覽動畫，默認(rèn)幀率為24。也可以導(dǎo)入多個資源。

4.鍵項(xiàng)目或動作可以進(jìn)行編輯：編輯可以進(jìn)行名稱修改和幀率修改；編輯中心點(diǎn)：按住ctrl或com鍵可以更改中心點(diǎn)位置。

5.添加事件

只需在某一幀的名字前面加上@就可以了，雙擊某幀就可以更改名字，然后在導(dǎo)出json文件的”events”數(shù)組中就會出現(xiàn)相對應(yīng)標(biāo)簽名。

6.導(dǎo)出MovieClip

選擇導(dǎo)出->選擇縮放比例->選擇保存位置

最終導(dǎo)出了一個.json和.png文件

mc數(shù)據(jù)結(jié)構(gòu)：

"mc": MovieClip數(shù)據(jù)列表, 列表中的每個屬性都代表一個MovieClip名字

"frameRate": 幀率, 【可選屬性】，默認(rèn)值24，可以由開發(fā)者通過代碼設(shè)定

"labels": 幀標(biāo)簽列表，【可選屬性】，如果沒有幀標(biāo)簽，可以不加這個屬性。

"name": 標(biāo)簽名

"frame": 標(biāo)簽所在的幀序號

"end": 標(biāo)簽結(jié)束幀序號

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

"res": 該關(guān)鍵幀幀上需要顯示的圖片資源，【可選屬性】，默認(rèn)值為空（用于空白幀的情況）

"x": 圖片需要顯示的x坐標(biāo), 【可選屬性】，默認(rèn)值0

"y":圖片需要顯示的y坐標(biāo), 【可選屬性】，默認(rèn)值0

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

"x": 資源所在紋理集位置的x坐標(biāo)

"y": 資源所在紋理集位置的y坐標(biāo)

"w": 資源寬度

"h": 資源高度

7、導(dǎo)入egret

將TextrueMerger導(dǎo)出的json與png文件放入到wing中的resource文件夾下，確認(rèn)增加資源，然后需要引入Game類庫（因?yàn)镚ame已經(jīng)是egret內(nèi)置類庫，所以可以直接添加；其他類庫添加請參考http://developer.egret.com/cn...）：

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

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

3）如果libs/modules下出現(xiàn)game文件夾，則類庫引入成功。

PS：引入未內(nèi)置的類庫還有一種簡單的方法：

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

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

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

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

4.libs/modules文件夾下如果出現(xiàn)該類庫文件夾就代表成功

注意：版本號一定要對應(yīng)　　　

代碼編寫

//加載json文件與png文件
        let timeJson = RES.getRes("tim_json");
        let timePng = RES.getRes("tim_png");
//使用 MovieClipDataFactory 類，可以生成 MovieClipData 對象用于創(chuàng)建MovieClip,該數(shù)據(jù)集必須由Egret官方工具生成
        let timeFactory: egret.MovieClipDataFactory = new egret.MovieClipDataFactory(timeJson, timePng);
//根據(jù)名字生成一個MovieClipData實(shí)例
        let time1: egret.MovieClip = new egret.MovieClip(timeFactory.generateMovieClipData("zan"));
        time1.x=200;
        time1.y=400;
        this.addChild(time1);
//將播放頭移到指定幀并播放,
//參數(shù)：frame {any} 指定幀的幀號或幀標(biāo)簽；
//     ayTimes {number} 播放次數(shù)。 參數(shù)為整數(shù)，可選參數(shù)，>=1：設(shè)定播放次數(shù)，<0：循環(huán)播放，默認(rèn)值 0：不改變播放次數(shù)，
        time1.gotoAndPlay(0, -1);

二、創(chuàng)建紋理集合：SpriteSheet1.導(dǎo)入導(dǎo)出過程與Egret MovieClip一致。

1.其中附加拓展名：自動在圖片名后增加圖片格式。

注意：如果使用 TextureMerger 打包后，發(fā)現(xiàn)使用圖集時有裂縫問題，請使用 TextureMerger 1.7.0 或以上版本，在擴(kuò)展設(shè)置為 1px 可以解決。

2.導(dǎo)入egret

將TextrueMerger導(dǎo)出的json與png文件放入到wing中的resource文件夾下，確認(rèn)增加資源。

點(diǎn)擊查看導(dǎo)入的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中使用的。

預(yù)加載后可以直接使用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;

運(yùn)行程序，可以看到我們的DrawCall是1：

如果不使用TextureMerge進(jìn)行圖片合并，而是直接將圖片導(dǎo)入進(jìn)行加載的話，可以看到我們的DrawCall是5：

DrawCall是什么？

DrawCall是openGL的描繪次數(shù)。

一個簡單的openGL的繪圖次序是：設(shè)置顏色→繪圖方式→頂點(diǎn)座標(biāo)→繪制→結(jié)束。

每幀都會重復(fù)以上的步驟。這就是一次draw call

如果有兩個model，那么需要兩次draw calls;，分別是：

設(shè)置顏色→繪圖方式→頂點(diǎn)座標(biāo)A→繪制→結(jié)束。

設(shè)置顏色→繪圖方式→頂點(diǎn)座標(biāo)B→繪制→結(jié)束。

也就是說在openGl繪制前，如果色彩通道(colorfilter)，繪圖方式(shader)，頂點(diǎn)座標(biāo)（model）不同的情況下draw calls就會增加。

對openGl來說繪制參數(shù)（狀態(tài)值）的變更要比繪制大量的頂點(diǎn)更耗費(fèi)cpu。

可以看出使用TextureMerge進(jìn)行圖片合并后，可以大量減少DrawCall的數(shù)量，從而大大優(yōu)化CPU。

三、創(chuàng)建特殊字體：Bitmap Font

方法1：系統(tǒng)字體，適合使用已安裝的系統(tǒng)字體來制作位圖字體。

選擇更多字符，系統(tǒng)字體，調(diào)整字體類型、大小、顏色、是否加粗，點(diǎn)擊確定。TextureMerger會將這些字體制作為圖片。

注意：空格字符也是要輸入的。

方法2：添加字符，適合一張一張的零碎圖片來制作位圖字體。

選擇0 1 2 字體圖片，記得去掉附加拓展名的勾。因?yàn)樽髠?cè)的命名和右側(cè)的圖片是對應(yīng)關(guān)系，命名“0”就代表了圖片0。如果增加了拓展名，那么你在文本中顯示0需要 label.text = "0_png"。

方法3：字體紋理集，適合美術(shù)提供的整張圖字體來制作位圖字體。

字符集這塊是為了方便更個性的字體而生的，美術(shù)人員可以將畫好的字符整齊的排列好導(dǎo)成一張圖片，然后用工具導(dǎo)入即可，工具會自動識別每個字符的區(qū)域，我們需要做的就是在下面的文本框依次填寫對應(yīng)的文本就行啦。按順序輸入字符后，點(diǎn)擊確定。

導(dǎo)出：

最終導(dǎo)出了一個.fnt和.png文件

導(dǎo)入egret：

將TextrueMerger導(dǎo)出的fnt與png文件放入到wing中的resource文件夾下，確認(rèn)增加資源。

打開導(dǎo)出的.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");
//要顯示的文本內(nèi)容
        hello.text = "Hello";
        this.addChild(hello);

小結(jié)：

通過本文您是否學(xué)會了Texture Merger的使用了呢？有任何技術(shù)問題或者認(rèn)為這篇文章對您有所幫助，歡迎在評論區(qū)留言與我們交流互動！