标签：Bundle js cocosCreator 文件夹 构建 Asset 服务器

前言：cocosCreator热更和Asset Bundle使用和入门学习。
版本：2.4.x。

简述：根据官方文档进行抽减剥离出来，更加简洁易懂；作为学习这两个模块的切入点，以便新手能更好的理解和学习。
大家应该都听过大厅+子游戏的模式：其实说的就是热更和Asset
Bundle，大厅界面和逻辑以及资源我们采用热更包的方式，而界面中的子游戏我们可以采用Asset Bundle。那么这样的好处是啥：
1、热更更方便快捷，拆分为多个子包更加是原始包体积更小，启动更快。 (需要重启）
2、子包模块化方便维护和扩展，减少主体包的同时，迁移更方便。（无需重启）。 下面依次对两个模块进行介绍和学习。

一、服务器的搭建

Asset Bundle可以不需要服务器而作为内置子包进行测试，但我们还是习惯放置带服务器这样才能减小包体。
使用NodeJS作为服务器环境，自行搜索NodeJS的下载和安装教程。
1、桌面新建2个文件夹命名：node和testServer。
node：存放server.js脚本。
testServer：存在我们构建的bundle和热更资源，为了验证正确性，我们在该文件夹下防止一个txt文件用于测试。
其中server.js脚本内容如下：

注意：windows和mac平台识别路径不一样。路径也就是testServer文件夹的绝对路径。 这里5001是监听接口可以更改。
使用npm安装相关引用成功后，cd到node文件夹路径下，执行node server.js指令开启服务器的监听。
验证服务器：在浏览器输入http://127.0.0.1:5001/命令.txt，如下验证成功否则检查相关路径是否正确。

git的链接最下方

二、Asset Bundle

相对简单，先说Asset Bundle。建议浏览一下官网的介绍。
https://docs.cocos.com/creator/2.4/manual/zh/scripting/load-assets.html
https://docs.cocos.com/creator/2.4/manual/zh/asset-manager/

最原始的项目中添加BundleTest文件夹，里面放了两张图片。
如下图：我们将BundleTest文件夹设置为bundle，然后设置不同的目标平台：注意如果使用web需要解决跨域问题。
浏览器跨域问题解决方案：
https://blog.csdn.net/weixin_43829047/article/details/108850241
注意：不要忘记点击右上角应用

构建发布如下：点击构建；如果你选择android平台需要配置SDK和NDK。
这里我们使用web进行说明，关于MD5我们稍后说。

构建成功后如下图：

我们将对应构建后的BundleTest放置到我们预先准备的testServer文件夹里面。

我们在看一下Helloworld脚本代码：其中的version是你构建后勾选了MD5Cache后，在构建后的BundleTest中可以看文件名字中的MD5。
这是后你可以删除项目中的BundleTest文件夹和里面的内容，我们使用的web所以不需要打包道原生平台，直接运行即可比较方便。
注意：运行会报错，如果你解决了跨域问题。手动打开浏览器的桌面快捷方式，将链接复制到你新打开网页即可。如下：

如果你分包的个数比较多，建议可以用JSON或txt文件存储对应的MD5值。然后存储在远端，代码中进行下载和遍历。

以上便是bundle的一个小测试，建议浏览官方文档后，使用这种方式进行自我研究和学习。
下载后的bundle缓存的管理,有必要读一下：

如过构建的原生平台请查看下一篇中对打包原生平台的操作。

三、热更新

官网介绍：
https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/hot-update.html
https://docs.cocos.com/creator/2.4/manual/zh/advanced-topics/assets-manager.html
我从git上下载了官方给出的案例，我们简化成Helloworld好理解。最开始运行是：Helloworld原始场景，当热更后称为倒计时5-0实例化一个节点带图片的节点。
我们操作的方式：构建一次全的项目，版本高一点；将构建后的资源放到服务器中。在删减资源和代码重新构建打包然后进行测试。

三步走方案：

• 基于原生打包目录中的 assets 和 src 目录生成本地 Manifest 文件。 创建一个热更新组件来负责热更新逻辑。
• 游戏发布后，若需要更新版本，则生成一套远程版本资源，包含 assets 目录、src 目录和 Manifest
  文件，将远程版本部署到服务端。
• 当热更新组件检测到服务端 Manifest 版本不一致时，就会开始热更新

第一步：
下载官方案例，我们需要其中的几个文件。都有自己的作用可以浏览官网介绍：
1、version_generator.js根据构建后资源生成.manifest文件，放到项目根目录下。
2、packages中的插件放入自己项目中的packages文件夹下。作用参考官网。
3、热更脚本，HotUpdate。

我们在自己服务器也就是testServer文件下新建：remote-assets1文件夹，目的是构建后的资源放到这里面。
更改如下路径就行来自version_generator.js。

然后构建选择原生平台，比如windows和android，adnroid需要配置JDK和SDK以及ANT环境。为了方便测试建议构建windows测试建议安装2017进行编译，问题会少一些。

我们看一下构建面板和构建后的内容：

构建后的内容：拷贝到testServer/remote-assets1文件夹下。

然后cd到项目路径下运行version_generator.js（路径和版本信息已更改）执行node version_generator.js就行。
将生成的.manifest文件同样放到：testServer/remote-assets1


如果不放心可以如上图拖入资源后，重新构建重新生成.manifest文件。重新构建需要将构建资源重新放入服务器路径下。

这里为了方便，我们注释掉代码，按照以上重新此操作然后构建编译就可。记得修改版本比上次小。
热更后我其实就是开启了如下注销的代码。

我将项目提交带gie上：https://gitee.com/songhuiyuan/cocos-creator-hot-update-test.git

如果觉看官方文档不是很清楚的的话，建议不要看了；直接上手验证。遇到问题解决问题，也就清楚了~

标签：Bundle,js,cocosCreator,文件夹,构建,Asset,服务器
来源： https://blog.csdn.net/weixin_41997753/article/details/122661210

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。