工作需要，在空闲时间看了下Cocos2dJS的热更新。对其进行了一个简单的实现，这里总结分享一下。忍不住吐槽一下Cocos2dJS的官方文档…版本落后很多，当前最新Release版本是V3.3，文档还是V3.0的东西，虽然有借鉴意义，不过感觉还是略坑，不能因为自己是开源就放松对文档的完善啊！国外大的开源项目，文档不都好好的么。

吐槽结束，开始干活！

Cocos2dJS 热更新

Cocos2dJS 热更新是啥？Cocos2dJS终归还是一个游戏引擎，就以游戏的过程来理解吧。传统游戏需要更新人物动画、地图场景、游戏逻辑、背景音乐怎么办？新出一个APP放到应用商店等用户下载，或者好一点游戏内提示又升级并自行下载完整的新版本APP。
使用Cocos2dJS的热更新，那就大不一样了。它可以做到进入游戏后下载需要更新的资源甚至是脚本本身，而且更新过程不需要退出游戏。只要用户联网，就能够保证使用到最新的资源。
这些场景就非常适合使用Hot Fix

  • 想在游戏中对春节开放新活动，不能保证应用商店能准时过审核上线

  • 发现一个严重的Bug，需要立即修复

  • 需要经常换游戏资源，提升新鲜感

  • 先放一个中规中矩的版本过市场审核，然后绕过审核自己直接推新内容，哈哈

对于游戏来说，这个特性是比较重量级的。不过因为JavaScript的语言特性能支持这一功能，所以Cocos2dJS能用此特性，而Cocos2d-x无法使用。

特性

以下是官方提供的特性

  • 多线程并行下载支持

  • 两层进度统计信息：文件级以及字节级

  • Zip压缩文件支持

  • 断点续传

  • 详细的错误报告

  • 文件下载失败重试支持

Simple

1. manifest配置文件

热更新需要用到的配置文件有2种，都是以.manifest结尾。
一种是精简版，一种是完整版。精简版称为version.manifest，完整版称为project.manifest。
version.manifest：

{
    "packageUrl" : "http://127.0.0.1:8080/JsUpdateServer/res", 
    "remoteManifestUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/project.manifest", 
    "remoteVersionUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/version.manifest", 
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1",
        "2" : "1.0.2"
    },
    "engineVersion" : "3.3"
}

version.manifest是可选的，其中的所有字段也出现在project.manifest中，并且内容一样，如果没有就会从服务端下载完整版。但是如果完整版特别大，那么这个小版本的优势就很明显了。

project.manifest：

{
    "packageUrl" : "http://127.0.0.1:8080/JsUpdateServer/res", 
    "remoteManifestUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/project.manifest", 
    "remoteVersionUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/version.manifest", 
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1",
        "2" : "1.0.2"
    },
    "engineVersion" : "3.3",
    "assets" : {
        "update1" : {
            "path" : "src/app.zip",
            "md5" : "41D8E948052B5B714B14F81612CF534D",
            "compressed" : true,
            "group" : "1"
        }, 
        "update2" : {
            "path" : "res/HelloWorld.png",
            "md5" : "A0FA3FA681D500575012D5E802F74D50",
            "group" : "1"
        },
        "update3" : {
            "path" : "res/Bound.png",
            "md5" : "E7D4218B02CD0C5BB35ADC55E133DBA2",
            "group" : "1"
        },
        "update4" : {
            "path" : "src/resource.js",
            "md5" : "BA47101EBB65FBFCFB61C4CC57A306CA",
            "group" : "2"
        }
    },
    "searchPaths" : [
    	"res/"
    ]
}

所有字段具体含义，官方文档的定义还是比较详细，只是少了groupVersions这个新字段：

  • packageUrl : 远程资源的下载根路径。
  • remoteVersionUrl : 远程版本文件的路径，用来判断服务器端是否有新版本的资源。
  • remoteManifestUrl : 远程配置文件的路径，包含版本信息以及所有资源信息。
  • version : 配置文件对应的版本。
  • groupVersions : 是新增的功能字段，用于做增量更新很方便。
  • engineVersion : 配置文件对应的引擎版本。
  • assets : 所有资源信息。
    key : 升级名称
    path : 键代表资源的相对路径（相对于packageUrl）。
    md5 : md5值代表资源文件的版本信息。
    compressed : [可选项] 如果值为true，文件被下载后会自动被解压，目前仅支持zip压缩格式。
  • searchPaths : 需要添加到cocos2d引擎中的搜索路径列表。

以我的配置为例，一个完整的更新流程是这样的：

先通过本地的version.manifest和服务端的version.manifest比较，如果本地version低于服务端，那么就会再去获取project.manifest。

如果version相同，那么会比较groupVersions。

如果本地没有下载过groupVersions中的任何更新，那么会依次下载升级包。

如果本地下载过1.0.1版本的升级包，那么就会跳过1.0.1下载属于1.0.2版本的升级内容。

如果下载失败，或者没有网络导致更新失败的，会继续使用未更新前的版本。并且下次启动会继续尝试更新。

2. 创建后台

用一种你喜欢的方式起一个后台服务。我朴实无华的用IDE(Eclipse for JavaEE)建立了一个空的Web工程，用Tomcat起了一个后台。

从刚才的配置文件可以看出，Web工程名为JsUpdateServer。

在WebContent的根目录下新建一个index.html文件，随便在里边写些东西，用来验证我的后台已经起来。

Run起来之后，在浏览器里输入http://localhost:8080/JsUpdateServer/index.html看看是不是能够看到你刚才写的内容？

到这里你的后台已经OK了~

3. 创建Cocos2dJS工程

新建一个Cocos2dJS工程，可以用专用的IDE(Cocos Code IDE)，官网有下载，也有如何配置的教程，这里就不多说了。

在res目录下，新建一个project.manifest文件。这个是初始版本信息，之后的更新会用到这个文件。内容如下：

{ 
    "packageUrl" : "http://127.0.0.1:8080/JsUpdateServer/res", 
    "remoteManifestUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/project.manifest", 
    "remoteVersionUrl" : "http://127.0.0.1:8080/JsUpdateServer/res/version.manifest", 
    "version" : "1.0", 
    "engineVersion" : "3.3", 
    "assets" : {
    },
    "searchPaths" : [ 
    ] 
}

在src目录下，新建一个jsList.js文件，内容如下：

var jsList = [ 
              "src/resource.js", 
              "src/app.js" 
              ]

这个文件里包括的是需要加载的js文件路径，将会在其他地方加载。

在src目录下，新建一个assetsManagerScene.js文件，这里就是热更新的主要逻辑了。代码如下：

var failCount = 0; 
var maxFailCount = 1;   //最大错误重试次数

/** 
 * 自动更新js和资源 
 */ 
var AssetsManagerLoaderScene = cc.Scene.extend({ 
	_am:null, 
	_progress:null, 
	_percent:0, 
	run:function(){ 
		if (!cc.sys.isNative) { 
			this.loadGame(); 
			return; 
		}

		var layer = new cc.Layer(); 
		this.addChild(layer); 
		this._progress = new cc.LabelTTF.create("update 0%", "Arial", 12); 
		this._progress.x = cc.winSize.width / 2; 
		this._progress.y = cc.winSize.height / 2 + 50; 
		layer.addChild(this._progress);

		var storagePath = (jsb.fileUtils ? jsb.fileUtils.getWritablePath() : "./");
		cc.log("storagePath is " + storagePath);
		this._am = new jsb.AssetsManager("res/project.manifest", storagePath); 
		this._am.retain();

		if (!this._am.getLocalManifest().isLoaded()) 
			//if (true)
		{ 
			cc.log("Fail to update assets, step skipped."); 
			this.loadGame(); 
		} 
		else 
		{ 
			var that = this; 
			cc.EventListenerAssetsManager
			var listener = new jsb.EventListenerAssetsManager(this._am, function(event) { 
				switch (event.getEventCode()){ 
				case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST: 
					cc.log("No local manifest file found, skip assets update."); 
					that.loadGame(); 
					break; 
				case jsb.EventAssetsManager.UPDATE_PROGRESSION: 
					that._percent = event.getPercent(); 
					cc.log(that._percent + "%"); 
					var msg = event.getMessage(); 
					if (msg) { 
						cc.log(msg); 
					} 
					break; 
				case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST: 
				case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST: 
					cc.log("Fail to download manifest file, update skipped."); 
					that.loadGame(); 
					break; 
				case jsb.EventAssetsManager.ALREADY_UP_TO_DATE: 
					cc.log("ALREADY_UP_TO_DATE."); 
					that.loadGame(); 
					break; 
				case jsb.EventAssetsManager.UPDATE_FINISHED: 
					cc.log("Update finished."); 
					that.loadGame(); 
					break; 
				case jsb.EventAssetsManager.UPDATE_FAILED: 
					cc.log("Update failed. " + event.getMessage()); 
					failCount++; 
					if (failCount < maxFailCount) 
					{ 
						that._am.downloadFailedAssets(); 
					} 
					else 
					{ 
						cc.log("Reach maximum fail count, exit update process"); 
						failCount = 0; 
						that.loadGame(); 
					} 
					break; 
				case jsb.EventAssetsManager.ERROR_UPDATING: 
					cc.log("Asset update error: " + event.getAssetId() + ", " + event.getMessage()); 
					that.loadGame(); 
					break; 
				case jsb.EventAssetsManager.ERROR_DECOMPRESS: 
					cc.log(event.getMessage()); 
					that.loadGame(); 
					break; 
				default: 
					break; 
				} 
			});

			cc.eventManager.addListener(listener, 1); 
			this._am.update(); 
			cc.director.runScene(this); 
		}

		this.schedule(this.updateProgress, 0.5); 
	},

	loadGame:function(){ 
		//jsList是jsList.js的变量，记录全部js。 
		cc.loader.loadJs(["src/jsList.js"], function(){ 
			cc.loader.loadJs(jsList, function(){ 
				cc.director.runScene(new HelloWorldScene()); 
			}); 
		}); 
	},

	updateProgress:function(dt){ 
		this._progress.string = "update" + this._percent + "%"; 
	},

	onExit:function(){ 
		cc.log("AssetsManager::onExit");

		this._am.release(); 
		this._super(); 
	} 
});

热更新主要是通过引擎提供的AssetsManager来实现的。

在AssetsManagerLoaderScene里，用到了res/project.manifest，是用来对版本对比的。

下载完成后的资源会被解压，然后放在jsb.fileUtils.getWritablePath()的路径下，加到引擎的搜索范围中，并且他们的优先级是高于APP原本的资源路径的。所以相同的资源名称，引擎会优先使用更新路径下的文件，就达到更新的目的。

下载成功后会执行loadGame方法，里边会加载src/jsList.js的所有资源。也就是说通过AssetsManagerLoaderScene来确保热更新完成后，再加载所有资源。

由于资源和脚本的加载顺序发生了改变，所以还要修改根目录下的main.js和”project.json”。

main.js：

cc.game.onStart = function(){
    cc.view.adjustViewPort(true);
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
    cc.view.resizeWithBrowserSize(true);
    
    var scene = new AssetsManagerLoaderScene(); 
    scene.run(); 
};
cc.game.run();

将启动场景改为我的热更新场景AssetsManagerLoaderScene。

project.json：

{
    "project_type":"javascript",
    "debugMode":1,
    "showFPS":true,
    "frameRate":60,
    "id":"gameCanvas",
    "renderMode":0,
    "engineDir":"frameworks/cocos2d-html5",
    "modules":[
        "cocos2d",
        "extensions"
    ],
    "jsList":[
        "src/assetsManagerScene.js" 
    ]
}

将jsList的值改为src/assetsManagerScene.js，只要加载这个js，其他js会在AssetsManagerLoaderScene中被加载。

到这里你可以跑起来看下，虽然获取不到升级文件，但是可以以最原始的版本跑起来。

4. 在后台配置升级文件

现在到后台工程的WebContent目录下添加升级文件。

从我的manifest配置文件你可以看到，我又建立了一个res文件夹，在其中分别建立src和res分别对应Cocos2dJS工程中的资源、脚本文件夹。

随意修改一下app.js，将其作为更新内容使用。总结了几个要注意的地方。

  1. 升级文件的路径，一定要和配置文件中的path内容一致。
  2. 升级文件是.zip，记得compressed改为true。
  3. 添加新的资源文件要记得同步更新resource.js。
  4. 新增js文件也记得同步更新jsList.js。

5. 回到Cocos2dJS工程

核对一下project.manifest文件中的地址是不是和后台一致，内容是否正确。

没问题的话就可以跑起来了，会发现你的升级内容被下载下来并且更新了。

参考

本文工程后台&Cocos2dJS的简陋源码戳这里，Cocos2dJS工程中的文件替换你的文件，通用的引擎工程太大没有上传。

其他可以使用到的教程
http://cocos2d-x.org/docs/manual/framework/html5/v3/assets-manager/zh
https://github.com/faint2death/cocos2d-js/blob/master/assetsmanager.md
# javascript # php # cocos2d
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

cover

赛项征集 | 第二届开放原子开源大赛——汽车软件开源赛火热进行中

avatar 开放原子开发者工作坊

开放原子校源行启动优质开源课程征集，助力高校开源人才培养

校源行启动优质开源课程征集，助力高校开源人才培养

avatar 开放原子开发者工作坊
cover

第二届Open Source Congress在北京成功举办

avatar 开放原子开发者工作坊