// cocos creator
首先是官方文档
http://docs.cocos.com/creator/manual/zh/advanced-topics/hot-update.html
http://docs.cocos.com/creator/manual/zh/advanced-topics/assets-manager.html
热更新的原理
客户端存在一个project.manifest文件，该文件包含几个信息：
- packageUrl：url，服务器更新数据包根目录；
- remoteManifestUrl：url， [可选项]服务器上project.manifest文件的url，
- remoteVersionUrl：url，服务器上version.mainifest文件的url；
- version：x.x.x,项目版本；
-
assets：{},资源列表；
key : 资源的相对路径（相对于资源根目录）
md5 : md5 值代表资源文件的版本信息
compressed: [可选项] 如果值为 true，文件被下载后会自动被解压，目前仅支持 zip 压缩格式
size: [可选项] 文件的字节尺寸，用于快速获取进度信息 - searchPaths：" ",搜索路径
客户端通过本地的project.manifest中url，可以获取服务器上project.manifest文件，比较两者的version属性，如果客户端的version比服务器低，则启动更新。
更新的内容：assets是文件列表，里面列出了项目中的完整资源，每个资源都有md5表示，客户端根据本地project.manifest中的assets列表和服务器的assets列表对比，下载不同的资源到临时文件夹，如果最后所有资源都正常，则把临时文件夹的内容替换到本地缓存文件夹中，并且修改优先搜索路径为该文件夹。所以重启游戏之后的使用的资源优先从缓存文件夹中搜索。
需要环境
- nodejs
- cocoscreator
官方案例
-
下载官方范例，解压。该案例已经把客户端和服务器的资源都打包好了，更新包在remote-assets文件夹中。
image.png 服务器--我使用的是nodejs。
1 .新建一个文件夹nodejs，在nodejs中新建hotUpdate文件夹，在把官方案例中的remote-assets复制到hotUpdate文件夹中。
2 .在nodejs中新建一个js脚本，脚本内容如下
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(path.join(__dirname, 'hotUpdate')));
app.listen(80);
3.在nodejs文件夹下执行node app.js命令，启动服务器，可以访问http://127.0.0.1/remote-assets/project.manifest，如果成功访问则服务器启动成功。
接下来修改manifest文件里面的url，有三个文件需要修改，服务器remote-assets中的两个manifest后缀文件，官方项目assets文件夹下的project.manifest
只修改三个url
修改完成之后，打开项目，用模拟器运行看看效果。
点击检查更新按钮
点击立即更新按钮
因为某些原因，模拟器更新完成，重启不能使用更新的资源，所以需要编译成原生，我的电脑不能编译windows，就不上图了。打包成apk自测可以成功更新。
从零开始
-
制作新版本
该项目有两个场景，作为是新版本，资源存放在服务器上。删除一个场景作为旧版本，编译安装在手机上。目标是使用旧版本热更新成新版本，并成功切换场景。
新建一个项目，新建两个场景，helloworld场景是测试热更行是否成功的场景（旧版本不存在helloworld，通过更新可以跳转到该场景）。hotUpdate场景，该场景中添加两个进度条，对应字节和文件个数两种进度，三个label，对应两种进度以及提示信息，三个按钮，分别为，检查更新，更新，切换场景。
image.png -
脚本 --copy官方示例
新建一个hotUpdate脚本，添加在Canvas上。脚本中增加五个变量，把场景中对应的节点拖拽上去。，增加三个回调方法，把他绑定在按钮上。
image.png
cc.Class({
extends: cc.Component,
properties: {
byteLabel: cc.Label,
fileLabel: cc.Label,
byteProgress: cc.ProgressBar,
fileProgress: cc.ProgressBar,
label: cc.Label,
manifestUrl: cc.RawAsset,
},
onLoad() {
var self = this;
this._storagePath = jsb.fileUtils.getWritablePath();
this._am = new jsb.AssetsManager('', this._storagePath, this.versionCompareHandle);
if (!cc.sys.ENABLE_GC_FOR_NATIVE_OBJECTS) {
this._am.retain();
}
this._am.setVerifyCallback(function (path, asset) {
var compressed = asset.compressed;
var expectedMD5 = asset.md5;
var relativePath = asset.path;
var size = asset.size;
if (compressed) {
self .label.string = "Verification passed : " + relativePath;
return true;
}
else {
self .label.string = "Verification passed : " + relativePath + ' (' + expectedMD5 + ')';
return true;
}
});
this.byteProgress.progress = 0;
this.fileProgress.progress = 0;
},
hotUpdate() {
if (this._am && !this._updating) {
this._updateListener = new jsb.EventListenerAssetsManager(this._am, this.updateCb.bind(this));
cc.eventManager.addListener(this._updateListener, 1);
if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
this._am.loadLocalManifest(this.manifestUrl);
}
this._am.update();
this._updating = true;
}
},
checkUpdata() {
if (this._updating) {
this.label.string = 'Checking or updating ...';
return;
}
if (this._am.getState() === jsb.AssetsManager.State.UNINITED) {
this._am.loadLocalManifest(this.manifestUrl);
}
if (!this._am.getLocalManifest() || !this._am.getLocalManifest().isLoaded()) {
this.label.string = 'Failed to load local manifest ...';
return;
}
this._checkListener = new jsb.EventListenerAssetsManager(this._am, this.checkCb.bind(this));
cc.eventManager.addListener(this._checkListener, 1);
this._am.checkUpdate();
this._updating = true;
},
changeScene() {
cc.director.loadScene('helloworld');
},
checkCb: function (event) {
switch (event.getEventCode()) {
case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
this.label.string = "No local manifest file found, hot update skipped.";
break;
case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
this.label.string = "Fail to download manifest file, hot update skipped.";
break;
case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
this.label.string = "Already up to date with the latest remote version.";
break;
case jsb.EventAssetsManager.NEW_VERSION_FOUND:
this.label.string = 'New version found, please try to update.';
this.fileProgress.progress = 0;
this.byteProgress.progress = 0;
break;
default:
return;
}
cc.eventManager.removeListener(this._checkListener);
this._checkListener = null;
this._updating = false;
},
updateCb: function (event) {
var needRestart = false;
var failed = false;
switch (event.getEventCode()) {
case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
this.label.string = 'No local manifest file found, hot update skipped.';
failed = true;
break;
case jsb.EventAssetsManager.UPDATE_PROGRESSION:
this.byteProgress.progress = event.getPercent();
this.fileProgress.progress = event.getPercentByFile();
this.fileLabel.string = event.getDownloadedFiles() + ' / ' + event.getTotalFiles();
this.byteLabel.string = event.getDownloadedBytes() + ' / ' + event.getTotalBytes();
var msg = event.getMessage();
if (msg) {
this.label.string = 'Updated file: ' + msg;
}
break;
case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:
this.label.string = 'Fail to download manifest file, hot update skipped.';
failed = true;
break;
case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:
this.label.string = 'Already up to date with the latest remote version.';
failed = true;
break;
case jsb.EventAssetsManager.UPDATE_FINISHED:
this.label.string = 'Update finished. ' + event.getMessage();
needRestart = true;
break;
case jsb.EventAssetsManager.UPDATE_FAILED:
this.label.string = 'Update failed. ' + event.getMessage();
this._updating = false;
this._canRetry = true;
break;
case jsb.EventAssetsManager.ERROR_UPDATING:
this.label.string = 'Asset update error: ' + event.getAssetId() + ', ' + event.getMessage();
break;
case jsb.EventAssetsManager.ERROR_DECOMPRESS:
this.label.string = event.getMessage();
break;
default:
break;
}
if (failed) {
cc.eventManager.removeListener(this._updateListener);
this._updateListener = null;
this._updating = false;
}
if (needRestart) {
cc.eventManager.removeListener(this._updateListener);
this._updateListener = null;
var searchPaths = jsb.fileUtils.getSearchPaths();
var newPaths = this._am.getLocalManifest().getSearchPaths();
Array.prototype.unshift(searchPaths, newPaths);
cc.sys.localStorage.setItem('HotUpdateSearchPaths', JSON.stringify(searchPaths));
jsb.fileUtils.setSearchPaths(searchPaths);
cc.game.restart();
}
},
});
-
打包资源
首先构建原生
image.png
构建完成在项目中会生成原生项目，热更新需要的资源是res，src两个文件夹以及里面的内容。
把nodejs--hotUpdate--remote-assets文件夹下所有东西都删除，把res，src复制到nodejs--hotUpdate--remote-assets文件夹下。
image.png
构建完原生项目，打开官方项目文件夹，拷贝出 version_generator.js 文件到helloworld项目的根目录（如下图），并在helloworld根目录打开命令窗口，执行命令，node version_generator.js -v 1.7.0 -u http://127.0.0.1/remote-assets/ -s build/jsb-default/ -d assets/
在assets文件夹下会多出两个文件，把他们复制到nodejs--hotUpdate--remote-assets文件夹下。
最终远程资源如图
在nodejs文件夹下执行node app.js命令，启动服务器，可以访问http://127.0.0.1/remote-assets/project.manifest，如果成功访问则服务器启动成功。
- 制作旧版本
删除helloworld场景，脚本，texture文件夹，以及之前生成的manifest文件。保存之后构建项目，构建选项不要变动
在helloworld根目录打开命令窗口，执行命令，node version_generator.js -v 1.0.0 -u http://127.0.0.1/remote-assets/ -s build/jsb-default/ -d assets/注意这里的-v 1.0.0，之前是1.7.0，旧版本版本号要小于新版本
在assets生成两个manifest文件。把project.manifest拖到属性检查器上面。
重新构建原生平台，在main.js加下面这段代码，然后编译
if (cc.sys.isNative) {
var hotUpdateSearchPaths = cc.sys.localStorage.getItem('HotUpdateSearchPaths');
if (hotUpdateSearchPaths) {
jsb.fileUtils.setSearchPaths(JSON.parse(hotUpdateSearchPaths));
}
}
现在已经完成了旧版本的制作。这是我在安卓手机上的效果。
