Cocos2d-HTML5入门第三天

http://blog.csdn.net/xizai2012/article/details/40639989

第二天掠过，不要在意细节。

第三天了，目前只搭了个hello world版本，而且换了三个版本，到现在仍旧不知道怎么开发游戏。

在上一篇文章搭建的基础上，分析一下结构。

抛开游戏不说，只谈b/s的b，顺着一开始的入口index.html页面。

眼前一个标准的H5页面

一个html5的新标签canvas，俩个js文件。

打开第一个文件cocos2d/cocos2d-html5/CCBoot.js

2千多行代码，粗略从头读到尾巴，发现里边无非就是定义了一个cc的命名空间，当做全局变量对象，这个cc对象加了很多方法和属性。

代码一开始添加了一些常用的工具方法

比如

[javascript]  view plain copy print ?

1. cc.newElement = function (x) {  
2.     return document.createElement(x);  
3. };  
4.   
5. cc._addEventListener = function (element, type, listener, useCapture) {  
6.     element.addEventListener(type, listener, useCapture);  
7. };  

封装了新建元素结点和捕获事件监听的方法。

顺着下看，cc对象又挂了一个属性：game对象，对象里面挂了一些配置信息对象，从字面量看是一些帧速度，依赖包，引擎路径等配置。

还有一些方法比如说run,应该是游戏开始方法；

有个_initConfig应该是初始化游戏，比如引进依赖脚本，图片等。

最后在2184行有一句cc.game._initConfig();

然后回头看了下_initConfig();方法

原来里面是读取我们主目录下的project.json文件，然后把project.json的信息初始化合并进self.config，有点类似jQuery插件开发的option有木有，比如说,project文件配置的js脚本路径，引擎engineDir路径，模块名字等。并没有我想象那样一开始就加载文件……

ok，目前为止大概了解CCBoot.js的作用了。定义了cc，然后初始化了一些配置信息。

接着看看inde.html引进的第二个文件main.js

[javascript]  view plain copy print ?

1. cc.game.onStart = function(){  
2.     var designSize = cc.size(480, 800);  
3.     var screenSize = cc.view.getFrameSize();  
4.   
5.     if(!cc.sys.isNative && screenSize.height < 800){  
6.         designSize = cc.size(320, 480);  
7.         cc.loader.resPath = "res/Normal";  
8.     }else{  
9.         cc.loader.resPath = "res/HD";  
10.     }  
11.     cc.view.setDesignResolutionSize(designSize.width, designSize.height, cc.ResolutionPolicy.SHOW_ALL);  
12.   
13.     //load resources  
14.     cc.LoaderScene.preload(g_resources, function () {  
15.         cc.director.runScene(new MyScene());  
16.     }, this);  
17. };  
18. cc.game.run();  

看到了熟悉的cc和里面挂在的game，onStart在这里被定义了，再回头看CCBoot.js，在game对象里面被声明缺省为null,然后在run方法有调用到。

[javascript]  view plain copy print ?

1. run: function (id) {  
2.     var self = this;  
3.     var _run = function () {  
4.         if (id) {  
5.             self.config[self.CONFIG_KEY.id] = id;  
6.         }  
7.         if (!self._prepareCalled) {  
8.             self.prepare(function () {  
9.                 self._prepared = true;  
10.             });  
11.         }  
12.         if (cc._supportRender) {  
13.             self._checkPrepare = setInterval(function () {  
14.                 if (self._prepared) {  
15.                     cc._setup(self.config[self.CONFIG_KEY.id]);  
16.                     self._runMainLoop();  
17.                     self._eventHide = self._eventHide || new cc.EventCustom(self.EVENT_HIDE);  
18.                     self._eventHide.setUserData(self);  
19.                     self._eventShow = self._eventShow || new cc.EventCustom(self.EVENT_SHOW);  
20.                     self._eventShow.setUserData(self);  
21.                     self.onStart();  
22.                     clearInterval(self._checkPrepare);  
23.                 }  
24.             }, 10);  
25.         }  
26.     };  
27.     document.body ?  
28.         _run() :  
29.         cc._addEventListener(window, 'load', function () {  
30.             this.removeEventListener('load', arguments.callee, false);  
31.             _run();  
32.         }, false);  
33. },  

回到main.js，看看onstart方法 里面一开始的size方法并且没有在CCBoot.js里面定义，目测是在异步引进cocos2d各个模块下面定义的方法，打开cocos2d 库文件夹下面的模块，发现大部分方法和属性都是挂在cc对象下的。

回到onstart方法，

里面根据不同的窗口加载不同的res资源，在这里我们res目录确实也有对应两种大小的资源图片。

 cc.LoaderScene.preload应该是加载该场景用到的资源文件并且显示场景

最后一行

[javascript]  view plain copy print ?

1. cc.game.run();  

会调用刚刚定义的onstart方法。如果把这行注释掉，刷新index.html,会发现很多脚本都没有加载进来，页面一片漆黑.看来动态加载场景的脚本是cocos2d-hmlt5的一个特点。

今天差不多这样了，共写了两篇文章。

赶今儿白天抽空研究一些游戏特点和API，做好铺垫，争取周末做点什么粗来。

碎觉……