我们知道Egret工具集中的Texture Merger，可将零散纹理拼合为整图，同时也可以解析SWF、GIF动画，导出可供Egret使用的配置文件。但是，在项目应用中，我们遇到了一些问题。由于设计师提供的gif图无法去除锯齿或白边，要想有比较完美的画质，只能提供动图的每一帧的png序列。虽然Texture Merger并没有将静态序列图转换为MovieClip可应用的动画文件的配置项，但我们可以先将png图片合成为雪碧图，通过观察动画数据的配置规则，我们可将雪碧图的json配置文件转化为动画数据配置文件。
步骤一：生成源数据
打开Texture Merger，选择编辑类型为Sprite Sheet，将纹理图全选（按顺序排列）拖入（记住千万不要直接拖文件夹，不然可能顺序会乱，就对不上动画的顺序了！！），完成后导出，会生成雪碧图和对应json。
步骤二（上代码啦）：将源数据转化为目标数据，可自定义帧率
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
const fs = require('fs');
const path = require('path');
const filePath = path.resolve('./spriteJson');
fileDisplay(filePath);
function fileDisplay(filePath) {
fs.readdir(filePath,function(err,files){
if(err){
console.warn(err);
}else{
files.forEach(function(filename){
if(filename.match(/.*\.json/)) {
const result = JSON.parse(fs.readFileSync(path.join(filePath, filename)));
readFile(result, filename);
}
})
}
})
};
function readFile(result, filename) {
const file = path.join(__dirname, `/resource/assets/mc/${filename}`);
const data = {};
const frameMsg = {};
frameMsg.frameRate = process.argv[2] || 25;
frameMsg.events = [];
frameMsg.frames = [];
Object.keys(result.frames).forEach((key) => {
frameMsg.frames.push({
"res": key,
"x": result.frames[key].offX,
"y": result.frames[key].offY,
})
delete result.frames[key].offX;
delete result.frames[key].offY;
delete result.frames[key].sourceW;
delete result.frames[key].sourceH;
});
data.mc = {};
data.mc[filename.match(/(.*)\.json/)[1]] = frameMsg;
data.res = result.frames;
fs.writeFile(file, JSON.stringify(data), function(err) {
if (err) {
console.warn(err);
}
console.log('文件创建成功，地址：' + file);
});
};
|
以上～生成的数据就可以直接当作动画数据用啦。如需要自定义FRAME_LABEL，可在代码中加入判断，或在生成的数据中手动添加。
