[JavaScript]Cocos2d-x html5 試用 (二) 模板建置

Cocos2d-html5 環境設置

首先下載底下的檔案
https://github.com/locke12456/Cocos2dTemplate

打開下載下來的文件後，我們會發現，在『index.html』裡面只有宣告一個『cocos2d.js』的'script' TAG。
『cocos2d.js』裡，
這裡頭的重點就是『cc.loadjs』的函式，他包含了『Preloader』，代替'script'這個TAG。
使用方法我就不贅述了，這個文件裡頭到處都有它的存在，直接看程式碼：

cc.loadjs = function (filename) {
    //add the file to the que
    var script = cc.$new('script');
    script.src = cc.Dir + filename;
    script.order = cc.loadQue.length;
    cc.loadQue.push(script);


    script.onload = function () {
        //file have finished loading,
        //if there is more file to load, we should put the next file on the head
        if (this.order + 1 < cc.loadQue.length) {
            cc.$('head').appendChild(cc.loadQue[this.order + 1]);
            //console.log(this.order);
        }
        else {
            cc.setup("gameCanvas");//選取『index.html』裡的『canvas』TAG的 id，可自行修改
            //we are ready to run the game
            cc.Loader.shareLoader().onloading = function () {
                cc.LoaderScene.shareLoaderScene().draw();//Preloader進度條
            };
            cc.Loader.shareLoader().onload = function () {
                cc.AppController.shareAppController().didFinishLaunchingWithOptions();
            };
            //preload ressources
            cc.Loader.shareLoader().preload([

                {type:"image", src:"Image/HelloWorld.png"}//遊戲資源文件
            ]);
        }
    };
    if (script.order === 0)//if the first file to load, then we put it on the head
    {
        cc.$('head').appendChild(script);
    }
};

我們看到函式裡，有一個onload的狀態偵聽，主要功能在判斷js文件是否全部都已經加載完畢。
加載完畢後，初始化『Canvas』，並開始加載遊戲資源文件，
完成後，運行『cc.AppController.shareAppController().didFinishLaunchingWithOptions()』。
運行這個函式後遊戲就會開始初始化。
其構造相當於『C#』的『Program.cs』，有興趣的人可以開啟一個C#專案看看，其實就是應用程式及視窗的初始化。
而這裡用於遊戲程式的初始化。

接下來，看文件最後兩行

cc.loadjs('Main.js');
cc.loadjs('Classes/AppDelegate.js');

會發現預載了『AppDelegate.js』這個文件。
有開發過IOS APP的人應該對這文件名稱不陌生，他同樣是負責程式的生命週期，文件加載完畢後即會運行這個程式。
我們會修改到的地方如下

applicationDidFinishLaunching:function () {
        // initialize director
        var director = cc.Director.sharedDirector();

        // enable High Resource Mode(2x, such as iphone4) and maintains low resource on other devices.
        //     director->enableRetinaDisplay(true);

        // turn on display FPS
        director.setDisplayStats(true);

        //cc.SPRITE_DEBUG_DRAW = 1;

        // director->setDeviceOrientation(CCDEVICE_ORIENTATION_LANDSCAPE_LEFT);

        // set FPS. the default value is 1.0/60 if you don't call this
        director.setAnimationInterval(1.0 / 60);

        // create a scene. it's an autorelease object
        var scene = new Main.scene();

        // run
        director.runWithScene(scene);

        return true;
    },

會修改到的部分大改只有『director.setDisplayStats(true)』、『director.setAnimationInterval(1.0 / 60)』和『var scene = new Main.scene()』。
『director.setDisplayStats』這裡是設定是否顯示FPS，方便Debug用。
『director.setAnimationInterval(1.0 / 60)』這裡是設定Framerate，但是不知道為什麼設定了依然不會改變，所以暫時略過。
『var scene = new Main.scene()』這段就是我們先前寫的『Hallo World』了，名稱沒限制一定要是『Main』，所以自行修改吧。

最後就是『Main.js』這個文件了。
需要注意的地方，如下：

Main.scene = function () {
    // 'scene' is an autorelease object
    var scene = cc.Scene.create();
    // 'layer' is an autorelease object
    var layer = Main.node();
    scene.addChild(layer);
    return scene;
};

// implement the "static node()" method manually
Main.node = function () {
    var pRet = new Main();

    // Init the Main display layer.
    if (pRet && pRet.init()) {
        main = pRet;
        return pRet;
    }

    return null;
};

這段程式碼，用於整個遊戲程式的初始化，所以除了Class名稱可以自由修改外，其他如無特別的需要，可不必修改。

至此『cocos2d-html5』的模板就建置完成了。
程式流程圖如下

'index.html' → 'cocos2d.js'                         →　  'AppDelegate.js'        →    'Main.js'
                    ↓(cc.loadjs) part 1 程式加載                ↓(初始化Main.js)          ↓(遊戲執行)
                '引擎相關Class'                                 next step                 end
                'Main.js'
                'AppDelegate.js'　
                    ↓(cc.loadjs) part 2 影音加載
                'cc.Loader.shareLoader().preload'
                    ↓(cc.loadjs) part 3 初始化
                    next step