纹理集打包和动画转换东西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重要用于特别字体在游戏中的运用。

《纹理集打包和动画转换东西Texture Merge的运用教程》

一、建立动画:Egret MovieClip

1.翻开Egret MovieClip界面:SpirteSheet比拟上几个版本没有怎样变化,东西供应了两种数据导入的体式格局,拖拽或许点击菜单导入,右下角能够点击检察运用教程。

《纹理集打包和动画转换东西Texture Merge的运用教程》

2.界面引见 附加拓展名:能够对纹理称号追加文件的拓展名,比方.png会被追加成_png,然则这个对Egret MovieClip是无效的。

规划:BestAreaFit:地区顺应

BestLongSideFit:长边顺应

BestShortSideFit:短边顺应

BottomLeftRule:左下角页边距框的款式

ContactPointRule:衔接点款式 画布:Power 2:获得适宜的2的次幂的尺寸

Free Size:获得适宜的自在尺寸。 间隙:调解各个图片间的间隙,轻易分辨

拓展:使图片边沿与边框星散,能够防备图片裂痕

《纹理集打包和动画转换东西Texture Merge的运用教程》

3.导入资本 许可一个文件包括多个动画,东西方面也许可加载多个动画。

对 gif 的请求基础没有,都能绘制出来,然则gif动画制造体式格局存在差别,能够某些帧不能完整绘制出来。

现在对 SWF 是有请求的:swf 自身必需是个多帧mc,假如只作为容器嵌套其他 mc 子项的做法将不会被绘制。

点击播放按钮能够预览动画,默许帧率为24。也能够导入多个资本。

《纹理集打包和动画转换东西Texture Merge的运用教程》

4.键项目或行动能够举行编辑:编辑能够举行称号修正和帧率修正;编辑中心点:按住ctrl或com键能够变动中心点位置。

《纹理集打包和动画转换东西Texture Merge的运用教程》

5.增添事宜

只需在某一帧的名字前面加上@就能够了,双击某帧就能够变动名字,然后在导出json文件的”events”数组中就会涌现相对应标署名。

《纹理集打包和动画转换东西Texture Merge的运用教程》

6.导出MovieClip

挑选导出->挑选缩放比例->挑选保留位置

终究导出了一个.json和.png文件

《纹理集打包和动画转换东西Texture Merge的运用教程》

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文件夹,则类库引入胜利。

《纹理集打包和动画转换东西Texture Merge的运用教程》

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中运用的。

《纹理集打包和动画转换东西Texture Merge的运用教程》

预加载后能够直接运用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:

《纹理集打包和动画转换东西Texture Merge的运用教程》

假如不运用TextureMerge举行图片兼并,而是直接将图片导入举行加载的话,能够看到我们的DrawCall是5:

《纹理集打包和动画转换东西Texture Merge的运用教程》

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会将这些字体制造为图片。

注重:空格字符也是要输入的。

《纹理集打包和动画转换东西Texture Merge的运用教程》

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

    原文作者:Mandy
    原文地址: https://segmentfault.com/a/1190000017065574
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞