Cocos2d-js 热更新学习笔记

转载至： http://blog.csdn.net/pt_xxj/article/details/68927705

为什么还要再写一篇关于cocos2d js热更新的笔记，最单纯的想法就是记录心得，另外也是因为添加了一个记录热更新资源大小的小功能，故而想分享一下。

在cocos2d js引擎中的js是作为一种特殊的资源文件使用（脚本文件），那么游戏运行过程中通过定制的资源管理器从服务器获取新的js文件并重新加载运行，那么也就实现了看似比较玄妙的热更新功能。当然此资源管理器需要具备资源对比、资源下载、资源处理、资源覆盖及资源加载等等的一系列功能，幸运的是cocos已经实现了这些功能，我们需要做的就是学会配置使用而已。

此热更新基于cocos2d-js 3.6.1测试使用。

————————————————朴实无华分割线，以上内容不重要————————————————

cocos2d js的热更新功能主要由jsb.AssetsManager实现，绑定了引擎底层的C++代码AssetsManager类，具体的逻辑和实现都可以查看此类。具体的热更新的是通过一个预先配置的project.manifest以及服务器端的project.manifest和version.manifest配合使用来实现的。

1、热更新系统实现

初始project.manifest：

{

    "packageUrl": "http://192.168.0.73:8080/projectName/std/",

    "remoteManifestUrl": "http://192.168.0.73:8080/projectName/std/project.manifest",

    "remoteVersionUrl": "http://192.168.0.73:8080/projectName/std/version.manifest",

    "version": "1.0.0",

    "groupVersions" :

    {

    },

    "groupSizes" :

    {

    },

    "engineVersion": "3.6.1",

    "assets" :

    {

    },

    "searchPaths":

    [

    ]

}

具有两个版本增量更新的服务器project.manifest：

{

    "packageUrl": "http://192.168.0.73:8080/projectName/std/",

    "remoteManifestUrl": "http://192.168.0.73:8080/projectName/std/project.manifest",

    "remoteVersionUrl": "http://192.168.0.73:8080/projectName/std/version.manifest",

    "version": "1.1.2",

    "groupVersions" :

    {

        "1":"1.1.1",

        "2":"1.1.2"

    },

    "groupSizes" :

    {

        "1":115.0,

        "2":115.0

    },

    "engineVersion": "3.6.1",

    "assets" :

    {

        "update1":

        {

            "path":"update1.zip",

            "md5":"",

            "compressed" : true,

            "group":"1"

        },

        "update2":

        {

            "path":"update2.zip",

            "md5":"",

            "compressed" : true,

            "group":"2"

        }

    },

    "searchPaths":

    [

        "update1/",

        "update2/"

    ]

}

具有两个版本增量更新的服务器version.manifest：

{

    "packageUrl": "http://192.168.0.73:8080/projectName/std/",

    "remoteManifestUrl": "http://192.168.0.73:8080/projectName/std/project.manifest",

    "remoteVersionUrl": "http://192.168.0.73:8080/projectName/std/version.manifest",

    "version": "1.1.2",

    "groupVersions" :

    {

        "1":"1.1.1",

        "2":"1.1.2"

    },

    "groupSizes" :

    {

        "1":115.0,

        "2":115.0

    }

}

此热更新配置文件我添加了groupSizes字段，用于展示更新资源文件大小，方便用户玩家自主选择更新时机。另外配置的时候按照渠道划分的，这个是std是标准渠道的热更新文件配置。至于其他字段网路上已经有太多的讲解，就不再重复。

资源文件配置完毕，那么就是具体的使用了，我使用了一个js的静态类来实现热更新的检测以及更新过程，我看其他人的实现一般都是直接强制更新，个人感觉不太友好，所以我的热更新实现是分步进行的。

hotfix-manager.js

/**

 * 热更新管理器

 */

var HotFixManager = HotFixManager || {

    // 更新资源管理器

    _mAssetsMgr:null,

    _mTryCount:0,

    // 更新基本配置

    _mManiFest:"",

    _mWritePath:"",

    _mTryTimes:1,

    // 更新过程进度回调函数

    _mUpdateCall:null,

    _mUpdatetarget:null,

    // 更新完成回调

    _mFinishCall:null,

    _mFinishtarget:null,

    // 更新已找到标识

    _mHadFind:false,

    /**

     * 热更新系统初始化

     * @param call 更新完成回调函数

     * @param target 回调函数绑定节点

     */

    init:function(call,target)

    {

        this._mFinishCall = call;

        this._mFinishtarget = target;

        // 这一部分的配置使用也可以通过传递参数进行实现

        this._mManiFest = "res/static/project.manifest";

        this._mWritePath = jsb.fileUtils?jsb.fileUtils.getWritablePath()+"hotFix/":"./hotFix/";

        this._mTryTimes = 1;

        this._mAssetsMgr = new jsb.AssetsManager(this._mManiFest, this._mWritePath);

        this._mAssetsMgr.retain();

        cc.eventManager.addListener(new jsb.EventListenerAssetsManager(this._mAssetsMgr,this._eventListener.bind(this)),1);

    },

    _eventListener:function(event)

    {

        cc.log("assetsMgr:state = %s;event:id = %s,code = %s,message = %s",

                this._mAssetsMgr.getState(),event.getAssetId(),

                event.getEventCode(),JSON.stringify(event.getMessage()));

        switch(event.getEventCode())

        {

        case jsb.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:    // 0

        case jsb.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:    // 1

        case jsb.EventAssetsManager.ERROR_PARSE_MANIFEST:       // 2

        case jsb.EventAssetsManager.ERROR_UPDATING:             // 7

        case jsb.EventAssetsManager.ERROR_DECOMPRESS:           // 10

            // 此处可以另加一个this.onError(event.getEventCode())操作，不过个人感觉没必要，直接直接做失败结束处理

            this.onFinish(false);

            break;

        case jsb.EventAssetsManager.UPDATE_FINISHED:            // 8

        case jsb.EventAssetsManager.ALREADY_UP_TO_DATE:         // 4

            this.onFinish(true);

            break;

        // 资源下载完成，进行游戏内资源更新（包括资源解压等）

        case jsb.EventAssetsManager.ASSET_UPDATED:              // 6

            break;

            // 此处checkUpdate()和 update()都会触发新版本发现操作（区别在于前者到此处任务已结束，后者会继续后续资源下载操作）

        case jsb.EventAssetsManager.NEW_VERSION_FOUND:          // 3

            this._onFind();

            break;

        case jsb.EventAssetsManager.UPDATE_PROGRESSION:         // 5

            // 状态值8代表热更新资源下载中，添加此判断是筛选更新下载进度

            if(this._mAssetsMgr.getState() == 8)

            {

                cc.log(event.getPercent());

                this._onUpdate(event.getPercent());

            }

            break;

        case jsb.EventAssetsManager.UPDATE_FAILED:              // 9

            this._mTryCount++;

            if (this._mTryCount < this._mTryTimes)

            {

                this._mAssetsMgr.downloadFailedAssets();

            }

            else

            {

                this._mTryCount = 0;

                this.onFinish(false);

            }

            break;

        default:break;

        }

    },

    /**

     * 检测是否有热更新资源

     */

    checkUpdate:function()

    {

        this._mAssetsMgr.checkUpdate();

    },

    _onFind:function()

    {

        // 系统在进行正式更新时，在下载project.manifest后仍旧会再次回调此处回调

        if(this._mHadFind)

        {

            return;

        }

        this._mHadFind = true;

        // 计算热更新资源大小，需在cocos提供的文件配置基础上自主增加groupSizes字段

        var updateSize = 0.0;

        try

        {

            var vSize = 0.0;

            var pSize = 0.0;

            var versionString = jsb.fileUtils.getStringFromFile(this._mWritePath+"version.manifest");

            var projectString = jsb.fileUtils.getStringFromFile(this._mWritePath+"project.manifest");

            if(versionString)

            {

                var vJson = JSON.parse(versionString);

                for(var it in vJson.groupSizes)

                {

                    vSize += parseFloat(vJson.groupSizes[it]);

                }

            }

            if(projectString)

            {

                var pJson = JSON.parse(projectString);

                for(var it in pJson.groupSizes)

                {

                    pSize += parseFloat(pJson.groupSizes[it]);

                }

            }

            updateSize = vSize - pSize;

        }

        catch (e)

        {

            cc.log(e);

        }

        var layer = new HotFixFindLayer(updateSize);

        cc.director.getRunningScene().addChild(layer);

    },

    /**

     * 执行热更新

     */

    doUpdate:function()

    {

        this._mAssetsMgr.update();

    },

    /**

     * 设置热更新下载进度回调

     * @param call

     * @param target

     */

    setUpdateCall:function(call,target)

    {

        this._mUpdateCall = call;

        this._mUpdatetarget = target;

    },

    _onUpdate:function(percent)

    {

        this._mUpdateCall&&this._mFinishtarget&&this._mFinishtarget.runAction(cc.callFunc(this._mUpdateCall, this._mFinishtarget, percent));

    },

    /**

     * 热更新结束

     * @param success bool更新是否成功

     */

    onFinish:function(success)

    {

        this._mFinishCall&&this._mFinishtarget&&this._mFinishtarget.runAction(cc.callFunc(this._mFinishCall, this._mFinishtarget, success));

        this._mAssetsMgr.release();

        this._mHadFind = false;

    }

};

/**

 * 热更新找到选择对话框，主要考虑到资源比较大，又不是强制更新的情况

 */

var HotFixFindLayer = cc.Layer.extend({

    ctor:function(updateSize)

    {

        this._super();

        var popBoxBg = new cc.LayerColor(cc.color(0, 0, 0, 200),this.width*0.75, this.height*0.15);

        popBoxBg.setPosition(this.width*0.5-popBoxBg.width/2, this.height*0.5-popBoxBg.height/2);

        this.addChild(popBoxBg);

        var HotUpdateFindDesc = new ccui.Text("从游戏服务器检测到有"+updateSize+"M资源更新，是够立即进行更新操作？", "Arial", 28);

        HotUpdateFindDesc.setContentSize(popBoxBg.width*0.85, popBoxBg.height*0.7);

        HotUpdateFindDesc.setPosition(popBoxBg.width*0.5, popBoxBg.height*0.5);

        HotUpdateFindDesc.ignoreContentAdaptWithSize(false);

        popBoxBg.addChild(HotUpdateFindDesc);

        var sureItem = new cc.MenuItemLabel(ccui.Text("立即更新", "Arial", 28),function(){

            HotFixManager.doUpdate();

            popBoxBg.removeAllChildren(true);

            var percentDesc = new ccui.Text("更新进度：0%", "Arial", 32);

            percentDesc.setAnchorPoint(0,0.5);

            percentDesc.setPosition(popBoxBg.width*0.25, popBoxBg.height*0.5);

            popBoxBg.addChild(percentDesc);

            HotFixManager.setUpdateCall(function(target,data){

                percentDesc.setString(cc.formatStr("更新进度：%s%",parseInt(data)));

                if(parseInt(data) == 100)

                {

                    this.removeFromParent(true);

                    HotFixManager.setUpdateCall();

                }

            },this);

        },this);

        var sureMenu = new cc.Menu(sureItem);

        sureMenu.setPosition(popBoxBg.width*0.25, popBoxBg.height*0.2)

        popBoxBg.addChild(sureMenu);

        var cancelItem = new cc.MenuItemLabel(ccui.Text("下次更新", "Arial", 28),function(){

            this.removeFromParent(true);

            HotFixManager.onFinish(false);

        },this);

        var cancelMenu = new cc.Menu(cancelItem);

        cancelMenu.setPosition(popBoxBg.width*0.75, popBoxBg.height*0.2)

        popBoxBg.addChild(cancelMenu);

    }

});

其实这个更新操作的实现方式不是特别符合设计模式，在HotFixManager的_onFind函数尾部

var layer = new HotFixFindLayer(updateSize);

cc.director.getRunningScene().addChild(layer);

是不该直接实现界面显示的，应该通过使用时自己定制一个弹窗界面然后再根据玩家选择调用HotFixManager对应的函数进行操作，不过我的初始想法就是让使用尽量方便，所以我尽量去掉了资源的使用，当成了一个系统内的控件进行了尽量的封装操作。

2、热更新系统使用

新建一个scene使用即可hotfix-scene.js：

var HotFixScene = cc.Scene.extend({

    ctor:function()

    {

        this._super();

        var layer = new cc.Layer();

        this.addChild(layer);

        var loadPoster = new cc.Sprite("res/static/poster.png");

        loadPoster.setPosition(layer.width*0.5,layer.height*0.5)

        loadPoster.setScale(layer.height/loadPoster.height);

        layer.addChild(loadPoster);

        // 热更新系统使用

        HotFixManager.init(this._updateFinish,this);

        HotFixManager.checkUpdate();

    },

    _updateFinish:function()

    {

        var delay_func = function()

        {

            // js文件列表文件，此文件在热更新过程中应该保持路径不变

            // 因为此处是写死的，不太好改变，除非你自己在热更新配置一个字段，用于保存此路径

            var jsFile = "src/dynamic/js-list.js";

            // 加载js文件列表

            cc.loader.loadJs(jsFile, function(){ 

                // 加载js文件列表中的js文件

                cc.loader.loadJs(jsList, function(){

                    // 跳转到正式游戏scene

                    cc.director.runScene(new GameScene());

                });

            });

        }

        // 此操作是为了避开当前帧跳转，不然界面会有卡顿感觉

        this.scheduleOnce(delay_func, 0.05);

    }

});

热更新系统的使用是特别简单的，只需要在main.js的cc.game.onStart函数执行

cc.director.runScene(new HotFixScene());

就可以了。当然这两个文件你要配置在project.json中。

3、热更新系统应用于已完成项目

其实我真正想做到的是作为一个插件使用，对于已经完成的项目，要添加此热更新插件特别简单，只需要做几件事情就可以了：

1、将原有的project.json中的js文件列表写进”src/dynamic/js-list.js”文件的var jsList=[]数组中（jsList名字对应于HotFixScene中的jsList）。

2、将上述两个文件加入游戏，并将其路径配置到project.json。

3、配置自己的热更新文件配置（包括搭建自己的服务器），修改HotFixManager.init()中的读写目录（若跟我的目录一致则不用改写）。

4、修改热更新结束后的scene跳转为已实现的文件跳转。

// 跳转到正式游戏scene

cc.director.runScene(new GameScene());

5、测试运行。

————————————————朴实无华分割线，以下内容不重要————————————————

下面是两张实际运行图：（背景图借用皇室战争的海报图）

选择界面：

资源更新中界面：

结束