摘要:對的要求基本沒有,都能繪制出來,但是動畫制作方式存在不同,可能某些幀不能完全繪制出來。目前對是有要求的本身必須是個多幀,如果只作為容器嵌套其他子項的做法將不會被繪制。點擊播放按鈕可以預覽動畫,默認幀率為。
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主要用于特殊字體在游戲中的使用。
一、創建動畫: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。也可以導入多個資源。
4.鍵項目或動作可以進行編輯:編輯可以進行名稱修改和幀率修改;編輯中心點:按住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": 資源高度
7、導入egret
將TextrueMerger導出的json與png文件放入到wing中的resource文件夾下,確認增加資源,然后需要引入Game類庫(因為Game已經是egret內置類庫,所以可以直接添加;其他類庫添加請參考http://developer.egret.com/cn...):
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文件夾下如果出現該類庫文件夾就代表成功
注意:版本號一定要對應
代碼編寫
//加載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);
二、創建紋理集合:SpriteSheet1.導入導出過程與Egret MovieClip一致。
1.其中附加拓展名:自動在圖片名后增加圖片格式。
注意:如果使用 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。
三、創建特殊字體: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的使用了呢?有任何技術問題或者認為這篇文章對您有所幫助,歡迎在評論區留言與我們交流互動!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108726.html
摘要:這個類可以大大減少后期的代碼量,降低整體的耦合度。關鍵代碼是把位圖按照區域進行分割,顯示對象的滾動矩形范圍。 這次給大家帶來的是通過Egret實現密室逃生小游戲的教程。該游戲包括人物狀態機、MVC設計模式和單例模式,該游戲在1.5s內通過玩家點擊操作尋找安全點,方可進入下一關,關卡無限,分數無限。下面是具體的模塊介紹和代碼實現。 該游戲主要內容包括 **開始游戲場景游戲場景游戲結束結算...
摘要:在控制臺中輸入路徑。因此,下一步是通過參考文件檢查訪問畫筆的位置。上下文畫筆紋理對比度由于每個屬性都是按照我們在控制臺中組成數據路徑的方式給出的可以有多種方式來訪問相同的數據,您選擇的方法通常取決于任務。 Blender參考API用法 Blender有許多互連數據類型,它們具有自動生成的引用api,它通常具有編寫腳本所需的信息,但可能難以使用。 本文檔旨在幫助您了解如何使用參考API。...
閱讀 2376·2021-09-22 15:15
閱讀 640·2021-09-02 15:11
閱讀 1784·2021-08-30 09:48
閱讀 1884·2019-08-30 15:56
閱讀 1480·2019-08-30 15:52
閱讀 2042·2019-08-30 15:44
閱讀 431·2019-08-29 16:29
閱讀 1538·2019-08-29 11:06