2. 程式人生 > >cocos2d-js熱更新

cocos2d-js熱更新

阿新 • • 發佈：2018-12-31

1. 熱更新基本思路

得到cocoachina論壇上fysp和akira_cn的幫助，理清了遊戲熱更新的思路：

  • 執行AssetsManager後，搜尋路徑增加了jsb.fileUtils.getWritablePath()目錄，並且是優先搜尋；
  • 需要熱更新js不放在project.json中定義，等AssetsManager更新完了，用cc.loader.load動態載入；
  • 所以在jsb.fileUtils.getWritablePath()目錄下載的資源和js檔案，與專案目錄保持一致，那麼優先載入新下載的資源和js檔案，再進入遊戲，從而實現熱更新。

2. AssetsManager

cocos2d-js 3.0 rc0對AssetsManager功能進行了完善增強，支援多執行緒下載、斷點續傳、檔案壓縮、更好的進度資訊以及錯誤重試機制，實現遊戲資原始檔和指令碼檔案的熱更新變的更加方便。

用cocos new MyGame -l js -d /directory/to/project方式新建一個測試專案，參考sample寫的src/AssetsManager.js：

var __failCount = 0;

var AssetsManagerLoaderScene = cc.Scene.extend({
    _am:null,
    _progress:null,
    _percent:0,
    _percentByFile:0,
    run:function(){
        if (!cc.sys.isNative) {
            this.loadGame
 
();
            return;
        }

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

        // android: /data/data/com.huanle.magic/files/
        var storagePath = (jsb.fileUtils ? jsb.fileUtils.getWritablePath() : "./");

        this._am = new jsb.AssetsManager("res/project.manifest", storagePath);
        this._am.retain();

        if (!this._am.getLocalManifest().isLoaded())
        {
            cc.log("Fail to update assets, step skipped.");
            this.loadGame();
        }
        else
        {
            var that = this;
            var listener = new cc.EventListenerAssetsManager(this._am, function(event) {
                switch (event.getEventCode()){
                    case cc.EventAssetsManager.ERROR_NO_LOCAL_MANIFEST:
                        cc.log("No local manifest file found, skip assets update.");
                        that.loadGame();
                        break;
                    case cc.EventAssetsManager.UPDATE_PROGRESSION:
                        that._percent = event.getPercent();
                        that._percentByFile = event.getPercentByFile();
                        cc.log(that._percent + "%");

                        var msg = event.getMessage();
                        if (msg) {
                            cc.log(msg);
                        }
                        break;
                    case cc.EventAssetsManager.ERROR_DOWNLOAD_MANIFEST:
                    case cc.EventAssetsManager.ERROR_PARSE_MANIFEST:
                        cc.log("Fail to download manifest file, update skipped.");
                        that.loadGame();
                        break;
                    case cc.EventAssetsManager.ALREADY_UP_TO_DATE:
                    case cc.EventAssetsManager.UPDATE_FINISHED:
                        cc.log("Update finished.");
                        that.loadGame();
                        break;
                    case cc.EventAssetsManager.UPDATE_FAILED:
                        cc.log("Update failed. " + event.getMessage());

                        __failCount ++;
                        if (__failCount < 5)
                        {
                            that._am.downloadFailedAssets();
                        }
                        else
                        {
                            cc.log("Reach maximum fail count, exit update process");
                            __failCount = 0;
                            that.loadGame();
                        }
                        break;
                    case cc.EventAssetsManager.ERROR_UPDATING:
                        cc.log("Asset update error: " + event.getAssetId() + ", " + event.getMessage());
                        that.loadGame();
                        break;
                    case cc.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(){
        cc.loader.loadJs(["src/files.js"], function(err){
            cc.loader.loadJs(jsFiles, function(err){
                cc.director.runScene(new HelloWorldScene());
            });
        });
    },
    updateProgress:function(dt){
        this._progress.string = "" + this._percent;
    },
    onExit:function(){
        cc.log("AssetsManager::onExit");

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

修改專案目錄下的main.js：

cc.game.onStart = function(){
    cc.view.setDesignResolutionSize(800, 450, cc.ResolutionPolicy.SHOW_ALL);
        cc.view.resizeWithBrowserSize(true);

        var scene = new AssetsManagerLoaderScene();
        scene.run();
};
cc.game.run();

修改專案目錄下的project.json：

{
    "project_type": "javascript",

    "debugMode" : 1,
    "showFPS" : true,
    "frameRate" : 60,
    "id" : "gameCanvas",
    "renderMode" : 0,
    "engineDir":"frameworks/cocos2d-html5",

    "modules" : ["cocos2d", "extensions"],

    "jsList" : [
        "src/AssetsManager.js"
    ]
}

就留一個AssetsManager.js，其他的js都通過它來載入。

增加一個src/files.js，需要動態載入的js檔案都寫在jsFiles這個數組裡，這樣js檔案有增加變化，這個files.js一併更新，方便動態載入：

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

專案res目錄增加一個project.manifest檔案，AssetsManager.js裡會用到：

{
    "packageUrl" : "http://10.0.128.219/res",
    "remoteManifestUrl" : "http://10.0.128.219/res/project.manifest",
    "remoteVersionUrl" : "http://10.0.128.219/res/version.manifest",
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.0"
    },
    "engineVersion" : "3.0 rc0",
    "searchPaths" : [
    ]
}

這裡主要配置服務端資源下載地址，具體欄位說明，在下面服務端配置裡說明。然後用cocos compile -p android編譯打包成一個apk安裝包，等配置好服務端更新資源安裝測試。

3. 服務端配置

需要建一個WEB伺服器做下載用，在其WEB目錄http://10.0.128.219/res（我的測試機），增加version.manifest檔案：

{
    "packageUrl" : "http://10.0.128.219/res",
    "remoteManifestUrl" : "http://10.0.128.219/res/project.manifest",
    "remoteVersionUrl" : "http://10.0.128.219/res/version.manifest",
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1"
    },
    "engineVersion" : "3.0 rc0"
}

測試發現，AssetsManager首先會下載version.manifest檔案，如果有更新的版本，那麼才會去下載project.manifest，然後下載其中描述的資原始檔。

project.manifest如下：

{
    "packageUrl" : "http://10.0.128.219/res",
    "remoteManifestUrl" : "http://10.0.128.219/res/project.manifest",
    "remoteVersionUrl" : "http://10.0.128.219/res/version.manifest",
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1"
    },
    "engineVersion" : "3.0 rc0",
    "assets" : {
        "update1" : {
            "path" : "src/app.zip",
            "md5" : "f6bf54e5a0d42c963cc5ae81bf9dc6c6",
            "compressed" : true,
            "group" : "1"
        }
    },
    "searchPaths" : [
    ]
}

寫法和官方文件裡不太一樣，特別是有個groupVersions欄位，這個欄位來自fysp在cocoachina論壇回答其他網友問題寫的示例，測試發現用來做增量更新很方便，後面再說明。其他欄位的說明官方文件已經很詳細了。

由於客戶端本地project.manifest裡groupVersions的版本資訊比伺服器端的低，所以AssetsManager會下載http://10.0.128.219/res/src/app.zip到手機的/data/data/org.cocos2dx.hellojavascript/files/src/app.zip，並且會自動解壓，但不會刪除壓縮包本身。

建議用root過的android手機測試，否則/data/data是沒有許可權檢視。執行客戶端測試程式後用adb連線檢視：

e:\>adb shell
[email protected]:/ $ su
su
[email protected]:/ # ls -l /data/data/org.cocos2dx.hellojavascript/files/src/
ls -l /data/data/org.cocos2dx.hellojavascript/files/src/
-rw-rw-rw- app_65   app_65       2228 2014-07-08 14:23 app.js
-rw-rw-rw- app_65   app_65       1552 2014-07-08 14:23 app.zip
[email protected]:/ # ls -l /data/data/org.cocos2dx.hellojavascript/files/
ls -l /data/data/org.cocos2dx.hellojavascript/files/
-rw-rw-rw- app_65   app_65        553 2014-07-08 14:23 project.manifest
drwxrwxrwx app_65   app_65            2014-07-08 14:23 src
-rw-rw-rw- app_65   app_65        307 2014-07-08 14:23 version.manifest

用firefox除錯連上手機，發現app.js資源地址是/data/data/org.cocos2dx.hellojavascript/files/src/app.js，而不是assets/src/app.js，實現了熱更新：

debug

4. 增量更新

修改服務端version.manifest：

{
    "packageUrl" : "http://10.0.128.219/res",
    "remoteManifestUrl" : "http://10.0.128.219/res/project.manifest",
    "remoteVersionUrl" : "http://10.0.128.219/res/version.manifest",
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1",
        "2" : "1.0.2"
    },
    "engineVersion" : "3.0 rc0"
}

修改服務端project.manifest：

{
    "packageUrl" : "http://10.0.128.219/res",
    "remoteManifestUrl" : "http://10.0.128.219/res/project.manifest",
    "remoteVersionUrl" : "http://10.0.128.219/res/version.manifest",
    "version" : "1.0.0",
    "groupVersions" : {
        "1" : "1.0.1",
        "2" : "1.0.2"
    },
    "engineVersion" : "3.0 rc0",
    "assets" : {
        "update1" : {
            "path" : "src/app.zip",
            "md5" : "f6bf54e5a0d42c963cc5ae81bf9dc6c6",
            "compressed" : true,
            "group" : "1"
        },
        "update2" : {
            "path" : "src/config.zip",
            "md5" : "5d59789090e4143166430b2cf7b313ff",
            "compressed" : true,
            "group" : "2"
        }
    },
    "searchPaths" : [
    ]
}

這時在android客戶端測試，已經更新到update1的，只會下載update2的更新，而沒有更新過的，會把update1和update2都下載下來。

相關推薦

cocos2d-js熱更新

1. 熱更新基本思路 得到cocoachina論壇上fysp和akira_cn的幫助，理清了遊戲熱更新的思路： 執行AssetsManager後，搜尋路徑增加了jsb.fileUtils.getWritablePath()目錄，並且是優先搜尋；需要熱更新js不放在pro

Cocos2d-Js熱更新（最完整版本，包括自己做的過程中遇到的坑都在裡面）

最近主要進行遊戲指令碼化相關工作，指令碼化的目的就是為了熱更新，所以就寫個demo研究下熱更新。 cocos版本： 3.12 1、基本思路 cocos的熱更新主要採用其自帶的AssetsManager，執行AssetsManager後，搜尋路

Node.Js的熱更新服務——supervisor

pack 很多 bpa sta 管理 ebp node 包管理器 既然 因為目前項目每次修改文件要看效果，必須重啟服務：node app.js再進入瀏覽器看效果，很是麻煩。所幸的是有很多第三方的管理工具（supervisor，hotnode，forever，pm2等），當文

Unity 伺服器踩坑 Node.js 與 Express 資源熱更新與檔案傳輸（三）

一、下載安裝Node.js 安裝，傻瓜式點選教程 二、安裝Express 開啟cmd一步一步cd進入C:\Program Files\nodejs\node_modules\npm資料夾下 然後執行npm install --sav

Cocos2d-x 3.2版本以上LUA指令碼熱更新（動態更新）解決方案

 部落格地址：http://blog.csdn.net/qq446569365 能夠進行熱更新，是Lua指令碼的最大優勢，通過熱更新能夠解決諸多問題。例如App Store的稽核，不用每次都提交版本，等待稽核了，直接通過熱更新更新遊戲邏輯和素材即可。只有在進行大版本更

使用CodePush熱更新ReactNative JS程式碼

糾結了半天，不知要不要用ReactNative來開發新專案， 例如本地儲存，例如webView 裡面js 與native 的互動，例如地圖，糾結。。。 通過檢視文件，一一得到答案，還是很想用ReactNative做這個專案。 最吸引我的就是傳說中的熱更新。但是，，具

cocos2d-x lua熱更新問題，過載reload

1、什麼是熱更新？ 熱更新也叫不停機更新，是在遊戲伺服器執行期間對遊戲進行更新。實現不停機修正bug、修改遊戲資料等操作。也可以這樣講：一輛車以時速150km跑著，突然爆胎了，然後司機告訴你，我不停車，你去把輪胎換了，小心點。恩 2、熱更新原理 第一種： lua中

COCOS2D - JS 之JSON 解析

ack 構建 padding ott esp for ++ style blog list 類型的json數據 var source = ["10004","1234","4","3","1.5","0.5"] var res= JSON.parse(so

webpack-dev-middleware 和 webpack-hot-middleware 實現express全棧熱更新。

express 自動刷新 你在 fig evm inf targe target ddl 場景： node server.js 啟動後端服務器。 npm run dev 啟動前端服務器。 當你需要node的express框架和webpack結合的時候，就會用到題上的

Unity熱更新技術整理

nil 支持 -s 運行 ram 創建 color 腳本語言 更改 一、熱更新學習介紹 1、什麽是熱更新 舉例來說： 遊戲上線後，玩家下載第一個版本（70M左右或者更大），在運營的過程中，如果需要更換UI顯示，或者修改遊戲的邏輯，這個時候，如果不使用熱更新，就需要重新打

搭建Cocos2d-JS開發環境

ont 新建 order -m amp 推出 android text 實戰 使用Cocos2d-JS引擎開發遊戲。基本的程序代碼是JavaScript語言，因此，凡是能夠開發JavaScript語言工具都適用於Cocos2d-JS遊戲開發。本書我們推薦WebStorm和

webstrom的熱更新沒效果

data img alt http fmt use bsp 分享 rom webstorm保存的時候會先保存到臨時文件中，其實並沒有真正保存，要在setting->stystem settings下的“use save write”去掉 webstrom的熱更

蘋果下架4萬App就只是因為“熱更新”

方式 音樂 新功能 遠程服務 ring 打開 java、 蘋果公司 其他 前去除軟件熱更新功能，不然有可能下架後，昨日（6 月 22 日），有媒體報道，一周內蘋果 App Store 下架了近 4萬款中國 App 。一種流行觀點認為，蘋果不是說著玩，而是真對熱更新動刀子了。

cocos2d JS 函數類型相互轉換(字符串、整形、浮點形、布爾值)

賦值 defined 基數 bject 布爾 ring 浮點型 謝謝 val 工作忙好些天了，近段時間抽點空分享一下自己學習JS的一點筆記心得做點記錄，大神勿噴，謝謝！ p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0

cocos2d JS 本地緩存存儲登陸記住賬號密碼->相當於C++中的UserDefault

work 定義 cal func png 移除 com 判斷 方式 在cocos-js 3.0以上的版本中，當我們用到本地存儲的時候，發現以前用到的UserDefault在JS中並沒有導出，而是換成了LocalStorage。 在LocalStorage.h文件中我

Unity編程筆錄--ulua+PureMVC框架簡單熱更新使用

ons data- 全部 lds center lin 腳本 mar 視圖 ulua+PureMVC框架簡單熱更新使用 前言： 1：作者官網論壇 首先介紹的是這個框架是一位大牛 駿擎【CP】 jarjin 寫的，據說原本是“非常多人不知道怎

ionic 熱更新 cordova-hot-code-push

ima auto width 自動 平臺 不同 2.3 轉載 加載 cordova-hot-code-push ,Cordova熱代碼推送插件提供了在應用程序中執行基於Web的內容的自動更新的功能。使用此插件可以更新存儲在項目的www文件夾中的所有內容。 cordova-h

webpack熱更新問題和antd design字體圖標庫擴展

成功 其他 一加 是你 sign 你在 一個 兩個 pri 附一張上周末參加jsconf的照片。。。。。 標題也不知道怎麽寫好，真是尷尬。不過話說回來，距離上一次寫文快兩個月了，最近有點忙，一直在開發新項目， 今天剛剛閑下來，項目準備提測。借這個功夫寫點東西，把新項目上學到

使用IntelliJ IDEA過程中webpack無法熱更新

更換 福音 avi 更新 方式 pear ear pack onf 最近發現一個問題，就是在使用IntelliJ 的過程中發現webpack的熱更新失效，也在網上找過很多的修改webpack.config.js配置文件的方法，但是都沒有生效，看著同事們一個一個在愉（tong

html5 cocos2d js Access-Control-Allow-Origin

hive blank 跨域問題 增加 company ive cat arch 跳轉 1.No ‘Access-Control-Allow-Origin‘ header is present on the requested近期在接html5的渠道，遇到了跨域的問題，使