Egret社区

TextureMerger 使用说明

2014-9-2 20:30
4559356
本帖最后由 yangning20008 于 2016-4-12 10:37 编辑


1.选择编辑类型
1.png
TexureMerger 1.5.0 相比之前多了一个新功能 BitmapFont 这个功能是用来制作纹理字体的。稍后会介绍这部门,咱么按照之前的教程顺序继续往下看,选择SpriteSheet选项。


2.SpriteSheet
2.png
SpirteSheet'相比上几个版本没有怎么变化,工具提供了两种数据导入的方式,拖拽或者点击菜单导入。下面的状态栏有纹理大小、缩放、当前编辑格式的信息。右下角添加了一个查看教程的快捷按钮,有些新童鞋不知道怎么用的可以点这里。

3.png 4.png 5.png

附加拓展名的配置可以对纹理名称追加文件的拓展名,比如.png会被追加成_png,这个对Egret MovieClip是无效的,供了两种自动匹配策略:Power 2,Free Size前者可以得到合适的2的幂的尺寸,后者可以得到合适的自由尺寸。切除透明边界 是指将透明图片周围透明的部分全部切掉。具体效果大家试一下就知道啦。下面我们来导入一些纹理素材。

2.1导入纹理素材
6.png
导入素材后我们便可以看到布局好的大纹理啦,工具对导入的纹理做了去重处理,相同的纹理不会重复显示,只保留纹理名称。左侧有对应的纹理列表,这些名称是跟文件名一致的,通过列表我们可以看到对应的纹理框在大图上的位置,也可以Ctrl或者Shift键多选后Delete删除无用纹理,右键删除选项也可以完成操作。

2.2保存与打开
7.png
也可以把当前编辑的纹理集信息保存为项目文件,方便日后修改

3.新建
8.png
如果想继续编辑的话,我们点击新建,界面就和启动界面一样,这次我们选择 Egret MovieClip。

3.Egret MovieClip
1.5.3版本对MovieClip的做了调整,支持对序列帧图片的编辑,保留原来swf与gif的导入,swf本身必须是个多帧mc,如果只是作为容器嵌套其他mc子项的做法将不会被绘制。对gif的要求基本没有,都能绘制出来,但是gif动画制作方式的存在不同,可能某些帧不能完全绘制出来。
9.png
下面我们来看一下,最新的mc数据结构:

MovieClip数据格式标准
{
"file":"icons.png"
"mc": {
        "mc_name1":
                         {
                          "frameRate": 24,
                                 "labels": [
                                               { "name": "stand", "frame": 1}
                                              ],
                                "frames": [
                                               { "res": "res_name1","x": 3,"y": 0,"duration": 2}
                                               ],
                               "actions": [
                                               { "name": "action_name1", "frame": 1}
                                              ],
                                "scripts": [
                                              { "frame": 1,"func": "gotoAndPlay","args": ["attack"]}
                                              ]
                         }
        },
"res":
       {
         " res_name1": {"x": 170,"y": 674,"w": 80,"h": 110}
        }
}
"file": 该数据文件对应的纹理文件路径 (用于帮助工具匹配对应的问题,引擎中不会解析这个属性)
"mc": MovieClip数据列表,
列表中的每个属性都代表一个MovieClip名字
"frameRate": 帧率, 【可选属性】,默认值24,可以由开发者通过代码设定
"labels": 帧标签列表,【可选属性】,如果没有帧标签,可以不加这个属性。
"name": 标签名
"frame": 标签所在的帧序号
"frame": 关键帧数据列表
"res": 该关键帧帧上需要显示的图片资源,【可选属性】,默认值为空(用于空白帧的情况)
"x": 图片需要显示的x坐标, 【可选属性】,默认值0
"y":图片需要显示的y坐标, 【可选属性】,默认值0
"duration": 该关键帧持续的帧数,【可选属性】,默认值1
"actions": 帧动作列表,用于抛出自定义事件,【可选属性】,如果没有帧动作,可以不加这个属性。
"name": 动作名
"frame": 动作所在的帧序号
"scripts": 帧脚本列表,【可选属性】,如果没有帧动作,可以不加这个属性。
"frame": 脚本所在的帧序号
"func": 脚本调用的方法名 支持动画播放相关的的6个API
"args": 脚本调用方法使用的参数列表 【可选属性】,默认值空
"res": 资源列表
列表中的每个属性都代表一个资源名
"x": 资源所在纹理集位置的x坐标
"y": 资源所在纹理集位置的y坐标
"w": 资源宽度
"h": 资源高度
其中:actionsscripts暂时还未启用,日后会用到的
3.1 新建动画 新建动画.png
可以新建一个空白的动画,设置好帧率和名称便可

3.1新建动作
新建动作.png
右键我们新建的动画,选择 新建动作 可以为我们的动画添加一个动作

3.2 插入序列帧
插入帧.png
右键动作 选择 插入序列帧 可以将我们的序列帧图片导入到该动作

3.3 预览动作
预览.png
右键动作选择 预览 可以预览我们的动作,帧率如果觉得不合适可以修改动作的帧率,播放的图片如果顺序不对的话也一个拖拽动作里面的帧来调整位置



4.Bitmap Font
这个功能是1.5.0新增的功能,方便我们制作纹理字体,这个功能支持三种形式加载方式:散列单个字符图片、整张字符集图片、系统字体
默认操作是单个字符图片的导入,要想使用其他两种方式可以从“其他字符”中查看。
单个字符导入比较简单,就跟SpriteSheet的操作一样。下面着重看一下另外两个方式。

4.1系统字体
10.png
这里可以获取系统的字体,同时可设置字体的大小,颜色,粗细,然后在输入框输入自己想要的字符就可以了,这里注意了空格字符也是要输入的。


4.2字符集
11.png
字符集这块是为了方便更个性的字体而生的,美术人员可以将画好的字符整齐的排列好导成一张图片,然后用工具导入即可,工具会自动识别每个字符的区域,(小贴士:字体的像素不能紧贴四边,四周要留出一个像素以上的空白区)我们需要做的就是在下面的文本框依次填写对应的文本就行啦。



5.命令行调用1.5.2版本的TextureMerger支持简单命令行调用
5.1 打包命令
命令格式:-p [目录] [...] -o [json输出路径] -e [文件筛选正则表达式]
命令示例:-p d:/Y1 d:/Y2 -o d:/yyy.json -e /.*\.(jpg|png),将D盘下Y1、Y2两个目录下所有png,jpg文件打包并输出到d盘的yyy.json。
-e 为可选命令 不写则默认打包textureMerger支持的所有图片

5.2 修改json命令
命令格式:-rp [json路径] -d [纹理key] [...] -a [文件路径] [...]
命令示例:-rp d:/user/aaa.json -d head leg -a d:/user/1.png  d:/user/2.png 修改D盘user目录下的aaa.json 文件,删除key为head、leg的纹理 并添加 1.png 、2.png。此命令覆盖原始文件。-d 与-a 为可选命令

5.3 转换动画命令
命令格式:-mc [目录][...] -o [输出路径] -e [文件筛选正则表达式]
命令示例:-mc d:/Y1 d:/Y2 -o d:/outpath -e /.*\.(swf|gif)。将D盘下Y1、Y2两个目录下的所有swf、gif文件进行转换并输出到D盘outpath目录中。
-e为可选命令 不写默认转换目录下所有被TextureMerger支持的动画文件




/////////////////////补充//////////////////
有朋友发现使用本工具反复对json进行编辑后导致图像质量严重下降的问题,这是由于对一张图反复编码、解码导致的,这里我们用了多个PNG编码库进行了测试


原图:
QQ截图20150729121912.png

反复解码编码20次后的的结果:
QQ图片20150729121824.png QQ图片20150729121842.png

以上是两个png编码库执行之后的结果,都已经开启了最高质量,大家可以看到,第一个相对好一些,但是还是跟原图有了很大差距,至于为什么会出现如此大的差距还有待进一步探究。建议大家在以后维护纹理时尽量保存为项目文件,对项目文件进行二次编辑,而不是直接拖进json文件进行编辑













分享到 :
12 人收藏

56 个回复

倒序浏览
张宇  官方团队 | 2014-9-2 22:05:24
好东西,下载试一下
7yue  官方团队 | 2014-9-3 13:39:31
超好用的工具!大伙真的要试一下!
wcsdn  登堂入室 | 2014-9-4 09:11:26
nice。。。
rockyf  圆转纯熟 | 2014-9-10 17:53:10
纸片人吗?
yangning20008  官方团队 | 2014-9-12 10:34:21
diablo  初学乍练 | 2014-9-16 13:30:02
问一下,支持trim么?去重处理时trim之后么?
yangning20008  官方团队 | 2014-9-16 14:01:57
diablo 发表于 2014-9-16 13:30
问一下,支持trim么?去重处理时trim之后么?

支持的,同一个纹理数据,只是文件名称不一样的话,它们共享一个纹理
zhangjian1895  初学乍练 | 2014-9-16 14:44:37
gif 高大商
diablo  初学乍练 | 2014-9-16 22:44:21
yangning20008 发表于 2014-9-16 14:01
支持的,同一个纹理数据,只是文件名称不一样的话,它们共享一个纹理

大赞!下来试一下,看来可以完全取代TexturePacker了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部