加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

cocos2dx-js 初探 整体流程helloworld.html分析

发布时间:2020-12-14 19:41:15 所属栏目:百科 来源:网络整理
导读:我们下载的是 cocos2dx-js 的精简版本,主要是为了分析简单明了,能更清楚的看到架构流程。 下载地址 : http://cocos2d-x.org/filecenter/jsbuilder/ 下载轻量版。 ---------------------- 服务器模拟使用xampp软件。 调试使用360浏览器自带调试。 开发环境

我们下载的是cocos2dx-js的精简版本,主要是为了分析简单明了,能更清楚的看到架构流程。

下载地址:

http://cocos2d-x.org/filecenter/jsbuilder/

下载轻量版。

----------------------

服务器模拟使用xampp软件。

调试使用360浏览器自带调试。

开发环境当前没找到一个好的,暂时使用notepad++编辑,如有好的,请告知。

-----------------

一般学习一个引擎的思路便是阅读引擎自带的demo源码,熟悉架构以及模块。关于demo,我们下载完整版本,在cocos2d-js-v3.1samplesjs-testssrc 这个路径下。

关于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>

需要一个idgameCanvastagcanvas的标签,为渲染使用。

主角代码为:

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读