zoukankan      html  css  js  c++  java
  • 【cocos2d-js官方文档】十四、cc.spriteFrameCache 改造说明

    统一引擎内部创建SpriteFrame的数据结构

    将Plist的解析工作转移到了cc._plistLoader中去,对SAXParser进行了改造。

    统一了引擎创建SpriteFrame的数据结构:

    1.  
      {
    2.  
      _inited : true,
    3.  
      frames : {
    4.  
      "a_frame_0.png" : {
    5.  
      rect : {x : 0, y : 0, width : 1, height : 1},
    6.  
      rotated : false,
    7.  
      offset : {x : 0, y : 0},
    8.  
      size : {width : 1, height : 1}
    9.  
      aliases : ["a_f_0"]
    10.  
      }
    11.  
      },
    12.  
      meta : {
    13.  
      image : "a.png"
    14.  
      }
    15.  
      }

    引擎在创建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的内容就不贴了):

    1.  
      {
    2.  
      "tcc_issue_1.plist" : {
    3.  
      "frames" : {
    4.  
      "grossini_dance_01.png" : {
    5.  
      "rect" : [2, 79, 51, 109],
    6.  
      "offset" : [0, -1],
    7.  
      "size" : [85, 121],
    8.  
      "rotated" : true
    9.  
      },
    10.  
      "grossini_dance_05.png" : {
    11.  
      "rect" : [2, 2, 75, 109],
    12.  
      "offset" : [-1, -1],
    13.  
      "size" : [85, 121],
    14.  
      "rotated" : true
    15.  
      },
    16.  
      "grossini_dance_08.png" : {
    17.  
      "rect" : [2, 79, 51,109],
    18.  
      "offset" : [0, -1],
    19.  
      "size" : [85, 121]
    20.  
      }
    21.  
      }
    22.  
      },
    23.  
      "tcc_issue_2.plist" : {
    24.  
      "frames" : {
    25.  
      "grossini_dance_13.png" : {
    26.  
      "rect" : [2, 52, 51, 109],
    27.  
      "offset" : [0, -1],
    28.  
      "size" : [85, 121],
    29.  
      "rotated" : true
    30.  
      },
    31.  
      "grossinis_sister1.png" : {
    32.  
      "rect" : [2, 2, 48, 113],
    33.  
      "offset" : [-1, -11],
    34.  
      "size" : [52, 139],
    35.  
      "rotated" : true
    36.  
      },
    37.  
      "grossinis_sister2.png" : {
    38.  
      "rect" : [2, 105, 54, 126],
    39.  
      "offset" : [-1, -2],
    40.  
      "size" : [56, 138]
    41.  
      }
    42.  
      }
    43.  
      }
    44.  
      }

    (由于meta.image为对应plist文件名改后缀名为png,故可以不配置meta属性。)

    接着我们可以自定义一个loader插件用于加载、解析pkgJson,loader插件代码如下:

    1.  
       
    2.  
      /**
    3.  
      * This is a loader to merge plist files to one file.
    4.  
      */
    5.  
      cc._pkgJsonLoader = {
    6.  
      /**
    7.  
      * @constant
    8.  
      */
    9.  
      KEY : {
    10.  
      frames : "frames",
    11.  
      rect : "rect", size : "size", offset : "offset", rotated : "rotated", aliases : "aliases",
    12.  
       
    13.  
      meta : "meta",
    14.  
      image : "image"
    15.  
      },
    16.  
      /**
    17.  
      * @constant
    18.  
      */
    19.  
      MIN_KEY : {
    20.  
      frames : 0,
    21.  
      rect : 0, size : 1, offset : 2, rotated : 3, aliases : 4,
    22.  
       
    23.  
      meta : 1,
    24.  
      image : 0
    25.  
      },
    26.  
      _parse : function(data){
    27.  
      var KEY = data instanceof Array ? this.MIN_KEY : this.KEY;
    28.  
      var frames = {}, meta = data[KEY.meta] ? {image : data[KEY.meta][KEY.image]} : {};
    29.  
      var tempFrames = data[KEY.frames];
    30.  
      for (var frameName in tempFrames) {
    31.  
      var f = tempFrames[frameName];
    32.  
      var rect = f[KEY.rect];
    33.  
      var size = f[KEY.size];
    34.  
      var offset = f[KEY.offset];
    35.  
      frames[frameName] = {
    36.  
      rect : {x : rect[0], y : rect[1], width : rect[2], height : rect[3]},
    37.  
      size : {width : size[0], height : size[1]},
    38.  
      offset : {x : offset[0], y : offset[1]},
    39.  
      rotated : f[KEY.rotated],
    40.  
      aliases : f[KEY.aliases]
    41.  
      }
    42.  
      }
    43.  
      return {_inited : true, frames : frames, meta : meta};
    44.  
      },
    45.  
      load : function(realUrl, url, res, cb){
    46.  
      var self = this, locLoader = cc.loader, cache = locLoader.cache;
    47.  
      locLoader.loadJson(realUrl, function(err, pkg){
    48.  
      if(err) return cb(err);
    49.  
      var dir = cc.path.dirname(url);
    50.  
      for (var key in pkg) {
    51.  
      var filePath = cc.path.join(dir, key);
    52.  
      cache[filePath] = self._parse(pkg[key]);
    53.  
      }
    54.  
      cb(null, true);
    55.  
      });
    56.  
      }
    57.  
      };
    58.  
      cc.loader.register(["pkgJson"], cc._pkgJsonLoader);

    pkgJson其实就是一个json文件,那为什么不直接叫做json呢?因为每个loader插件是根据后缀名进行处理的, 如果也叫json那就会使用cc._jsonLoader进行加载了。

    还可以支持混淆压缩模式:

    1.  
      {
    2.  
      "tcc_issue_1.plist":[{
    3.  
      "grossini_dance_01.png":[[2, 79, 51, 109],[85, 121],[0, -1],1],
    4.  
      "grossini_dance_05.png":[[2, 2, 75, 109],[85, 121],[-1, -1],1],
    5.  
      "grossini_dance_08.png":[[2, 79, 51,109],[85, 121],[0, -1]]
    6.  
      }],
    7.  
      "tcc_issue_2.plist":[{
    8.  
      "grossini_dance_13.png":[[2, 52, 51, 109],[85, 121],[0, -1],1],
    9.  
      "grossinis_sister1.png":[[2, 2, 48, 113],[52, 139],[-1, -11],1],
    10.  
      "grossinis_sister2.png":[[2, 105, 54, 126],[56, 138],[-1, -2]]
    11.  
      }]
    12.  
      }

    这个混淆压缩模式有什么用呢?

    1、减少配置文件的大小;

    2、将多个配置文件整理合并到一个,减少网络连接请求数量。

    用这种方式可以很好的解决plist文件在H5上带来的各种问题,同时可以让开发者在开发的时候用plist进行开发,在发布的时候使用pkgJson进行发布, 却不需要改动项目代码,只需要把资源加载列表中的plsit替换成对于的pkgJson就可以了。

    但是目前,jsb尚无法支持自定义资源加载器插件,该功能只能在HTML5上使用。

    转载请注明:https://blog.csdn.net/qinning199/article/details/41924747

     
  • 相关阅读:
    kafka生产数据,消费数据
    sparkStreaming
    逻辑训练题(二)--统计一个数字在排序数组中出现的次数。
    逻辑题(一)一个整型数组里除了两个数字之外,其他的数字都出现了两次,请写程序找出这两个只出现一次的数字。
    Markdown语法
    Spring中的AOP 知识点
    spring基于注解的IOC配置 知识点
    Cookie&Session 知识点
    ServletContext域对象 知识点
    response 知识点
  • 原文地址:https://www.cnblogs.com/wodehao0808/p/11929618.html
Copyright © 2011-2022 走看看