CocosCreator大厅+子游戏+热更新方案

转载自:https://www.jianshu.com/p/efee9f5937a3

前言

随着游戏的玩法越来越多,也就意味着包体越来越大,对于玩家来说,首次下载的包体就会越来越大,从而也会增加首次启动的时间,在未推出分包功能之前,所有的代码都会生成到一个project.js的文件中,此时对于我们开发者迫切希望把游戏一些比较独立的模块的代码及资源分开来进行加载,由于公司做的是棋牌游戏,一个从零开始的新项目,当时CocosCreator2.1.2的最新版本,所以就直接用了最新版本做项目,做之前框架也是朝着大厅+子游戏的方向,看了不少论谈,多数的做法就是大厅与子游戏分开项目进行开发,但个人觉得对项目代码及资源上的管理特别的不方便,在这项目立项之前对当前Creator版本的功能做了大致的了解,发现自从v2.0.7版本就已经开始支持分包处理,但v2.1.2版本,由于引擎对自己引擎资源的管理有问题,所以写这个文档就以最新版本v2.3.3来做的,但2.1.2之后的版本本人确定是没有问题的,只是需要对引擎进行一些修改

项目环境

CocosCreator 2.3.3
Microsoft Visual Studio Enterprise 2015(SDK安装 : Windows Phone SDK 8.0)
Microsoft Visual Code
Android Studio 3.6.3(API Level : android-28 NDK : android-ndk-r16b

项目示例

示例Git地址

项目关键点

1.该方案基于CocosCreator分包功能
2.大厅与子游戏代码作为同一项目开发,方便对资源及代码的管理,可有效的解决多项目开发可能产生uuid重复问题
3.子游戏之间代码及资源不能相互引用
4.大厅与子游戏之间的通信全部以事件方式进行交互

项目结构

把项目大致分为资源区+代码区
资源区及代码区的结构一致
大厅(大厅+公共+框架)+子游戏的形式,如下图,红包为大厅部分,黄色为子游戏部分

 

项目结构

 

红包大厅部分,无需配置为子包,黄色子游戏部分,需要配置成子包。
需要注意的事,子游戏代码及资源子包名配置一致,如下图

 

游戏1资源

 

游戏1代码

项目扩展插件使用

项目工具

1.引擎修正

为了后面使用方便,安装好你的Creator2.3.3,直接使用引擎修正后,再构建项目,对引擎修改的部分会自动生成到你的构造项目中,如果你的项目目前已经构建,对引擎改动的代码放置在package/engine目录下,到该目录下用对比工具同步到你的项目中,目前还未支持对已经生成构建的项目进行引擎代码的修正

2.资源引用检测

在游戏开发过程中,由于某些子游戏相当类似,所有直接复制进行修改,此时复制得到的子游戏的资源引用仍然指向以前的地方,并未指向复制后得到的资源,又或者不小心在A游戏使用了B游戏的资源,此时在打包完成后,且子游戏都不放置到包内,当通过热更新子游戏进入时,由于只下载了B游戏的资源,但B游戏的资源大多都还指向A游戏,此时会造成找不到资源可能产生崩溃的现象。但当我们游戏的预置体在足够多的情况,如果手动的排查,是一个非常大的工程,所以这边提供了一个检测工具,去检测你的子游戏预置体是否使用到了其它子游戏的资源,如下图

image.png


当你的子游戏做完后,可使用插件来检测完成的子游戏是否引用了其它子游戏的资源,控制台的警告就是你引用了不属于自己子游戏的资源,需要自己手动去处理掉这些问题
对于代码中使用资源问题,全部通过路径代理去获取子游戏的资源
如进入子游戏,打开子游戏1的界面,界面对视图预置体路径的引用如下:

image.png


统一使用这种方式,如果路径的代理没有正确设置,能在第一时间确定问题。是不是资源路径获取错误,还是进入子游戏的相关参数有误,不至于找不到子游戏的资源。

 

3.热更新工具

热更新工具

工具说明

大厅生成Manifest配置
版本号:当前大厅的版本号
资源服务器地址:cdn资源服务器地址

 

build项目资源文件目录:指定你的build目录,如

image.png


点击生成会生成版本控制文件如下图

image.png

 

image.png

 

子游戏生成Manifest配置
目录只能配置子游戏的游戏版本号
测试环境一栏
主要关注本地server物理路径,可以指定你的服务器路径,热更新相关文件直接部署到你的服务器
如我本地服务器:

 

D:/nginx-1.17.10/html/hotupdate

点击部署,最终服务器部署的资源如下

 

image.png

 

执行子游戏包剔除:
当你部署完成后,如果不希望把某个子游戏放入到原始包内,可执行这个命令剔除不包含在包内的子游戏

4.扩展插件配置说明

热更新子游戏及大厅版本的配置及资源检测插件中显示的游戏在packages/config/games.json配置,当开法完成子游戏时,如果需要对其实资源引用合法性检测及版本做更新时,直接对games.json进行修改

示例测试

1.构建

image.png

2.生成热更新版本控制文件

使用热更新插件生成热更新版本控制文件,并部署到自己的测试服务器,如下

 

image.png

3,剔除子游戏

如果希望子游戏在包内,可在【是否包含在原始包内】打勾,否则相反
这里测试一个在包内一个不再包内的情况,配置如下

 

image.png

4.win32平台

打开build\jsb-default\frameworks\runtime-src\proj.win32的工程编译打开游戏如下

 

image.png

 

左边为该游戏的工作目录,目前主包并没有包含有子游戏的代码及资源
分别进入两个子游戏之后,本地缓存如下,gameTwo不在包含,下载子游戏 后运行,gameOne在包内,由于跟服务器版本一致,不会下载,直接使用本地资源及代码

 

image.png

5.android平台

与win32平台一致,打包运行就ok

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个使用 Cocos Creator 3.7 和 TypeScript 实现的简单涂鸦跳跃游戏的代码示例: ```typescript const { ccclass, property } = cc._decorator; @ccclass export default class DoodleJump extends cc.Component { @property(cc.Node) player: cc.Node = null; @property(cc.Node) platformPrefab: cc.Node = null; @property(cc.Integer) jumpHeight: number = 300; @property(cc.Integer) jumpDuration: number = 0.5; @property(cc.Integer) maxJumpCount: number = 2; // 最大跳跃次数 private jumpCount: number = 0; // 当前跳跃次数 onLoad() { cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); cc.director.getCollisionManager().enabled = true; } onDestroy() { cc.systemEvent.off(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: cc.Event.EventKeyboard) { if (event.keyCode === cc.macro.KEY.space) { this.jump(); } } jump() { if (this.jumpCount < this.maxJumpCount) { this.jumpCount++; const jumpAction = cc.jumpBy(this.jumpDuration, cc.v2(0, 0), this.jumpHeight, 1); const callback = cc.callFunc(() => { this.jumpCount--; }); const sequence = cc.sequence(jumpAction, callback); this.player.runAction(sequence); } } spawnPlatform() { // 在场景中生成平台节点 const platformNode = cc.instantiate(this.platformPrefab); // 设置平台的位置 // ... // 添加平台节点到场景中 this.node.addChild(platformNode); } // 碰撞回调 onCollisionEnter(other: cc.Collider, self: cc.Collider) { if (other.node.group === 'platform') { const platform = other.node.getComponent(Platform); if (platform) { platform.bounce(); } } } } ``` 在上述代码示例中,我们使用 TypeScript 编写了一个名为 `DoodleJump` 的组件,它是涂鸦跳跃游戏的主要逻辑控制器。该组件包括了玩家角色、平台预制资源以及一些相关的属性和方法。 在 `jump()` 方法中,我们使用 `cc.jumpBy` 创建一个跳跃动作,并通过回调函数来处理跳跃次数的计数。按下空格键时,会调用 `jump()` 方法触发角色跳跃。 在 `spawnPlatform()` 方法中,你可以根据自己的需求生成平台节点,并设置其位置信息。 在 `onCollisionEnter()` 碰撞回调中,我们检测与平台的碰撞,并调用平台组件的 `bounce()` 方法来实现弹起效果。 请注意,以上代码示例仅为参考,具体的实现方式可能会因你的游戏逻辑和组件设置而有所不同。你可以根据自己的需求和项目结构进行相应的调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值