Cocos2d-html5教程之二 |小一

相信看到这篇文章的时候,大家已经看过对应的demo。搭建好自己的server了。

如果还没搞定的同学,请移步到Cocos2d-html5 &box2d (一)

我当初到这个时候会有疑问:

1、他的demo都用了哪些文件?他的demo运行的流程是怎样?

2、我如果做自己的demo需要用到哪些文件?如何去配置?

3、怎么去调试啊,用什么编辑器好啊?

ok,相信我遇到的疑惑,大家应该也会碰到吧,一一解答。

1、他的demo都用了哪些文件?他的demo运行的流程是怎样?

就拿小飞机的例子:文件夹名字:MoonWarriors,结构如下

res 就是REsource  里面都是资源文件。

src就是一些游戏源文件和配置文件。外边还有比较重要的两个文件是:main.js和MoonWarriors-html5.js

主要说下:main.js和MoonWarriors-html5.js

在main.js里面你会找到一行代码:

var myApp = new cocos2dApp(SysMenu.scene);
就是说 游戏的入口是SysMenu.scene这个场景。至于cocos2d-html5 Director、Scene、Node、Layer等等不懂的请移步这篇文章


在MoonWarriors-html5.js里



红色圈到的文件,就是要用到的文件。红色边框上边框遮到的

engineDir:'../../../cocos2d/',
这个就是引用的cocos2d路径。如果改变了 cocos2d的路径,记得同步这个位置。

如果写了另外一些场景或者层等其他js文件,请在appFiles里面照格式添加,要注意添加的顺序,要不然会出现未定义的错误,请看platform下的jsloader.js文件,就会明白加载js要注意的问题。


所以demo用到了 cocos2d的文件,在解压目录下:cocos2d  CocosDenshion extensions。

如果想换cocos2d的路径,请记得要copy 3个文件夹。然后修改MoonWarriors-html5.js里面 cocos2d的路径配置。

demo的运行过程:会先根据MoonWarriors-html5.js加载资源、根据配置去预加载一些图片、字体等等(MoonWarriors-html5.js是在index.html引入的)。然后根据man.js  

var myApp = new cocos2dApp(SysMenu.scene);

这个参数的去显示第一个场景,SysMenu  对应可以到 src里面找到一个 SysMenu.js文件,他返回的是一个普通的Scene场景


2、我如果做自己的demo需要用到哪些文件?如何去配置?

以MoonWarriors游戏为例

用到游戏里面cocos2d 和CocosDenshion (extensions拓展文件非必须)、index.html、main.js、MoonWarriors-html5.js(可以重命名,重命名后要修改index.html的js导入)res(资源文件夹)、src(源代码文件夹)

新建一个文件夹 Lib ,把cocos2d 和CocosDenshion 、extensionscopy到lib目录下。

然后修改main.js的 cocos2d配置路径,

engineDir:'../../../cocos2d/',
修改为:

engineDir:'lib/cocos2d/',
然后res中没用的资源删掉、src可以留一个 js作为模版参考。然后修改 MoonWarriors-html5.js 的加载js文件的配置。

如下图:



OK,然后可以试着去新建一个场景,然后在main.js设置作为入口。

有一些细节问题:就是Resource.js保留着吧,作为一个规范。反正早晚用到,而且main.js会调用 Resource.js中的变量g_ressources去预加载一些图片什么的。

OK,有问题在交流。



3、怎么去调试啊,用什么编辑器好啊?

调试主要也就是js调试,Chrome 、firefox(安装fireBug),按F12 进入调试界面

以下是Chrome的调试界面:



cocos2d-html5调试可以用alter、cc.log打印,都可以提示。或者加断点,右键 Add to view.

还是喜欢cc.log()方法,很好使。

至于用什么编译器,感觉没什么顺手的。VS2012 不给力,而且太庞大了,下载麻烦。

其实像大神们说的,记事本都可以,确实。废话少说,推荐一个编辑器,就几M。

sublime_text 2 传送门:下载

高亮  自动补全  代码提示  格式化 多窗口等等各种无敌功能~ 大家可以试试。

界面如下:


================================

ok  基本讲完了,第二次写这东西,感觉罗哩罗嗦的...

只是希望帮助一些能帮到的人,一起学习  一起探讨  一起进步  


展开阅读全文

没有更多推荐了,返回首页