cocos html5只有一个文件,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);

});

}

};

上面说了那么多，首先需要解决的是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;