[cocos2dx-JSB篇]使用CCControlButton擴充元件

文章撰寫日期︰2013/08/30 23：20
cocos2dx使用版本︰v 3.0 alpha 0
cocosBuilder使用版本︰v 3.0 alpha 5

一、前言

CCControlButton擴充件在cocos2dx2.1.4版尚未得到完整的JSB Binding支援，
如同前一篇所言，
因此只好忍痛改用cocos2dx-3.0alpha0版。

但是，
卻發現cocosBuilder編譯岀來的HTML5編碼仍然說不支援CCControlButton，
岀現 Cannot call method 'setCallback' of undefined.的錯誤。

筆者記︰
不僅是CCControlButton無法使用(cocos2dx-html5端沒有寫接收CCControlButton的Callback)，連一些基本.width或.height的指令都會無法用。

二、文章開始

百思不得其解，
仔細查看coocsBuilder編譯岀來的boot-html5.js檔才發現這當中大有文章。

以下是boot-html5.js檔編譯岀來的原內文︰

(function () {
    var d = document;
    var c = {
        COCOS2D_DEBUG:2, //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d:false,
        chipmunk:true,
        showFPS:true,
        loadExtension:true,
        frameRate:60,
        tag:'gameCanvas', //the dom element to run cocos2d on
        //engineDir:'../../../../cocos2d/',
        SingleEngineFile:'cocos2d-html5.min.js',
        appFiles:[
          'js/ApiBank.js',
    'js/ChoiceScene2.js',
    'js/CommonUtil.js',
    'js/DoorScene.js',
    'js/HomeScene.js',
    'js/PlayScene.js',
    'js/Questions.js',
    'js/StartScene.js',
    'js/TemplateScene.js',

            'resources-html5.js',
            'boot2-html5.js'
            ]

};
    window.addEventListener('DOMContentLoaded', function () {
        //first load engine file if specified
        var s = d.createElement('script');
        /*********Delete this section if you have packed all files into one*******/
        if (c.SingleEngineFile && !c.engineDir) {
            s.src = c.SingleEngineFile;
        }
        else if (c.engineDir && !c.SingleEngineFile) {
            s.src = c.engineDir + 'platform/jsloader.js';
        }
        else {
            alert('You must specify either the single engine file OR the engine directory in "cocos2d.js"');
        }
        /*********Delete this section if you have packed all files into one*******/

            //s.src = 'Packed_Release_File.js'; //IMPORTANT: Un-comment this line if you have packed all files into one

        d.body.appendChild(s);
        document.ccConfig = c;
        s.id = 'cocos2d-html5';
        //else if single file specified, load singlefile
    });
})();

從這段code可看見，
cocosBuilder怎麼讓JSB Binding岀來的code如何透過cocos2d-html5在HTML5繪圖，
原來是用了以下這個微型化引擎︰

SingleEngineFile:'cocos2d-html5.min.js',

cocosBuilder在編譯成HTML5檔時，
自動寫入了這個很簡易的cocos2d-html接口，
讓我們攢寫的JSB-Binding Code可以和HTML5溝通，
也因為是微型化的版本，
我們需要改用被註解掉的

engineDir:'../../../../cocos2d/',

來獲得完成的cocos2d-html5接口支援。

在gitHub上將完整的coocs2d-html複製下來，
將其下cocos2d資料夾對應到上面

engineDir:'../../../../cocos2d/',

的路徑，
即可獲得完整的cocos2d-html支援，
此時，
CCcontrolButton也將能獲得完全的html5版支援！

三、結論

cocos2d家族需要很大的effort才能搞懂許多事， 有時候不妨耐心去研究， 當搞懂一些事情時， 是很美妙的一件事的。

相關文章︰

compile自己專屬的cocosBuilder！