Cocos Creator大厅+子游戏模式

叁歲伎倆 2022-03-26 04:08 308阅读 0赞

文章转载自：https://www.jianshu.com/p/fe54ca980384

一、前言

根据上一篇（Cocos Creator热更新），可以看出以下几点：

  • build-default目录下的main.js，为cocos creator项目的入口；
  • 热更新一文中，放置在服务器上的，仅有资源，脚本，配置等，没有入口程序，因此本文中，我们需要创造一个入口程序。

还是解释一下什么叫大厅+子游戏模式：

  1. 将大厅单独作为一个完整的项目，不同的子游戏，则为不同的项目
  2. 然后要实现不同项目之间的互调，即大厅调子游戏，或者子游戏调大厅
  3. 资源共享，共用的资源放在大厅项目中，并且子游戏中可以调用

这样做的好处：

  1. 减小上架包的体积
  2. 提高热更新的效率（打开指定子游戏，才会更新子游戏）
  3. 降低项目的耦合性（如果不共享资源，子游戏完全可以随时抽取出来作为一个单独的包使用）

二、修改子游戏

  1. 添加version_generato.js

  2. 构建项目

  3. 在原生src下，添加 main.js 入口文件

  3.1 每次构建完项目，拷贝main.js到原生目录的src中

  main.js的内容如下：

  1. (function () {
  2.     'use strict';
  4.     if (window.jsb) {
  5.         /// 1.初始化资源Lib路径Root.
  6.         var subgameSearchPath = (jsb.fileUtils ? jsb.fileUtils.getWritablePath() : '/')+'ALLGame/subgame/';
  8.         /// 2.subgame资源未映射，则初始化资源映射表，否则略过映射.
  9.         if(!cc.HallAndSubGameGlobal.subgameGlobal){
  10.             cc.HallAndSubGameGlobal.subgameGlobal = {};
  12.             /// 加载settings.js
  13.             require(subgameSearchPath + 'src/settings.js');
  14.             var settings = window._CCSettings;
  15.             window._CCSettings = undefined;
  17.             if ( !settings.debug ) {
  18.                 var uuids = settings.uuids;
  20.                 var rawAssets = settings.rawAssets;
  21.                 var assetTypes = settings.assetTypes;
  22.                 var realRawAssets = settings.rawAssets = {};
  23.                 for (var mount in rawAssets) {
  24.                     var entries = rawAssets[mount];
  25.                     var realEntries = realRawAssets[mount] = {};
  26.                     for (var id in entries) {
  27.                         var entry = entries[id];
  28.                         var type = entry[1];
  29.                         // retrieve minified raw asset
  30.                         if (typeof type === 'number') {
  31.                             entry[1] = assetTypes[type];
  32.                         }
  33.                         // retrieve uuid
  34.                         realEntries[uuids[id] || id] = entry;
  35.                     }
  36.                 }
  38.                 var scenes = settings.scenes;
  39.                 for (var i = 0; i < scenes.length; ++i) {
  40.                     var scene = scenes[i];
  42.                     if (typeof scene.uuid === 'number') {
  43.                         scene.uuid = uuids[scene.uuid];
  44.                     }
  45.                 }
  47.                 var packedAssets = settings.packedAssets;
  48.                 for (var packId in packedAssets) {
  49.                     var packedIds = packedAssets[packId];
  50.                     for (var j = 0; j < packedIds.length; ++j) {
  51.                         if (typeof packedIds[j] === 'number') {
  52.                             packedIds[j] = uuids[packedIds[j]];
  53.                         }
  54.                     }
  55.                 }
  56.             }
  58.             /// 加载project.js
  59.             var projectDir = 'src/project.js';
  60.             if ( settings.debug ) {
  61.                 projectDir = 'src/project.dev.js';
  62.             }
  63.             require(subgameSearchPath + projectDir);
  65.             /// 如果当前搜索路径没有subgame，则添加进去搜索路径。
  66.             var currentSearchPaths = jsb.fileUtils.getSearchPaths();
  67.             if(currentSearchPaths && currentSearchPaths.indexOf(subgameSearchPath) === -1){
  68.                 jsb.fileUtils.addSearchPath(subgameSearchPath, true);
  69.                 console.log('subgame main.js 之前未添加，添加下subgameSearchPath' + currentSearchPaths);
  70.             }
  72.             cc.AssetLibrary.init({
  73.                 libraryPath: 'res/import',
  74.                 rawAssetsBase: 'res/raw-',
  75.                 rawAssets: settings.rawAssets,
  76.                 packedAssets: settings.packedAssets,
  77.                 md5AssetsMap: settings.md5AssetsMap
  78.             });
  80.             cc.HallAndSubGameGlobal.subgameGlobal.launchScene = settings.launchScene;
  82.             /// 将subgame的场景添加到cc.game中，使得cc.director.loadScene可以从cc.game._sceneInfos查找到相关场景
  83.             for(var i = 0; i < settings.scenes.length; ++i){
  84.                 cc.game._sceneInfos.push(settings.scenes[i]);
  85.             }
  86.         }
  88.         /// 3.加载初始场景
  89.         var launchScene = cc.HallAndSubGameGlobal.subgameGlobal.launchScene;
  90.         cc.director.loadScene(launchScene, null,
  91.             function () {
  92.                 console.log('subgame main.js 成功加载初始场景' + launchScene);
  93.             }
  94.         );
  95.     }
  96. })();

ps: 不用管src外部的main.js文件

  3.2 或者 添加build-templates目录，自动在每次构建项目后生成main.js文件

format_png

这里的main.js内容和上面的内容一致

  1. 执行version_generator.js文件

  生成version.manifest 和 project.mainfest。这个在上一篇中已经讲过，就不细说了。

三、拷贝res，src，version.manifest 和 project.mainfest到服务器目录下

format_png 1

  很明显，现在我们只是把子游戏生成了资源包，但是没有做任何热更新的操作。
接下来，就需要在大厅项目中，添加下载，更新的逻辑了。

四、在大厅项目中，添加相应逻辑

  负责下载，检测更新，更新子游戏的工具库文件内容如下：

  1. const SubgameManager = {
  2.     _storagePath: [],
  4.     _getfiles: function(name, type, downloadCallback, finishCallback) {
  5.         this._storagePath[name] = ((jsb.fileUtils ? jsb.fileUtils.getWritablePath() : '/') + 'ALLGame/' + name);
  6.         this._downloadCallback = downloadCallback;
  7.         this._finishCallback = finishCallback;
  8.         this._fileName = name;
  10.         /// 替换该地址
  11.         var UIRLFILE = "http://192.168.200.117:8000/" + name + "/remote-assets";
  12.         var filees = this._storagePath[name] + '/project.manifest';
  14.         var customManifestStr = JSON.stringify({
  15.             'packageUrl': UIRLFILE,
  16.             'remoteManifestUrl': UIRLFILE + '/project.manifest',
  17.             'remoteVersionUrl': UIRLFILE + '/version.manifest',
  18.             'version': '0.0.1',
  19.             'assets': {},
  20.             'searchPaths': []
  21.         });
  23.         var versionCompareHandle = function(versionA, versionB) {
  24.             var vA = versionA.split('.');
  25.             var vB = versionB.split('.');
  26.             for (var i = 0; i < vA.length; ++i) {
  27.                 var a = parseInt(vA[i]);
  28.                 var b = parseInt(vB[i] || 0);
  29.                 if (a === b) {
  30.                     continue;
  31.                 } else {
  32.                     return a - b;
  33.                 }
  34.             }
  35.             if (vB.length > vA.length) {
  36.                 return -1;
  37.             } else {
  38.                 return 0;
  39.             }
  40.         };
  42.         this._am = new jsb.AssetsManager('', this._storagePath[name], versionCompareHandle);
  44.         if (!cc.sys.ENABLE_GC_FOR_NATIVE_OBJECTS) {
  45.             this._am.retain();
  46.         }
  48.         this._am.setVerifyCallback(function(path, asset) {
  49.             var compressed = asset.compressed;
  50.             if (compressed) {
  51.                 return true;
  52.             } else {
  53.                 return true;
  54.             }
  55.         });
  58.         if (cc.sys.os === cc.sys.OS_ANDROID) {
  59.             this._am.setMaxConcurrentTask(2);
  60.         }
  62.         if (type === 1) {
  63.             this._updateListener = new jsb.EventListenerAssetsManager(this._am, this._updateCb.bind(this));
  64.         } else if (type == 2) {
  65.             this._updateListener = new jsb.EventListenerAssetsManager(this._am, this._checkCb.bind(this));
  66.         } else {
  67.             this._updateListener = new jsb.EventListenerAssetsManager(this._am, this._needUpdate.bind(this));
  68.         }
  70.         cc.eventManager.addListener(this._updateListener, 1);
  72.         if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
  73.             var manifest = new jsb.Manifest(customManifestStr, this._storagePath[name]);
  74.             this._am.loadLocalManifest(manifest, this._storagePath[name]);
  75.         }
  77.         if (type === 1) {
  78.             this._am.update();
  79.             this._failCount = 0;
  80.         } else {
  81.             this._am.checkUpdate();
  82.         }
  83.         this._updating = true;
  84.         cc.log('更新文件:' + filees);
  85.     },
  87.     // type = 1
  88.     _updateCb: function(event) {
  89.         var failed = false;
  90.         let self = this;
  91.         switch (event.getEventCode()) {
  92.             case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
  93.                 /*0 本地没有配置文件*/
  94.                 cc.log('updateCb本地没有配置文件');
  95.                 failed = true;
  96.                 break;
  98.             case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
  99.                 /*1下载配置文件错误*/
  100.                 cc.log('updateCb下载配置文件错误');
  101.                 failed = true;
  102.                 break;
  104.             case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
  105.                 /*2 解析文件错误*/
  106.                 cc.log('updateCb解析文件错误');
  107.                 failed = true;
  108.                 break;
  110.             case jsb.EventAssetsManager.NEW_VERSION_FOUND:
  111.                 /*3发现新的更新*/
  112.                 cc.log('updateCb发现新的更新');
  113.                 break;
  115.             case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
  116.                 /*4 已经是最新的*/
  117.                 cc.log('updateCb已经是最新的');
  118.                 failed = true;
  119.                 break;
  121.             case jsb.EventAssetsManager.UPDATE_PROGRESSION:
  122.                 /*5 最新进展 */
  123.                 self._downloadCallback && self._downloadCallback(event.getPercentByFile());
  124.                 break;
  127.             case jsb.EventAssetsManager.ASSET_UPDATED:
  128.                 /*6需要更新*/
  129.                 break;
  131.             case jsb.EventAssetsManager.ERROR_UPDATING:
  132.                 /*7更新错误*/
  133.                 cc.log('updateCb更新错误');
  134.                 break;
  136.             case jsb.EventAssetsManager.UPDATE_FINISHED:
  137.                 /*8更新完成*/
  138.                 self._finishCallback && self._finishCallback(true);
  139.                 break;
  141.             case jsb.EventAssetsManager.UPDATE_FAILED:
  142.                 /*9更新失败*/
  143.                 self._failCount++;
  144.                 if (self._failCount <= 3) {
  145.                     self._am.downloadFailedAssets();
  146.                     cc.log(('updateCb更新失败' + this._failCount + ' 次'));
  147.                 } else {
  148.                     cc.log(('updateCb失败次数过多'));
  149.                     self._failCount = 0;
  150.                     failed = true;
  151.                     self._updating = false;
  152.                 }
  153.                 break;
  155.             case jsb.EventAssetsManager.ERROR_DECOMPRESS:
  156.                 /*10解压失败*/
  157.                 cc.log('updateCb解压失败');
  158.                 break;
  159.         }
  161.         if (failed) {
  162.             cc.eventManager.removeListener(self._updateListener);
  163.             self._updateListener = null;
  164.             self._updating = false;
  165.             self._finishCallback && self._finishCallback(false);
  166.         }
  167.     },
  169.     // type = 2
  170.     _checkCb: function(event) {
  171.         var failed = false;
  172.         let self = this;
  173.         switch (event.getEventCode()) {
  174.             case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
  175.                 /*0 本地没有配置文件*/
  176.                 cc.log('checkCb本地没有配置文件');
  177.                 break;
  179.             case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
  180.                 /*1下载配置文件错误*/
  181.                 cc.log('checkCb下载配置文件错误');
  182.                 failed = true;
  183.                 break;
  185.             case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
  186.                 /*2 解析文件错误*/
  187.                 cc.log('checkCb解析文件错误');
  188.                 failed = true;
  189.                 break;
  191.             case jsb.EventAssetsManager.NEW_VERSION_FOUND:
  192.                 /*3发现新的更新*/
  193.                 self._getfiles(self._fileName, 1, self._downloadCallback, self._finishCallback);
  194.                 break;
  196.             case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
  197.                 /*4 已经是最新的*/
  198.                 cc.log('checkCb已经是最新的');
  199.                 self._finishCallback && self._finishCallback(true);
  200.                 break;
  202.             case jsb.EventAssetsManager.UPDATE_PROGRESSION:
  203.                 /*5 最新进展 */
  204.                 break;
  206.             case jsb.EventAssetsManager.ASSET_UPDATED:
  207.                 /*6需要更新*/
  208.                 break;
  210.             case jsb.EventAssetsManager.ERROR_UPDATING:
  211.                 /*7更新错误*/
  212.                 cc.log('checkCb更新错误');
  213.                 failed = true;
  214.                 break;
  217.             case jsb.EventAssetsManager.UPDATE_FINISHED:
  218.                 /*8更新完成*/
  219.                 cc.log('checkCb更新完成');
  220.                 break;
  222.             case jsb.EventAssetsManager.UPDATE_FAILED:
  223.                 /*9更新失败*/
  224.                 cc.log('checkCb更新失败');
  225.                 failed = true;
  226.                 break;
  228.             case jsb.EventAssetsManager.ERROR_DECOMPRESS:
  229.                 /*10解压失败*/
  230.                 cc.log('checkCb解压失败');
  231.                 break;
  233.         }
  234.         this._updating = false;
  235.         if (failed) {
  236.             self._finishCallback && self._finishCallback(false);
  237.         }
  238.     },
  240.     // type = 3
  241.     _needUpdate: function(event) {
  242.         let self = this;
  243.         switch (event.getEventCode()) {
  244.             case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
  245.                 cc.log('子游戏已经是最新的，不需要更新');
  246.                 self._finishCallback && self._finishCallback(false);
  247.                 break;
  249.             case jsb.EventAssetsManager.NEW_VERSION_FOUND:
  250.                 cc.log('子游戏需要更新');
  251.                 self._finishCallback && self._finishCallback(true);
  252.                 break;
  254.             // 检查是否更新出错
  255.             case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
  256.             case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
  257.             case jsb.EventAssetsManager.ERROR_UPDATING:
  258.             case jsb.EventAssetsManager.UPDATE_FAILED:
  259.                 self._downloadCallback();
  260.                 break;
  261.         }
  262.     },
  264.     /**
  265.      * 下载子游戏
  266.      * @param {string} name - 游戏名
  267.      * @param progress - 下载进度回调
  268.      * @param finish - 完成回调
  269.      * @note finish 返回true表示下载成功，false表示下载失败
  270.      */
  271.     downloadSubgame: function(name, progress, finish) {
  272.         this._getfiles(name, 2, progress, finish);
  273.     },
  275.     /**
  276.      * 进入子游戏
  277.      * @param {string} name - 游戏名
  278.      */
  279.     enterSubgame: function(name) {
  280.         if (!this._storagePath[name]) {
  281.             this.downloadSubgame(name);
  282.             return;
  283.         }
  285.         require(this._storagePath[name] + '/src/main.js');
  286.     },
  288.     /**
  289.      * 判断子游戏是否已经下载
  290.      * @param {string} name - 游戏名
  291.      */
  292.     isSubgameDownLoad: function (name) {
  293.         let file = (jsb.fileUtils ? jsb.fileUtils.getWritablePath() : '/') + 'ALLGame/' + name + '/project.manifest';
  294.         if (jsb.fileUtils.isFileExist(file)) {
  295.             return true;
  296.         } else {
  297.             return false;
  298.         }
  299.     },
  301.     /**
  302.      * 判断子游戏是否需要更新
  303.      * @param {string} name - 游戏名
  304.      * @param isUpdateCallback - 是否需要更新回调
  305.      * @param failCallback - 错误回调
  306.      * @note isUpdateCallback 返回true表示需要更新，false表示不需要更新
  307.      */
  308.     needUpdateSubgame: function (name, isUpdateCallback, failCallback) {
  309.         this._getfiles(name, 3, failCallback, isUpdateCallback);
  310.     },
  311. };
  313. module.exports = SubgameManager;

  调用的过程如下：
    1. 判断子游戏是否已下载
    2. 已下载，判断是否需要更新
    3.1 下载游戏
    3.2 更新游戏
    4. 进入子游戏

  1. const SubgameManager = require('SubgameManager');
  3. cc.Class({
  4.     extends: cc.Component,
  6.     properties: {
  7.         downloadBtn: {
  8.             default: null,
  9.             type: cc.Node
  10.         },
  11.         downloadLabel: {
  12.             default: null,
  13.             type: cc.Label
  14.         }
  15.     },
  17.     onLoad: function () {
  18.         const name = 'subgame';    
  19.         //判断子游戏有没有下载
  20.         if (SubgameManager.isSubgameDownLoad(name)) {
  21.             //已下载，判断是否需要更新
  22.             SubgameManager.needUpdateSubgame(name, (success) => {
  23.                 if (success) {
  24.                     this.downloadLabel.string = "子游戏需要更新";
  25.                 } else {
  26.                     this.downloadLabel.string = "子游戏不需要更新";
  27.                 }
  28.             }, () => {
  29.                 cc.log('出错了');
  30.             });
  31.         } else {
  32.             this.downloadLabel.string = "子游戏未下载";
  33.         }
  35.         this.downloadBtn.on('click', () => {
  36.             //下载子游戏/更新子游戏
  37.             SubgameManager.downloadSubgame(name, (progress) => {
  38.                 if (isNaN(progress)) {
  39.                     progress = 0;
  40.                 }
  41.                 this.downloadLabel.string = "资源下载中   " + parseInt(progress * 100) + "%";
  42.             }, function(success) {
  43.                 if (success) {
  44.                     SubgameManager.enterSubgame('subgame');
  45.                 } else {
  46.                     cc.log('下载失败');
  47.                 }
  48.             });
  49.         }, this);
  50.     },
  51. });

说到这呢，就得提一下，
如果界面设计时，从大厅点击子游戏，中间有loading的界面的话，
loading界面就应该放在大厅的工程中了。

五、测试

  打开服务———>编译大厅目录———>安装运行
  注意：
    一定要生成原生apk，在真机（也可以是类似于夜神的模拟器啦）上运行测试。
  结果：
    1. 第一次，本地没有子游戏，提示“游戏未下载”，下载后，无需重启，可直接进入子游戏；
    2. 修改version_generator.js中的版本号，将步骤二，再走一遍，能检测到更新，同样无需重启；
    3. 在大厅中，使用cc.sys.localStorage存储的值，在子游戏中可以获取到；

本人的一点小思考：

在研究之前，想着一定要研究一下资源共享的问题；
现在想来，既然要将子游戏独立出一个项目，自然也期望以后子游戏可以作为一个单独的apk来运行，如果共用大厅的资源，以后想抽取出来，又是一项艰巨的任务。但是这样必然会造成一定的重复资源。具体取舍，等到项目后期再协调。

作者：1号是雨天
链接：https://www.jianshu.com/p/fe54ca980384
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

发表评论

表情：
评论列表 （有 0 条评论，308人围观）

还没有评论，来说两句吧...

相关阅读