zoukankan html css js c++ java

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、测试运行。

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

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

选择界面：
热更新资源发现后弹出的操作选择界面

资源更新中界面：
资源下载中的进度显示图片

结束