devbox
Cpp五条
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Cocos Creator(v.2.4.5) Bundle的加载与解析_cocoscreator bundl.get

作者：Cpp五条 | 2024-02-27 11:24:15

赞

踩

cocoscreator bundl.get

项目有个需求，需要缓存dundle内容，但是其实loadBundle下来的是一个配置文件，并不是实际上用到的资源，所以在想，是否可以直接吧资源下下来找一下原理；就研究了一下cocos的源码；

参考‘宝爷’的这个帖子：https://forum.cocos.org/t/cocos-creator/100107

看源码前我们先了解一下cocos的管线和任务：https://docs.cocos.com/creator/manual/zh/asset-manager/pipeline-task.html?h=pipe

  1.     AssetManager.js中的3条管线:
  2.     /**
  3.      * !#en 
  4.      * Normal loading pipeline
  5.      * 
  6.      * !#zh
  7.      * 正常加载管线
  8.      * 
  9.      * @property pipeline
  10.      * @type {Pipeline}
  11.      */
  12.     this.pipeline = pipeline.append(preprocess).append(load);
  13.  
  14.     /**
  15.      * !#en 
  16.      * Fetching pipeline
  17.      * 
  18.      * !#zh
  19.      * 下载管线
  20.      * 
  21.      * @property fetchPipeline
  22.      * @type {Pipeline}
  23.      */
  24.     this.fetchPipeline = fetchPipeline.append(preprocess).append(fetch);
  25.  
  26.     /**
  27.      * !#en 
  28.      * Url transformer
  29.      * 
  30.      * !#zh
  31.      * Url 转换器
  32.      * 
  33.      * @property transformPipeline
  34.      * @type {Pipeline}
  35.      */
  36.     this.transformPipeline = transformPipeline.append(parse).append(combine);

开始吧，当我们cc.assetManager.loadBundle的时候，引擎在做些什么：

 

  1.  AssetManager.js
  2.     loadBundle(nameOrUrl, options, onComplete) {
  3.         //当options为undefined时，将回调函数由options变成onComplete;
  4.         var { options, onComplete } = parseParameters(options, undefined, onComplete);
  5.         //获取bundle的名字;
  6.         let bundleName = cc.path.basename(nameOrUrl);
  7.         //本地检测；
  8.         if (this.bundles.has(bundleName)) {
  9.             return asyncify(onComplete)(null, this.getBundle(bundleName));
  10.         }
  11.         //是否有自定义预设，没有就用bundle；
  12.         options.preset = options.preset || 'bundle';
  13.         options.ext = 'bundle';
  14.         this.loadRemote(nameOrUrl, options, onComplete);
  15.     },
  16.  
  17.  
  18.     loadRemote(url, options, onComplete) {
  19.         var { options, onComplete } = parseParameters(options, undefined, onComplete);
  20.         //本地检测;
  21.         if (this.assets.has(url)) {
  22.             return asyncify(onComplete)(null, this.assets.get(url));
  23.         }
  24.  
  25.         options.__isNative__ = true;
  26.         options.preset = options.preset || 'remote';
  27.         //下载；
  28.         this.loadAny({ url }, options, null, function (err, data) {
  29.             if (err) {
  30.                 cc.error(err.message, err.stack);
  31.                 onComplete && onComplete(err, null);
  32.             }
  33.             else {
  34.                 factory.create(url, data, options.ext || cc.path.extname(url), options, function (err, out) {
  35.                     onComplete && onComplete(err, out);
  36.                 });
  37.             }
  38.         });
  39.     },

    接下来管线和任务登场了

  1.    loadAny(requests, options, onProgress, onComplete) {
  2.         var { options, onProgress, onComplete } = parseParameters(options, onProgress, onComplete);
  3.         options.preset = options.preset || 'default';
  4.         requests = Array.isArray(requests) ? requests.concat() : requests;
  5.         //新建一个任务；
  6.         let task = new Task({ input: requests, onProgress, onComplete: asyncify(onComplete), options });
  7.         //加载管线去处理任务，注意这里的是3条管线中的加载管线；
  8.         pipeline.async(task);
  9.     },
  10.  
  11.     async(task) {
  12.         var pipes = this.pipes;
  13.         if (!(task instanceof Task) || pipes.length === 0) return;
  14.         //设置任务输入；
  15.         if (task.output != null) {
  16.             task.input = task.output;
  17.             task.output = null;
  18.         }
  19.         task._isFinish = false;
  20.         this._flow(0, task);
  21.     },
  22.  
  23.     _flow(index, task) {
  24.         var self = this;
  25.         /*
  26.             回到上面的这里this.pipeline = pipeline.append(preprocess).append(load);
  27.             加载管线有preprocess和load两部分；
  28.             preprocess实际上只创建了一个子任务，然后交由transformPipeline执行，得到一个RequestItem对象并赋值给task.output;
  29.         */
  30.         var pipe = this.pipes[index];
  31.         pipe(task, function (result) {
  32.             if (result) {
  33.                 task._isFinish = true;
  34.                 task.onComplete && task.onComplete(result);
  35.             }
  36.             else {
  37.                 index++;
  38.                 if (index < self.pipes.length) {
  39.                     // move output to input
  40.                     task.input = task.output;
  41.                     task.output = null;
  42.                     self._flow(index, task);
  43.                 }
  44.                 else {
  45.                     task._isFinish = true;
  46.                     task.onComplete && task.onComplete(result, task.output);
  47.                 }
  48.             }
  49.         });
  50.     }

 正常加载管线pipeline中的preprocess任务，通过转换器管线transformPipeline获取一个RequestItem对象并赋值给task.output;

  1.     function preprocess(task, done) {
  2.         var options = task.options, 
  3.             subOptions = Object.create(null), 
  4.             leftOptions = Object.create(null);
  5.  
  6.         for (var op in options) {
  7.             switch (op) {
  8.                    // can't set these attributes in options
  9.                    case RequestType.PATH:
  10.                    case RequestType.UUID:
  11.                    case RequestType.DIR:
  12.                    case RequestType.SCENE:
  13.                    case RequestType.URL: break;
  14.                    // only need these attributes to transform url
  15.                    case '__requestType__':
  16.                    case '__isNative__':
  17.                    case 'ext':
  18.                    case 'type':
  19.                    case '__nativeName__':
  20.                    case 'audioLoadMode':
  21.                    case 'bundle':
  22.                          subOptions[op] = options[op];
  23.                          break;
  24.                    // other settings, left to next pipe
  25.                    case '__exclude__':
  26.                    case '__outputAsArray__':
  27.                         leftOptions[op] = options[op];
  28.                         break;
  29.                    default:
  30.                         subOptions[op] = options[op];
  31.                         leftOptions[op] = options[op];
  32.                         break;
  33.              }
  34.         }
  35.         task.options = leftOptions;
  36.  
  37.         // 创建一个新的任务；
  38.         let subTask = Task.create({ input: task.input, options: subOptions });
  39.         var err = null;
  40.         try {
  41.              /*
  42.               3条管线中的转换管线
  43.               this.transformPipeline = transformPipeline.append(parse).append(combine);
  44.               包含parse和combine2部分：
  45.                    parse的职责是为每个要加载的资源生成RequestItem对象并初始化其资源信息（AssetInfo、uuid、config等；
  46.                    combine方法会为每个RequestItem构建出真正的加载路径，这个加载路径最终会转换到item.url中
  47.              */
  48.              task.output = task.source = transformPipeline.sync(subTask);
  49.         }
  50.         catch (e) {
  51.              err = e;
  52.              for (var i = 0, l = subTask.output.length; i < l; i++) {
  53.                   subTask.output[i].recycle();
  54.              }
  55.         }
  56.         subTask.recycle();
  57.         done(err);
  58.     }

正常加载管线pipeline中的load任务：

  1. function load (task, done) {
  2.  
  3.     let firstTask = false;
  4.     if (!task.progress) {
  5.         task.progress = { finish: 0, total: task.input.length, canInvoke: true };
  6.         firstTask = true;
  7.     }
  8.     
  9.     var options = task.options, progress = task.progress;
  10.  
  11.     options.__exclude__ = options.__exclude__ || Object.create(null);
  12.  
  13.     task.output = [];
  14.     
  15.     forEach(task.input, function (item, cb) {
  16.  
  17.         let subTask = Task.create({ 
  18.             input: item, 
  19.             onProgress: task.onProgress, 
  20.             options, 
  21.             progress, 
  22.             onComplete: function (err, item) {
  23.                 if (err && !task.isFinish) {
  24.                     if (!cc.assetManager.force || firstTask) {
  25.                         if (!CC_EDITOR) {
  26.                             cc.error(err.message, err.stack);
  27.                         }
  28.                         progress.canInvoke = false;
  29.                         done(err);
  30.                     }
  31.                     else {
  32.                         progress.canInvoke && task.dispatch('progress', ++progress.finish, progress.total, item);
  33.                     }
  34.                 }
  35.                 task.output.push(item);
  36.                 subTask.recycle();
  37.                 cb();
  38.             }
  39.         });
  40.         /*
  41.             load管线，由fetch和parse两部分组成：
  42.             fetch方法用于下载资源文件，packManager.load去下载文件，并将文件放入item.file中。
  43.         */        
  44.         loadOneAssetPipeline.async(subTask);
  45.  
  46.     }, function () {
  47.  
  48.         options.__exclude__ = null;
  49.  
  50.         if (task.isFinish) {
  51.             clear(task, true);
  52.             return task.dispatch('error');
  53.         }
  54.  
  55.         gatherAsset(task);
  56.         clear(task, true);
  57.         done();
  58.     });
  59. }

loadOneAsset中的两个任务：

  1.     //fetch方法用于下载资源文件，由packManager负责下载的实现，fetch会将下载完的文件数据放到item.file中
  2.     function fetch (task, done) {
  3.         var item = task.output = task.input;
  4.         var { options, isNative, uuid, file } = item;
  5.         var { reload } = options;
  6.  
  7.         if (file || (!reload && !isNative && assets.has(uuid))) return done();
  8.         /*
  9.             下载文件；
  10.             packManager.load->downloader.download->downloadBundle(下载bundle的方法里面会去下载目录下的config.json和index.js，downloadJson downloadScript)
  11.         */
  12.         packManager.load(item, task.options, function (err, data) {
  13.             item.file = data;
  14.             done(err);
  15.         });
  16.     },
  17.  
  18.     //parse方法用于将加载完的资源文件转换成我们可用的资源对象
  19.     function parse (task, done) {
  20.  
  21.         var item = task.output = task.input, progress = task.progress, exclude = task.options.__exclude__;
  22.         var { id, file, options } = item;
  23.  
  24.         if (item.isNative) {
  25.             parser.parse(id, file, item.ext, options, function (err, asset) {
  26.                 if (err) return done(err);
  27.                 item.content = asset;
  28.                 progress.canInvoke && task.dispatch('progress', ++progress.finish, progress.total, item);
  29.                 files.remove(id);
  30.                 parsed.remove(id);
  31.                 done();
  32.             });
  33.         }
  34.         else {
  35.             var { uuid } = item;
  36.             if (uuid in exclude) {
  37.     
  38.                 var { finish, content, err, callbacks } = exclude[uuid];
  39.                 progress.canInvoke && task.dispatch('progress', ++progress.finish, progress.total, item);
  40.     
  41.                 if (finish || checkCircleReference(uuid, uuid, exclude) ) {
  42.                     content && content.addRef && content.addRef();
  43.                     item.content = content;
  44.                     done(err);
  45.                 }
  46.                 else {
  47.                     callbacks.push({ done, item });
  48.                 }
  49.             }
  50.             else {
  51.                 if (!options.reload && assets.has(uuid)) {
  52.                     var asset = assets.get(uuid);
  53.                     if (options.__asyncLoadAssets__ || !asset.__asyncLoadAssets__) {
  54.                         item.content = asset.addRef();
  55.                         progress.canInvoke && task.dispatch('progress', ++progress.finish, progress.total, item);
  56.                         done();
  57.                     }
  58.                     else {
  59.                         loadDepends(task, asset, done, false);
  60.                     }
  61.                 }
  62.                 else {
  63.                     parser.parse(id, file, 'import', options, function (err, asset) {
  64.                         if (err) return done(err);
  65.                         asset._uuid = uuid;
  66.                         loadDepends(task, asset, done, true);
  67.                     });
  68.                 }
  69.             }
  70.         }
  71.     }

ok了，需要的文件已经下载下来了，

  1.   loadRemote(url, options, onComplete) {
  2.         var { options, onComplete } = parseParameters(options, undefined, onComplete);
  3.  
  4.         if (this.assets.has(url)) {
  5.             return asyncify(onComplete)(null, this.assets.get(url));
  6.         }
  7.  
  8.         options.__isNative__ = true;
  9.         options.preset = options.preset || 'remote';
  10.         this.loadAny({ url }, options, null, function (err, data) {
  11.             if (err) {
  12.                 cc.error(err.message, err.stack);
  13.                 onComplete && onComplete(err, null);
  14.             }
  15.             else {
  16.                 //config文件已经下载完毕；
  17.                 factory.create(url, data, options.ext || cc.path.extname(url), options, function (err, out) {
  18.                     onComplete && onComplete(err, out);
  19.                 });
  20.             }
  21.         });
  22.     },
  23.  
  24.     
  25.     create(id, data, type, options, onComplete) {
  26.         //func = createBundle；
  27.         var func = producers[type] || producers['default'];
  28.         let asset, creating;
  29.         if (asset = assets.get(id)) {
  30.             onComplete(null, asset);
  31.         }
  32.         else if (creating = _creating.get(id)) {
  33.             creating.push(onComplete);
  34.         }
  35.         else {
  36.             _creating.add(id, [onComplete]);
  37.             //初始化createBundle，并返回；
  38.             func(id, data, options, function (err, data) {
  39.                 if (!err && data instanceof cc.Asset) {
  40.                     data._uuid = id;
  41.                     assets.add(id, data);
  42.                 }
  43.                 let callbacks = _creating.remove(id);
  44.                 for (let i = 0, l = callbacks.length; i < l; i++) {
  45.                     callbacks[i](err, data);
  46.                 }
  47.             });
  48.         }
  49.     }

整个流程就是这样子的。这就是我理解的loadBundle整个流程了。有不足和错误的话，请各位大佬指出～。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/152511
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号