我們下載的是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這個文件.

Hello Cocos2d-JS

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");

};

簡單來拆分下:

引入引擎js

需要一個id為gameCanvas tag為canvas的標簽，為渲染使用。

主角代碼為：

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");

};

我們可以看到標準的框架:

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显示html,cocos2dx-js 初探 整体流程helloworld.html分析(示例代码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。