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

統一引擎內部創建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

發佈了51 篇原創文章 · 獲贊 73 · 訪問量 52萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章