cocos2dx-js 初探 整體流程helloworld.html分析
我們下載的是cocos2dx-js的精簡版本，主要是為了分析簡單明了，能更清楚的看到架構流程。
下載地址:
http://cocos2d-x.org/filecenter/jsbuilder/
下載輕量版。
百牛信息技術bainiu.ltd整理發布於博客園
----------------------
服務器模擬使用xampp軟件。
調試使用360瀏覽器自帶調試。
開發環境當前沒找到一個好的，暫時使用notepad++編輯，如有好的，請告知。
-----------------
一般學習一個引擎的思路便是閱讀引擎自帶的demo源碼，熟悉架構以及模塊。關於demo，我們下載完整版本，在cocos2d-js-v3.1\samples\js-tests\src 這個路徑下。
關於api查詢，可在官網找到，具體為http://www.cocos2d-x.org/wiki/Reference。
------------
下面我們來分析demo，熟悉下流程。
我們來看的是
HelloWorld.html這個文件.
<!DOCTYPE html>
<html>
<head>
<title>Hello Cocos2d-JS</title>
<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="450"></canvas>
<script type="text/javascript">
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload(["HelloWorld.png"], function () {
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create("HelloWorld.png");
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);
var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run("gameCanvas");
};
</script>
</body>
</html>
簡單來拆分下:
<script type="text/javascript" src="cocos2d-js-v3.1-lite.js" charset="UTF-8"></script>
引入引擎js
<canvas id="gameCanvas" width="800" height="450"></canvas>
需要一個id為gameCanvas tag為canvas的標簽，為渲染使用。
主角代碼為：
<script type="text/javascript">
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload(["HelloWorld.png"], function () {
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var size = cc.director.getWinSize();
var sprite = cc.Sprite.create("HelloWorld.png");
sprite.setPosition(size.width / 2, size.height / 2);
sprite.setScale(0.8);
this.addChild(sprite, 0);
var label = cc.LabelTTF.create("Hello World", "Arial", 40);
label.setPosition(size.width / 2, size.height / 2);
this.addChild(label, 1);
}
});
cc.director.runScene(new MyScene());
}, this);
};
cc.game.run("gameCanvas");
};
</script>
我們可以看到標準的框架:
window.onload = function(){
};
代碼寫在這裏，當環境加載完畢觸發。
cc.game.onStart
給這個賦值。
cc.game.run("gameCanvas");
這個真正開始引擎。
cc.LoaderScene.preload 為加載前面列出來的數組資源，加載完畢後進入第二個函數。
加載完畢，創建了一個Scene ，這個為場景。
cc.director.runScene(new MyScene());
這個為將場景加載進入導演裏面，此時才會去繪制，顯示，以及響應。
我們來看下var MyScene裏面的元素，在onEnter裏面添加了一些元素，比如sprite label 使用addChild 將其加載進入scene裏面，最終呈現出來。
流程整理為：
Window.onload 裏面配置cc.game.onStart 為自己加載的第一個界面。
使用 cc.game.run("gameCanvas");進行引擎啟動。
下面我們來看下引擎裏面的cc.game.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);
},
我們看,這裏為首次進入初始化代碼。
if (!self._prepareCalled) {
self.prepare(function () {
self._prepared = true;
});
}
關鍵代碼：在
if (cc._supportRender) 裏面，這個默認肯定是要支持渲染的。
cc._setup()設置默認參數，一些全局對象創建。
_runMainLoop: function () {
var self = this, callback, config = self.config, CONFIG_KEY = self.CONFIG_KEY,
director = cc.director;
director.setDisplayStats(config[CONFIG_KEY.showFPS]);
callback = function () {
if (!self._paused) {
director.mainLoop();
if(self._intervalId)
window.cancelAnimationFrame(self._intervalId);
self._intervalId = window.requestAnimFrame(callback);
}
};
window.requestAnimFrame(callback);
self._paused = false;
}
關鍵函數requestAnimFrame 執行刷新頻率， director.mainLoop(); 一直執行，推動遊戲執行。
調用配置的onstart 函數執行真正代碼。
self.onStart();
cocos2dx-js 初探 整體流程helloworld.html分析