Cocos Creator 实现大厅+子游戏模式

摘要:
之前一直负责的是cocos2dx-lua的开发,lua作为脚本语言,非常适合做热更新及大厅+子游戏模式的开发。而cocoscreator使用的是js或者ts,作为脚本语言也是很方便做热更新的,但是js编译是把所有的脚本编译成一个单独的js文件,如果不做调整,会导致所有的大厅+游戏代码编译成一个单独的js文件,是不太方便做成大厅+子游戏的模式的,这里要讨论的就是如何调整,以做成大厅+子游戏的模式。

大厅+子游戏的模式,在棋牌类型、教育类型游戏中比较常见,通常是安装包里面只有大厅的资源和代码,然后子游戏根据需求以热更新的方式下载来提供给玩家。

之前一直负责的是cocos2dx-lua的开发,lua作为脚本语言,非常适合做热更新及大厅+子游戏模式的开发。而cocos creator使用的是js或者ts,作为脚本语言也是很方便做热更新的,但是js编译是把所有的脚本编译成一个单独的js文件,如果不做调整,会导致所有的大厅+游戏代码编译成一个单独的js文件,是不太方便做成大厅+子游戏的模式的,这里要讨论的就是如何调整,以做成大厅+子游戏的模式。

首先就是要将大厅、子游戏分开来构建了,要不就是创建单独的大厅+子游戏工程,要不就是将大厅或者子游戏的代码、资源拷贝到一个构建工程,然后用命令行工具或者直接使用GUI工具构建。我这边没有单独分开创建工程,选择的是在构建的时候通过脚本拷贝相关的资源,然后单独构建。

分开构建/编译好了资源之后,就是在app中怎么使用了。在lua版本中,引擎的资源加载方式是直接读取指定目录的脚本/资源,所以我们只要先将子游戏的脚本/资源下载好,再引入指定目录的脚本就可以了。js作为脚本资源,思路上我们也是读取对应目录的脚本,但是在creator版本中,引擎封装了一套资源加载工具,每个资源对应一个uuid,访问资源的时候是使用uuid去寻找资源(我们使用cc.loader.loadRes传入的是带资源目录的url,内部会根据这个url找到uuid再来加载资源),构建/编译项目的时候,会生成一个setting.js/jsc的文件,这个文件就是uuid和实际资源路径的对应表。所以我们需要做的就是如何引入子游戏生成的这个setting文件。参考论坛网友的思路,就是引入另外一个js脚本,在该脚本中再去读取对应子游戏的setting文件,合并到大厅的setting配置中,然后再跳转到对应的游戏场景,上代码:

    //首先还是要设置好搜索路径
    var searchPaths =jsb.fileUtils.getSearchPaths();
    searchPaths.unshift(cc.JS_DIR);
    jsb.fileUtils.setSearchPaths(searchPaths); 
    
    //判断是否已经加载过子游戏的setting
    if (!cc.gameSetting){
        window.require(js_path + 'src/settings.js');
        settings =window._CCSettings;
        window._CCSettings =undefined;

        //防止重复加载脚本
        if (!cc.jsList[js_path]){
            require(js_path + 'src/' + (settings.debug ? 'project.dev.js' : 'project.js'));
            cc.jsList[js_path] = true}
    }
    else{
        settings =cc.gameSetting
    }
            
    //合并assetTypes
    var gameAssetTypes =settings.assetTypes;
    settings.assetTypes =baseSetting.assetTypes;
    if (gameAssetTypes &&settings.assetTypes){
        for (var typeIndex ingameAssetTypes) {
            var type =gameAssetTypes[typeIndex];
            //不包含就塞到settings里面去
            if (settings.assetTypes.indexOf(type) == -1) {
                settings.assetTypes.push(type);
            }
        }
        for (var uuidKey insettings.rawAssets.assets) {
            var index = settings.rawAssets.assets[uuidKey][1];
            var type1 =gameAssetTypes[index];

            for (var typeIndex insettings.assetTypes) {
                var type2 =settings.assetTypes[typeIndex];
                if (type1 ==type2) {
                    settings.rawAssets.assets[uuidKey][1] =parseInt(typeIndex);
                }
            }
        }
    }    
    //调整资源配置
    for (var assetkey inbaseSetting.packedAssets) {
        settings.packedAssets[assetkey] =baseSetting.packedAssets[assetkey];
    }
    //动态资源合并
    for (var uuidKey inbaseSetting.rawAssets.assets) {        
        settings.rawAssets.assets[uuidKey] =baseSetting.rawAssets.assets[uuidKey];
    }
    //场景合并
    for (var sceneKey inbaseSetting.scenes) {
        if (settings.scenes.indexOf(baseSetting.scenes[sceneKey]) == -1){
            settings.scenes.push(baseSetting.scenes[sceneKey]);
        }        
    }
    //uuid合并
    for (var uuidKey inbaseSetting.uuids) {
        if (settings.uuids.indexOf(baseSetting.uuids[uuidKey]) == -1) {
            settings.uuids.push(baseSetting.uuids[uuidKey])
        }
    }

上述代码是在论坛网友提供的demo基础上进行了部分调整,核心的逻辑还是一致的:主要就是读取对应子游戏的setting文件,然后合并到大厅的setting中,建立好子游戏资源的uuid对应关系,主要就能在游戏中引入对应的游戏资源。

论坛网友提供的demo中,从子游戏回到大厅,需要再引入一份独立的js文件。但是我的理解是,在启动大厅的时候已经将大厅的setting加入到内存中了,资源和uuid的对应关系已经建立,这个时候其实已经没有必要再重复引入一次大厅的setting配置,再来合并。实际项目上,我也是按照我的理解,没有再单独的引入js文件实现从子游戏回到大厅,目前也暂时没有碰到问题。

另外,因为思路上是大厅和子游戏要分开打包,在开发的过程中我们是可以大厅+子游戏一起开发。但是要注意的是,子游戏不能直接在编辑器中引用大厅的资源,比如子游戏的某个脚本是继承自大厅的,,如:

cc.Class({
    extends:  bg.GameModel,
    ...
})

GamModel是大厅工程的代码,在开发的过程中,因为子游戏和大厅在一个工程,这样直接使用是没有问题的。如果将子游戏单独打包,在构建的过程中会报错,不过还是能构建成功,但是在运行的时候这个脚本组件就不会绑定到对应的节点上去,所以应该调整一下:

cc.Class({
    extends: window.bg == undefined ?cc.Component : bg.GameModel,
    ...
)}

这样构建的过程中不会报错,脚本组件能正常的绑定到对应的节点上去。运行过程中因为已经加载了大厅的代码,所以这个三目运算的结果是取后面的bg.GameModel。

实现环境:Cocos Creator 2.0.9 版本。之前使用2.10版本,同样的代码构建的工程,在win32模拟器上就会一直报错,自带模拟器对应的src目录下的modular.js会出现错误,后来换成2.0.9版本,自编译win32工程,再用模拟器运行就没有问题了。在安卓和ios上到是都正常的。

免责声明:文章转载自《Cocos Creator 实现大厅+子游戏模式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇(三)轻量级文件服务器filebrowser火狐无法启动,如何恢复数据、书签、密码下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

iOS H5容器的一些探究(一):UIWebView和WKWebView的比较和选择

一、Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案。但是他们存在一些硬伤,比如App的发版周期偏长、有时无法跟上产品的更新节奏;灵活性差,如果有较大的方案变更,需要发版才能解决;如果存...

js 把字符串保存为txt文件,并下载到本地

代码如下           exportRaw('text.txt','123123123') functionfakeClick(obj) { var ev = document.createEvent("MouseEvents"); ev.ini...

LodopJS代码模版的加载和赋值

Lodop模版有两种方法,一种是传统的JS语句,可以用JS方法里的eval来执行,一种是文档式模版,是特殊格式的base64码,此篇博文介绍JS模版的加载和赋值。两种模版都可以存入一下地方进行调用,比如数据库等。 JS模版的生成,可查看本博客的相关博文:Lodop的JS模版代码、文档式模版 生成加载赋值博文索引 关于该JS模版的加载,需要使用JS里的一个方...

用js小类库获取浏览器的高度和宽度信息

在做项目时碰到了要在页面上显示一个浮动DIV层的效果。本来做的是在页面居中时显示的,但后来经过自己的测试发现,当网页中出现了滚动条之后,那个浮动的DIV却还是在页面的顶部显示的。因此当用户在一个较长内容的网页中点击某一个按钮显示DIV层会发现没有任何效果(其实已经在页面的顶部显示了),因此,我们需要准备的知道用户当前的浏览的位置的信息。在实现这个要求之前,...

js打印隐藏的div,可自定义样式

这里是全部代码,可以直接运行。js需要自行导入 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/...

新手入门贴:史上最全Web端即时通讯技术原理详解

 关于IM(InstantMessaging)即时通信类软件(如微信,QQ),大多数都是桌面应用程序或者native应用较为流行,而网上关于原生IM或桌面IM软件类的通信原理介绍也较多,此处不再赘述。而web端的IM应用,由于浏览器的兼容性以及其固有的“客户端请求服务器处理并响应”的通信模型,造成了要在浏览器中实现一个兼容性较好的IM应用,其通信过程必然是...