Cocos2d-html5 plist优化 & plist文件加载解析

目前h5引擎正在处于研究阶段,基于Cocos2d-html5封装一个TS版的引擎库。

前言

之前在封装UI及Scene这块的内容,UI部分涉及到加载素材,也了解到cocos可以直接使用TexturePacker合成后的plist文件及png。但是对于H5的项目来说,减少网络请求是很重要的一步,特别是在页面初始化加载的时候。这时候在官网看到如下内容:cc.spriteFrameCache 改造说明
通俗来说,就是在知道SpriteFrame的数据结构之后,提前将plist文件的解析(这样可以做到将多个plist文件集合到一个文件中,减少加载次数)。官网有一个做法:

  • 提取n个plist文件至一个xx.pkgJson文件中,文件加载完毕后,使用自定义的_pkgJsonLoader对文件内容再次处理

我在按照此方法的处理过程中,发现_pkgJsonLoader中对数据结构处理的很少,只是做了数据提取部分。所以个人觉得在生成.pkgJson文件时,就可以直接按照SpriteFrame数据结构来生成数据,没有必要经过两次处理。以下是官网提供的思路:

// 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"
    }
}
// pkgJsonLoader核心代码
cc._pkgJsonLoader = {
    /**
     * @constant
     */
    _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);
        });
    }
};

cocos-pkgjson

上面说了那么多,首先需要解决的是plist数据解析的工具,可惜在官网上只提供了解析后的数据结构,没有解析工具。为此我在中文论坛及其它相关论坛都问了一遍,但是没有得到满意的答复。所以,决定自己造个轮子。我在npm上找到了plist包,试用了之后,发现plist可以将plist文件的数据提取出来,数据结构如下:

{
    "frames": {
        "0.png": {
            "aliases": [
                
            ],
            "spriteOffset": "{0,0}",
            "spriteSize": "{64,49}",
            "spriteSourceSize": "{64,49}",
            "textureRect": "{{1,55},{64,49}}",
            "textureRotated": false
        },
        "1.png": {
            "aliases": [
                
            ],
            "spriteOffset": "{0,0}",
            "spriteSize": "{67,52}",
            "spriteSourceSize": "{67,52}",
            "textureRect": "{{1,1},{67,52}}",
            "textureRotated": false
        }
    },
    "metadata": {
        "format": 3,
        "pixelFormat": "RGBA8888",
        "premultiplyAlpha": false,
        "realTextureFileName": "radio.png",
        "size": "{69,105}",
        "smartupdate": "$TexturePacker:SmartUpdate:305947cb63527c2d3a81c456831d3508:0ffe9fa733c7901a53ebea001548ed6d:eed519fbbdd46973eb5ec3b717bd80b1$",
        "textureFileName": "radio.png"
    }
}

其实,到了这一步,我要做的东西就很简单了。基于plist转换后的结构,提取出SprimeFrame需要的数据即可。提取结果:

{
    "_inited": true,
    "frames": {
        "0.png": {
            "rect": {
                "x": 1,
                "y": 55,
                "width": 64,
                "height": 49
            },
            "rotated": false,
            "offset": {
                "x": 0,
                "y": 0
            },
            "size": {
                "width": 64,
                "height": 49
            },
            "aliases": [
                
            ]
        },
        "1.png": {
            "rect": {
                "x": 1,
                "y": 1,
                "width": 67,
                "height": 52
            },
            "rotated": false,
            "offset": {
                "x": 0,
                "y": 0
            },
            "size": {
                "width": 67,
                "height": 52
            },
            "aliases": [
                
            ]
        }
    },
    "meta": {
        "image": "radio.png"
    }
}

配合自定义的cc._pkgJsonLoader:

cc._pkgJsonLoader = {
    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] = pkg[key];
            }
            cb(null, true);
        });
    }
};

cc.loader.register(["pkgJson"], cc._pkgJsonLoader);

问题解析

可能不了解的人会有疑问,为什么要处理plist,有什么优点呢?

其实之前提到过一部分,在此重点再说一次:

  • 减少网络请求——原先游戏在启动时,要将plist文件全部加载完成(不清楚到底有多少个),现在讲n个plist集成到一个.pkgJson文件中,一次网络请求即可
  • 避免解析数据——原有的plist文件加载完成后,底层还需要再次解析,而现在,.pkgJson中的内容就是直接可用的

cocos加载png plist时发生了什么

这部分是在和同事交流时发现一位使用了cocos很久的开发,对此过程中到底发生了什么也不太了解。

png(其它图片资源也是同样的情况)

  • 发起加载png资源的请求
  • cc.loader.cache缓存对应数据
  • cc.textureCache._textures缓存对应数据

plist

  • 发起加载plist资源的请求
  • cc.loader.cache缓存对应数据

此时,cc.loader.cache存储的还是xml中的内容:
当我们使用如下命令是:cc.spriteFrameCache.addSpriteFrames("xx.plist");

  • 获取plist对应的内容

    • 未初始化:解析数据,解析完数据后添加:"_inited": true属性,标记解析完成
    • 已初始化:直接使用数据
  • 从plist对应的图片资源中加载资源(这个时候使用cc.textureCache._textures,如果没有数据,会发起一次网络请求)
  • 将spriteFrame存储至_spriteFrames;

你可能感兴趣的:(cocos2d,cocos,cocos2d-js,cocos2d-html5)