【cocos2d-js官方文档】十四、cc.spriteFrameCache 改造说明

统一引擎内部创建SpriteFrame的数据结构

将Plist的解析工作转移到了cc._plistLoader中去，对SAXParser进行了改造。

统一了引擎创建SpriteFrame的数据结构：

1.  
   {
2.  
   _inited : true,
3.  
   frames : {
4.  
   "a_frame_0.png" : {
5.  
   rect : {x : 0, y : 0, width : 1, height : 1},
6.  
   rotated : false,
7.  
   offset : {x : 0, y : 0},
8.  
   size : {width : 1, height : 1}
9.  
   aliases : ["a_f_0"]
10.  
    }
11.  
    },
12.  
    meta : {
13.  
    image : "a.png"
14.  
    }
15.  
    }

引擎在创建SpriteFrame的时候，读取了plist配置文件的信息后，会将其转换为以上的数据格式。

自定义SpriteFrame的配置文件

采用cc.loader的插件机制，我们可以很轻松的自定义自己的配置文件格式。SpriteFrame的各种格式的配置文件，只要转换成对应格式就行了。

例如，我们自定义了一个文件，用于存储原本配置在多个plist(res/ui/tcc_issue_1.plist, res/ui/tcc_issue_2.plist)的SpriteFrame的打包信息， 名为res/ui/imgs.pkgJson(plist的内容就不贴了)：

1.  
   {
2.  
   "tcc_issue_1.plist" : {
3.  
   "frames" : {
4.  
   "grossini_dance_01.png" : {
5.  
   "rect" : [2, 79, 51, 109],
6.  
   "offset" : [0, -1],
7.  
   "size" : [85, 121],
8.  
   "rotated" : true
9.  
   },
10.  
    "grossini_dance_05.png" : {
11.  
    "rect" : [2, 2, 75, 109],
12.  
    "offset" : [-1, -1],
13.  
    "size" : [85, 121],
14.  
    "rotated" : true
15.  
    },
16.  
    "grossini_dance_08.png" : {
17.  
    "rect" : [2, 79, 51,109],
18.  
    "offset" : [0, -1],
19.  
    "size" : [85, 121]
20.  
    }
21.  
    }
22.  
    },
23.  
    "tcc_issue_2.plist" : {
24.  
    "frames" : {
25.  
    "grossini_dance_13.png" : {
26.  
    "rect" : [2, 52, 51, 109],
27.  
    "offset" : [0, -1],
28.  
    "size" : [85, 121],
29.  
    "rotated" : true
30.  
    },
31.  
    "grossinis_sister1.png" : {
32.  
    "rect" : [2, 2, 48, 113],
33.  
    "offset" : [-1, -11],
34.  
    "size" : [52, 139],
35.  
    "rotated" : true
36.  
    },
37.  
    "grossinis_sister2.png" : {
38.  
    "rect" : [2, 105, 54, 126],
39.  
    "offset" : [-1, -2],
40.  
    "size" : [56, 138]
41.  
    }
42.  
    }
43.  
    }
44.  
    }

（由于meta.image为对应plist文件名改后缀名为png，故可以不配置meta属性。）

接着我们可以自定义一个loader插件用于加载、解析pkgJson，loader插件代码如下：

1.  
    
2.  
   /**
3.  
   * This is a loader to merge plist files to one file.
4.  
   */
5.  
   cc._pkgJsonLoader = {
6.  
   /**
7.  
   * @constant
8.  
   */
9.  
   KEY : {
10.  
    frames : "frames",
11.  
    rect : "rect", size : "size", offset : "offset", rotated : "rotated", aliases : "aliases",
12.  
     
13.  
    meta : "meta",
14.  
    image : "image"
15.  
    },
16.  
    /**
17.  
    * @constant
18.  
    */
19.  
    MIN_KEY : {
20.  
    frames : 0,
21.  
    rect : 0, size : 1, offset : 2, rotated : 3, aliases : 4,
22.  
     
23.  
    meta : 1,
24.  
    image : 0
25.  
    },
26.  
    _parse : function(data){
27.  
    var KEY = data instanceof Array ? this.MIN_KEY : this.KEY;
28.  
    var frames = {}, meta = data[KEY.meta] ? {image : data[KEY.meta][KEY.image]} : {};
29.  
    var tempFrames = data[KEY.frames];
30.  
    for (var frameName in tempFrames) {
31.  
    var f = tempFrames[frameName];
32.  
    var rect = f[KEY.rect];
33.  
    var size = f[KEY.size];
34.  
    var offset = f[KEY.offset];
35.  
    frames[frameName] = {
36.  
    rect : {x : rect[0], y : rect[1], width : rect[2], height : rect[3]},
37.  
    size : {width : size[0], height : size[1]},
38.  
    offset : {x : offset[0], y : offset[1]},
39.  
    rotated : f[KEY.rotated],
40.  
    aliases : f[KEY.aliases]
41.  
    }
42.  
    }
43.  
    return {_inited : true, frames : frames, meta : meta};
44.  
    },
45.  
    load : function(realUrl, url, res, cb){
46.  
    var self = this, locLoader = cc.loader, cache = locLoader.cache;
47.  
    locLoader.loadJson(realUrl, function(err, pkg){
48.  
    if(err) return cb(err);
49.  
    var dir = cc.path.dirname(url);
50.  
    for (var key in pkg) {
51.  
    var filePath = cc.path.join(dir, key);
52.  
    cache[filePath] = self._parse(pkg[key]);
53.  
    }
54.  
    cb(null, true);
55.  
    });
56.  
    }
57.  
    };
58.  
    cc.loader.register(["pkgJson"], cc._pkgJsonLoader);

pkgJson其实就是一个json文件，那为什么不直接叫做json呢？因为每个loader插件是根据后缀名进行处理的， 如果也叫json那就会使用cc._jsonLoader进行加载了。

还可以支持混淆压缩模式：

1.  
   {
2.  
   "tcc_issue_1.plist":[{
3.  
   "grossini_dance_01.png":[[2, 79, 51, 109],[85, 121],[0, -1],1],
4.  
   "grossini_dance_05.png":[[2, 2, 75, 109],[85, 121],[-1, -1],1],
5.  
   "grossini_dance_08.png":[[2, 79, 51,109],[85, 121],[0, -1]]
6.  
   }],
7.  
   "tcc_issue_2.plist":[{
8.  
   "grossini_dance_13.png":[[2, 52, 51, 109],[85, 121],[0, -1],1],
9.  
   "grossinis_sister1.png":[[2, 2, 48, 113],[52, 139],[-1, -11],1],
10.  
    "grossinis_sister2.png":[[2, 105, 54, 126],[56, 138],[-1, -2]]
11.  
    }]
12.  
    }

这个混淆压缩模式有什么用呢？

1、减少配置文件的大小；

2、将多个配置文件整理合并到一个，减少网络连接请求数量。

用这种方式可以很好的解决plist文件在H5上带来的各种问题，同时可以让开发者在开发的时候用plist进行开发，在发布的时候使用pkgJson进行发布， 却不需要改动项目代码，只需要把资源加载列表中的plsit替换成对于的pkgJson就可以了。

但是目前，jsb尚无法支持自定义资源加载器插件，该功能只能在HTML5上使用。

转载请注明：https://blog.csdn.net/qinning199/article/details/41924747