cocos2dx-js 初探 整体流程helloworld.html分析
我們下載的是cocos2dx-js的精簡版本，主要是為了分析簡單明了，能更清楚的看到架構流程。
下載地址:
http://cocos2d-x.org/filecenter/jsbuilder/
下載輕量版。
?
?----------------------
服務器模擬使用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分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 拆解19年雅诗兰黛双十一25分钟预售破5
- 下一篇： ddr2代内存最大升级到多少_最大支持8