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

標籤：cocos2d   cocos2d-js   javascript   html5   js   

統一引擎內部建立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上使用。

轉載請註明：http://www.cocos2dx.net/post/218

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