大佬教程收集整理的这篇文章主要介绍了Cocos2d-HTML5入门第三天,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
第二天掠过,不要在意细节。
第三天了,目前只搭了个Hello world版本,而且换了三个版本,到现在仍旧不知道怎么开发游戏。
在上一篇文章搭建的基础上,分析一下结构。
抛开游戏不说,只谈b/s的b,顺着一开始的入口index.html页面。
眼前一个标准的H5页面
一个html5的新标签canvas,俩个js文件。
2千多行代码,粗略从头读到尾巴,发现里边无非就是定义了一个cc的命名空间,当做全局变量对象,这个cc对象加了很多方法和属性。
代码一开始添加了一些常用的工具方法
比如
cc.newElement = function (X) { return document.createElement(X); }; cc._addEventListener = function (element,type,listener,useCapturE) { element.addEventListener(type,useCapturE); };
顺着下看,cc对象又挂了一个属性:game对象,对象里面挂了一些配置信息对象,从字面量看是一些帧速度,依赖包,引擎路径等配置。
还有一些方法比如说run,应该是游戏开始方法;
有个_initConfig应该是初始化游戏,比如引进依赖脚本,图片等。
最后在2184行有一句cc.game._initConfig();
原来里面是读取我们主目录下的project.json文件,然后把Project.json的信息初始化合并进self.config,有点类似jQuery插件开发的option有木有,比如说,project文件配置的js脚本路径,引擎ENGIneDir路径,模块名字等。并没有我想象那样一开始就加载文件……
ok,目前为止大概了解CCBoot.js的作用了。定义了cc,然后初始化了一些配置信息。
接着看看inde.html引进的第二个文件main.js
cc.game.onStart = function(){ var designSize = cc.size(480,800); var screenSize = cc.view.getFrameSize(); if(!cc.sys.isNative && screenSize.height < 800){ designSize = cc.size(320,480); cc.loader.resPath = "res/Normal"; }else{ cc.loader.resPath = "res/HD"; } cc.view.setDesignResolutionSize(designSize.width,designSize.height,cc.ResolutionPolicy.SHOW_ALL); //load resources cc.LoaderScene.preload(g_resources,function () { cc.director.runScene(new MyScene()); },this); }; cc.game.run();
看到了熟悉的cc和里面挂在的game,onStart在这里被定义了,再回头看CCBoot.js,在game对象里面被声明缺省为null,然后在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); },
回到main.js,看看onstart方法 里面一开始的size方法并且没有在CCBoot.js里面定义,目测是在异步引进cocos2d各个模块下面定义的方法,打开cocos2d 库文件夹下面的模块,发现大部分方法和属性都是挂在cc对象下的。
回到onstart方法,
里面根据不同的窗口加载不同的res资源,在这里我们res目录确实也有对应两种大小的资源图片。
cc.LoaderScene.preload应该是加载该场景用到的资源文件并且显示场景
最后一行
cc.game.run();
会调用刚刚定义的onstart方法。如果把这行注释掉,刷新index.html,会发现很多脚本都没有加载进来,页面一片漆黑.看来动态加载场景的脚本是cocos2d-hmlt5的一个特点。
今天差不多这样了,共写了两篇文章。
赶今儿白天抽空研究一些游戏特点和API,做好铺垫,争取周末做点什么粗来。
碎觉……
以上是大佬教程为你收集整理的Cocos2d-HTML5入门第三天全部内容,希望文章能够帮你解决Cocos2d-HTML5入门第三天所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。