統一引擎內部創建SpriteFrame的數據結構
將Plist的解析工作轉移到了cc._plistLoader中去,對SAXParser進行了改造。
統一了引擎創建SpriteFrame的數據結構:
{
_inited : true,
frames : {
"a_frame_0.png" : {
rect : {x : 0, y : 0, width : 1, height : 1},
rotated : false,
offset : {x : 0, y : 0},
size : {width : 1, height : 1}
aliases : ["a_f_0"]
}
},
meta : {
image : "a.png"
}
}
引擎在創建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的內容就不貼了):
{
"tcc_issue_1.plist" : {
"frames" : {
"grossini_dance_01.png" : {
"rect" : [2, 79, 51, 109],
"offset" : [0, -1],
"size" : [85, 121],
"rotated" : true
},
"grossini_dance_05.png" : {
"rect" : [2, 2, 75, 109],
"offset" : [-1, -1],
"size" : [85, 121],
"rotated" : true
},
"grossini_dance_08.png" : {
"rect" : [2, 79, 51,109],
"offset" : [0, -1],
"size" : [85, 121]
}
}
},
"tcc_issue_2.plist" : {
"frames" : {
"grossini_dance_13.png" : {
"rect" : [2, 52, 51, 109],
"offset" : [0, -1],
"size" : [85, 121],
"rotated" : true
},
"grossinis_sister1.png" : {
"rect" : [2, 2, 48, 113],
"offset" : [-1, -11],
"size" : [52, 139],
"rotated" : true
},
"grossinis_sister2.png" : {
"rect" : [2, 105, 54, 126],
"offset" : [-1, -2],
"size" : [56, 138]
}
}
}
}
(由於meta.image
爲對應plist文件名改後綴名爲png
,故可以不配置meta
屬性。)
接着我們可以自定義一個loader插件用於加載、解析pkgJson,loader插件代碼如下:
/**
* This is a loader to merge plist files to one file.
*/
cc._pkgJsonLoader = {
/**
* @constant
*/
KEY : {
frames : "frames",
rect : "rect", size : "size", offset : "offset", rotated : "rotated", aliases : "aliases",
meta : "meta",
image : "image"
},
/**
* @constant
*/
MIN_KEY : {
frames : 0,
rect : 0, size : 1, offset : 2, rotated : 3, aliases : 4,
meta : 1,
image : 0
},
_parse : function(data){
var KEY = data instanceof Array ? this.MIN_KEY : this.KEY;
var frames = {}, meta = data[KEY.meta] ? {image : data[KEY.meta][KEY.image]} : {};
var tempFrames = data[KEY.frames];
for (var frameName in tempFrames) {
var f = tempFrames[frameName];
var rect = f[KEY.rect];
var size = f[KEY.size];
var offset = f[KEY.offset];
frames[frameName] = {
rect : {x : rect[0], y : rect[1], width : rect[2], height : rect[3]},
size : {width : size[0], height : size[1]},
offset : {x : offset[0], y : offset[1]},
rotated : f[KEY.rotated],
aliases : f[KEY.aliases]
}
}
return {_inited : true, frames : frames, meta : meta};
},
load : function(realUrl, url, res, cb){
var self = this, locLoader = cc.loader, cache = locLoader.cache;
locLoader.loadJson(realUrl, function(err, pkg){
if(err) return cb(err);
var dir = cc.path.dirname(url);
for (var key in pkg) {
var filePath = cc.path.join(dir, key);
cache[filePath] = self._parse(pkg[key]);
}
cb(null, true);
});
}
};
cc.loader.register(["pkgJson"], cc._pkgJsonLoader);
pkgJson其實就是一個json文件,那爲什麼不直接叫做json呢?因爲每個loader插件是根據後綴名進行處理的, 如果也叫json那就會使用cc._jsonLoader
進行加載了。
還可以支持混淆壓縮模式:
{
"tcc_issue_1.plist":[{
"grossini_dance_01.png":[[2, 79, 51, 109],[85, 121],[0, -1],1],
"grossini_dance_05.png":[[2, 2, 75, 109],[85, 121],[-1, -1],1],
"grossini_dance_08.png":[[2, 79, 51,109],[85, 121],[0, -1]]
}],
"tcc_issue_2.plist":[{
"grossini_dance_13.png":[[2, 52, 51, 109],[85, 121],[0, -1],1],
"grossinis_sister1.png":[[2, 2, 48, 113],[52, 139],[-1, -11],1],
"grossinis_sister2.png":[[2, 105, 54, 126],[56, 138],[-1, -2]]
}]
}
這個混淆壓縮模式有什麼用呢?
1、減少配置文件的大小;
2、將多個配置文件整理合併到一個,減少網絡連接請求數量。
用這種方式可以很好的解決plist
文件在H5上帶來的各種問題,同時可以讓開發者在開發的時候用plist進行開發,在發佈的時候使用pkgJson進行發佈, 卻不需要改動項目代碼,只需要把資源加載列表中的plsit替換成對於的pkgJson就可以了。
但是目前,jsb尚無法支持自定義資源加載器插件,該功能只能在HTML5上使用。