我们下载的是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这个文件.
<!DOCTYPEHTML>
<HTML>
<head>
<Title>HelloCocos2d-Js</Title>
<scripttype="text/JavaScript"src="cocos2d-Js-v3.1-lite.Js"charset="UTF-8"></script>
</head>
<body>
<canvasID="gameCanvas"wIDth="800"height="450"></canvas>
<scripttype="text/JavaScript">
window.onload=function(){
cc.game.onStart=function(){
//loadresources
cc.LoaderScene.preload(["HelloWorld.png"],function(){
varMyScene=cc.Scene.extend({
onEnter:function(){
this._super();
varsize=cc.director.getWinSize();
varsprite=cc.Sprite.create("HelloWorld.png");
sprite.setposition(size.wIDth/2,size.height/2);
sprite.setScale(0.8);
this.addChild(sprite,0);
varlabel=cc.LabelTTF.create("HelloWorld","Arial",40);
label.setposition(size.wIDth/2,size.height/2);
this.addChild(label,1);
}
});
cc.director.runScene(newMyScene());
},this);
};
cc.game.run("gameCanvas");
};
</script>
</body>
</HTML>
简单来拆分下:
<scripttype="text/JavaScript"src="cocos2d-Js-v3.1-lite.Js"charset="UTF-8"></script>
引入引擎Js
<canvasID="gameCanvas"wIDth="800"height="450"></canvas>
需要一个ID为gameCanvastag为canvas的标签，为渲染使用。
主角代码为：
<scripttype="text/JavaScript">
window.onload=function(){
cc.game.onStart=function(){
//loadresources
cc.LoaderScene.preload(["HelloWorld.png"],this);
};
cc.game.run("gameCanvas");
};
</script>
我们可以看到标准的框架:
window.onload=function(){
};
代码写在这里，当环境加载完毕触发。
cc.game.onStart
给这个赋值。
cc.game.run("gameCanvas");
这个真正开始引擎。
cc.LoaderScene.preload为加载前面列出来的数组资源，加载完毕后进入第二个函数。
加载完毕，创建了一个Scene，这个为场景。
cc.director.runScene(newMyScene());
这个为将场景加载进入导演里面，此时才会去绘制，显示，以及响应。
我们来看下varMyScene里面的元素，在onEnter里面添加了一些元素，比如spritelabel使用addChild将其加载进入scene里面，最终呈现出来。
流程整理为：
Window.onload里面配置cc.game.onStart为自己加载的第一个界面。
使用cc.game.run("gameCanvas");进行引擎启动。
下面我们来看下引擎里面的cc.game.run函数的实现:
run:function(ID){
varself=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||newcc.EventCustom(self.EVENT_HIDE);
self._eventHIDe.setUserData(self);
self._eventShow=self._eventShow||newcc.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(){
varself=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分析全部内容，希望文章能够帮你解决cocos2dx-js 初探 整体流程helloworld.html分析所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）