TextureMerger可以将分散的纹理组合成一个整体图像，还可以解析SWF和GIF动画，制作Egret位图文本，导出配置文件供Egret使用。其贴图集制作功能可以在小游戏开发中起到减小小游戏包体积的作用，是开发者最值得信赖的软件开发工具之一。以下是有关如何使用TextureMerger的教程。TextureMerge1.7.2版本比之前操作更方便，优化了内存使用，修复了命令行输出json中键值错误的问题。打开TextureMerger，有三个选项：1.EgretMovieClip主要用于游戏中的动画制作和播放，支持swf、gif等2.SpriteSheet主要用于将零碎的小图片合并成一个整体，减少加载图片时的http请求数。3.BitmapFont主要用于游戏中特殊字体的使用。一、创建动画：EgretMovieClip1、打开EgretMovieClip界面：SpirteSheet和之前的版本相比没有太大变化。工具提供了两种导入数据的方式，拖拽或者点击菜单导入，右下角可以点击查看教程。2.接口介绍附加扩展名：可以在纹理名称后附加文件扩展名，例如.png会附加为_png，但这对EgretMovieClip无效。Layout:BestAreaFit:AreafitBestLongSideFit:LongsidefitBestShortSideFit:ShortsidefitBottomLeftRule:左下边距框的样式ContactPointRule:连接点样式Canvas:Power2:获取正确的2次幂大小FreeSize:获取正确的大小均码。间隙：调整每张图片之间的间隙，便于识别。膨胀：将图片的边缘与边框分开，防止图片出现裂纹。3.导入资源允许一个文件包含多个动画，该工具还允许加载多个动画。gif基本没有要求，可以画，但是gif动画的制作方式不同，有些帧可能画不全。目前对SWF有要求：swf本身必须是多帧mc，如果只是作为容器嵌套其他mc子项，是不会绘制的。点击播放按钮预览动画，默认帧率为24。也可以导入多个资源。4.按键项或动作可编辑：编辑可修改名称和帧率；编辑中心点：按住ctrl或com键改变中心点的位置。5、添加事件只需要在某个帧的名称前加上@即可。双击某个框架可以更改名称，导出的json文件的“events”数组中就会出现相应的标签名称。6、导出MovieClip选择导出->选择缩放比例->选择保存位置，最后导出一个.json和.png文件mc数据结构：“mc”：MovieClip数据列表，列表中的每个属性代表一个MovieClip名称“frameRate”:framerate,[optionalattribute],默认值为24,开发者可以通过代码"labels"设置:framelabellist,[optionalattribute],如果没有framelabel,该属性可以省略。"name":标签名称"frame":标签所在帧号"end":标签结束帧号"events":特殊事件[可选属性]"res":关键帧上显示的图片资源，[optionalattribute]，默认值为空（在空白框的情况下使用）"x"：图片需要显示的x坐标，[optionalattribute]，默认值为0"y"：y坐标图片需要显示，【可选属性】，默认值为0"res":资源列表中的每个属性代表一个资源名称"x":资源所在纹理集的x坐标"y":资源所在纹理集的y坐标"w":资源宽度"h":资源高度7.导入egret将TextrueMerger导出的json和png文件放到wing中的resource文件夹中，确定添加resources，然后需要导入Game类库（因为Game类库已经内置egret类库，直接添加即可；其他类库添加请参考http://developer.egret.com/cn...）：1）打开egretProperties.json文件，在modules下添加“name”：“game”；注意：一定要保存。2）打开终端，输入egretbuild-e。3）如果游戏文件夹出现在libs/modules下，说明类库导入成功。PS：还有一个简单的方法引入一个没有内置的类库：1.把类库文件夹（包括三个文件，demo.js、demo.min.js、demo.d.ts）放在之前的项目中Layer文件2.编辑egretProperties.json文件，新增字段{ "name":"demo",//第三方库名称 "path":"../demo"//path（../表示项目的上层文件夹） }3.编译egretbuild（如果编译报错egretclean）4.如果类库文件夹出现在libs/modules文件夹下，则表示成功注意：版本号必须对应 代码写法//加载json文件和png文件lettimeJson=RES.getRes("tim_json");lettimePng=RES.getRes("tim_png");//使用MovieClipDataFactory类，可以生成一个MovieClipData对象来创建一个MovieClip。数据集必须使用Egret官方工具生成lettimeFactory:egret.MovieClipDataFactory=newegret.MovieClipDataFactory(timeJson,timePng);//根据名字生成一个MovieClipData实例lettime1:egret.MovieClip=newegret.MovieClip(timeFactory).generateMovieClipData("赞"));时间1.x=200；时间1.y=400；this.addChild(time1);//移动播放头到指定帧播放,//参数：frame{any}指定帧号或帧标签；//ayTimes{number}播放次数。参数为整数，可选参数，>=1：设置播放次数，<0：循环播放，默认值0：不改变播放次数，time1.gotoAndPlay(0,-1);2.创建贴图集合：SpriteSheet1。导入导出过程与EgretMovieClip一致。1.附加扩展：在图片名称后自动添加图片格式。注意：如果发现使用TextureMerger打包后的图集有裂痕，请使用TextureMerger1.7.0或以上版本，并将扩展设置为1px解决。2、导入egret，将TextrueMerger导出的json和png文件放入wing中的资源文件夹，确认添加资源。点击查看导入的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}}}在saber_json文件default.res.json下也可以看到，它的副键就是刚才的6张时序图。二级键相当于图片的资源名，在Egret中的使用与普通的单张图片资源名一样。预加载后可以直接使用RES缩略图的名称来获取：//loadsaber1pictureletsaber1:egret.Bitmap=newegret.Bitmap(RES.getRes("saber1"));this.addChild(saber1);saber1.scaleX=saber1.scaleY=0.5;//加载saber2图片letsaber2:egret.Bitmap=newegret.Bitmap(RES.getRes("saber2"));this.addChild(saber2);saber2.x=300；saber2.scaleX=saber2.scaleY=0.5;//加载saber3图片letsaber3:egret.Bitmap=newegret.Bitmap(RES.getRes("saber3"));this.addChild(saber3);saber3.y=300;saber3.scaleX=saber3.scaleY=0.5;//加载saber4图片letsaber4:egret.Bitmap=newegret.Bitmap(RES.getRes("saber4"));this.addChild(saber4);saber4.x=200；saber4.y=300;saber4.scaleX=saber4.scaleY=0.5;//加载saber5图片letsaber5:egret.Bitmap=newegret.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绘制顺序是：设置颜色→绘制模式→顶点坐标→绘制→结束。对每一帧重复上述步骤。这是一个抽奖电话。如果有两个模型，则需要两次绘制调用；分别是：设置颜色→绘制模式→顶点坐标A→绘制→结束。设置颜色→绘制方法→顶点坐标B→绘制→结束。也就是说，在openGl绘制之前，如果颜色通道（colorfilter）、绘制方法（shader）、顶点坐标（model）不同，drawcalls就会增加。对于openGl，改变绘图参数（状态值）比绘制大量顶点更消耗CPU。可以看到，使用TextureMerge合并图片后，DrawCall的次数可以大大减少，从而大大优化了CPU。3、创建特殊字体：位图字体方法一：系统字体，适用于使用已安装的系统字体制作位图字体。选择更多字符、系统字体、调整字体类型、大小、颜色、是否加粗，然后单击确定。TextureMerger会将这些字体制作成图像。注意：还要输入空格字符。方法二：添加字符，适用于用零碎的图片一个一个制作位图字体。选择012字体图片，记得取消勾选附加扩展名。因为左边的名字对应右边的图片，所以名字“0”代表图片0，如果加了扩展名，那么就需要label.text=“0_png”在文字中显示0。方法三：字体纹理集，适用于将美工提供的整张图片字体制作成位图字体。字符集是为了方便更个性化的字体。美术师可以将画好的人物整齐排列导入到图片中，再使用工具导入。该工具会自动识别每个字符的区域。我们只需要在下面的文本框中填写相应的文字即可。按顺序输入字符后，单击“确定”。导出：最后导出一个.fnt和.png文件导入egret：将TextrueMerger导出的fnt和png文件放到wing中的资源文件夹中，确认添加资源。打开导出的.fnt文件，可以看到位图文本的名称、格式字等信息。{“文件”：“hello.png”，“帧”：{“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}}}Loadbitmaptext://位图字体使用Bitmap+SpriteSheet渲染文字lethello:egret.BitmapText=newegret.BitmapText();//要使用的字体名称或使用逗号-分隔的字体名称列表，类型必须是BitmapFonthello.font=RES.getRes("hello_fnt");//要显示的文字内容hello.text="Hello";this.addChild(你好);总结：通过本文你学会了TextureMerger的使用了吗？如果您有什么技术问题或者觉得本文对您有帮助，欢迎在评论区留言与我们交流！
