Cocos2d-HTML5入門第三天
來源：程序員人生 發布時間：2014-11-22 08:41:18 閱讀次數：2475次
第2天掠過，不要在乎細節。
第3天了，目前只搭了個hello world版本，而且換了3個版本，到現在仍舊不知道怎樣開發游戲。
在上1篇文章搭建的基礎上，分析1下結構。
拋開游戲不說，只談b/s的b，順著1開始的入口index.html頁面。
眼前1個標準的H5頁面
1個html5的新標簽canvas，倆個js文件。
打開第1個文件cocos2d/cocos2d-html5/CCBoot.js
2千多行代碼，粗略從頭讀到尾巴，發現里邊不過就是定義了1個cc的命名空間，當作全局變量對象，這個cc對象加了很多方法和屬性。
代碼1開始添加了1些經常使用的工具方法
比如
cc.newElement = function (x) {
return document.createElement(x);
};
cc._addEventListener = function (element, type, listener, useCapture) {
element.addEventListener(type, listener, useCapture);
};
封裝了新建元素結點和捕獲事件監聽的方法。
順著下看，cc對象又掛了1個屬性：game對象，對象里面掛了1些配置信息對象，從字面量看是1些幀速度，依賴包，引擎路徑等配置。
還有1些方法比如說run,應當是游戲開始方法；
有個_initConfig應當是初始化游戲，比如引進依賴腳本，圖片等。
最后在2184行有1句cc.game._initConfig();
然后回頭看了下_initConfig();方法
原來里面是讀取我們主目錄下的project.json文件，然后把project.json的信息初始化合并進self.config，有點類似jQuery插件開發的option有木有，比如說,project文件配置的js腳本路徑，引擎engineDir路徑，模塊名字等。并沒有我想象那樣1開始就加載文件……
ok，目前為止大概了解CCBoot.js的作用了。定義了cc，然后初始化了1些配置信息。
接著看看inde.html引進的第2個文件main.js
cc.game.onStart = function(){
var designSize = cc.size(480, 800);
var screenSize = cc.view.getFrameSize();
if(!cc.sys.isNative && screenSize.height < 800){
designSize = cc.size(320, 480);
cc.loader.resPath = "res/Normal";
}else{
cc.loader.resPath = "res/HD";
}
cc.view.setDesignResolutionSize(designSize.width, designSize.height, cc.ResolutionPolicy.SHOW_ALL);
//load resources
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run();
看到了熟習的cc和里面掛在的game，onStart在這里被定義了，再回頭看CCBoot.js，在game對象里面被聲明缺省為null,然后在run方法有調用到。
run: function (id) {
var self = this;
var _run = function () {
if (id) {
self.config[self.CONFIG_KEY.id] = id;
}
if (!self._prepareCalled) {
self.prepare(function () {
self._prepared = true;
});
}
if (cc._supportRender) {
self._checkPrepare = setInterval(function () {
if (self._prepared) {
cc._setup(self.config[self.CONFIG_KEY.id]);
self._runMainLoop();
self._eventHide = self._eventHide || new cc.EventCustom(self.EVENT_HIDE);
self._eventHide.setUserData(self);
self._eventShow = self._eventShow || new cc.EventCustom(self.EVENT_SHOW);
self._eventShow.setUserData(self);
self.onStart();
clearInterval(self._checkPrepare);
}
}, 10);
}
};
document.body ?
_run() :
cc._addEventListener(window, 'load', function () {
this.removeEventListener('load', arguments.callee, false);
_run();
}, false);
},
回到main.js，看看onstart方法 里面1開始的size方法并且沒有在CCBoot.js里面定義，目測是在異步引進cocos2d各個模塊下面定義的方法，打開cocos2d 庫文件夾下面的模塊，發現大部份方法和屬性都是掛在cc對象下的。
回到onstart方法，
里面根據不同的窗口加載不同的res資源，在這里我們res目錄確切也有對應兩種大小的資源圖片。
cc.LoaderScene.preload應當是加載該場景用到的資源文件并且顯示場景
最后1行
cc.game.run();
會調用剛剛定義的onstart方法。如果把這行注釋掉，刷新index.html,會發現很多腳本都沒有加載進來，頁面1片黝黑.看來動態加載場景的腳本是cocos2d-hmlt5的1個特點。
今天差不多這樣了，共寫了兩篇文章。
趕今兒白天抽空研究1些游戲特點和API，做好鋪墊，爭取周末做點甚么粗來。
碎覺……
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
