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的运用了呢?有任何技术题目或许以为这篇文章对您有所协助,迎接在批评区留言与我们交换互动!