cocos2dx-js 初探 整体流程helloworld.html分析
我们下载的是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> 需要一个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(); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- ruby-on-rails – Rails多个belongs_to用于同一个类
- react转vue——vue2条件渲染、列表渲染、事件处理器实现(4
- Cocos2d-x 3.1.1 移植出现error C1083: 无法打开包括文件:“
- C# – MyClass.MyProperty [东西]
- c# – 如何在PdfSharp中添加文件链接?
- vb.net – 将If运算符的结果赋给System.Nullable类型
- 好用的mongodb客户端mongochef
- c – 使用push_back将向量放入向量>
- postgresql – 在NGINX中使用Postgres Basic Auth将查询结果
- Flex入门(二)HelloWorld