cocos2dx显示html,cocos2dx-js 初探 整体流程helloworld.html分析(示例代码)
我們下載的是cocos2dx-js的精簡版本，主要是為了分析簡單明了，能更清楚的看到架構(gòu)流程。
下載地址:
http://cocos2d-x.org/filecenter/jsbuilder/
下載輕量版。
百牛信息技術(shù)bainiu.ltd整理發(fā)布于博客園
----------------------
服務(wù)器模擬使用xampp軟件。
調(diào)試使用360瀏覽器自帶調(diào)試。
開發(fā)環(huán)境當(dāng)前沒找到一個好的，暫時使用notepad++編輯，如有好的，請告知。
-----------------
一般學(xué)習(xí)一個引擎的思路便是閱讀引擎自帶的demo源碼，熟悉架構(gòu)以及模塊。關(guān)于demo，我們下載完整版本，在cocos2d-js-v3.1\samples\js-tests\src 這個路徑下。
關(guān)于api查詢，可在官網(wǎng)找到，具體為http://www.cocos2d-x.org/wiki/Reference。
------------
下面我們來分析demo，熟悉下流程。
我們來看的是
HelloWorld.html這個文件.
Hello Cocos2d-JSwindow.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");
};
簡單來拆分下:
引入引擎js
需要一個id為gameCanvas tag為canvas的標(biāo)簽，為渲染使用。
主角代碼為：
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");
};
我們可以看到標(biāo)準(zhǔn)的框架:
window.onload = function(){
};
代碼寫在這里，當(dāng)環(huán)境加載完畢觸發(fā)。
cc.game.onStart
給這個賦值。
cc.game.run("gameCanvas");
這個真正開始引擎。
cc.LoaderScene.preload 為加載前面列出來的數(shù)組資源，加載完畢后進入第二個函數(shù)。
加載完畢，創(chuàng)建了一個Scene ，這個為場景。
cc.director.runScene(new MyScene());
這個為將場景加載進入導(dǎo)演里面，此時才會去繪制，顯示，以及響應(yīng)。
我們來看下var MyScene里面的元素，在onEnter里面添加了一些元素，比如sprite label 使用addChild 將其加載進入scene里面，最終呈現(xiàn)出來。
流程整理為：
Window.onload 里面配置cc.game.onStart 為自己加載的第一個界面。
使用 cc.game.run("gameCanvas");進行引擎啟動。
下面我們來看下引擎里面的cc.game.run函數(shù)的實現(xiàn):
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;
});
}
關(guān)鍵代碼：在
if (cc._supportRender) 里面，這個默認肯定是要支持渲染的。
cc._setup()設(shè)置默認參數(shù)，一些全局對象創(chuàng)建。
_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;
}
關(guān)鍵函數(shù)requestAnimFrame 執(zhí)行刷新頻率， director.mainLoop(); 一直執(zhí)行，推動游戲執(zhí)行。
調(diào)用配置的onstart 函數(shù)執(zhí)行真正代碼。
self.onStart();
總結(jié)
以上是生活随笔為你收集整理的cocos2dx显示html,cocos2dx-js 初探 整体流程helloworld.html分析(示例代码)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bios设置引起linux卡界面,根据显
- 下一篇： python实现简单的神经网络,pyth