Cocos2d-js学习--helloword

一、引擎包目录结构介绍





目录结构可以分为3个部分来介绍：

第一部分:引擎相关文件

frameworks目录包含了Cocos2d-html5引擎和Cocos2d-xJavaScript代码的汇集.

Cocos2d-html5目录包含了所有Cocos2d-html5的引擎模块,例如引擎核心模块、音频模块、外部物理引擎库，CocosBuilderReader,CocoStudioReader和其他的模块。所有的模块都用JS实现并且可以在WEB环境中运行。

js-bindings目录包含了Cocos2d-x引擎,绑定的和外部预置SpiderMonkey库的项目文件。外部接口采用JS编写,但是基础模块使用Cpp实现，可以在许多不同的本地平台上运行，例如iOS,Android,Mac,Win32等平台。

第二部分:测试文件，游戏样本和模板

template目录是被用来创建一个新的Cocos2d-JS工程。它包括了HTML5工程和默认的本地工程。cocos控制台使用它来创建一个新的工程。

samples包含全部的测试工程和一个示例游戏，他们都可以从cocos控制台执行，也可以通过javascript的接口绑定机制在WEB或者本地平台运行。

js-tests全部的测试工程，简单的说，就是一本活字典。

js-moonwarriors一个可以运行的游戏样本。麻雀虽小，五脏俱全，强烈推荐初学者自己去重构一下这个游戏。

第三部分:其他

AUTHORS引擎相关作者介绍。官方的人将低调做到极致，所以，这个文件木有介绍。被我发现了。囧…

README包含一些对Cocos2d-JS的介绍。

LICENSE正如我们之前提到的，Cocos2d-JS的许可证是MIT,你可以查阅在引擎根目录下的thelicense文件夹来获得更多关于Cocos2d-html5andCocos2d-x的许可证细节。

tools目录包括cocos控制台工具和绑定生成工具（bingings-generator）。template文件夹下包含一个build.xml文件，里面存放着闭包编译器的控制信息，通过ANT这个命令,你可以将你的游戏打包成为一个单个文件。

build目录包含着内置的工程样本文件。

docs目录包含JavaScript编码风格指导和release的信息。

CHANGELOG包含所有版本的修改信息。

setup.py是一个环境搭建的python脚本。

1 2 3 4

for (vari=0;i<32;i++){ cc. log (“强烈建议：”); cc. log (“在群里面，很经常看到同学们问的问题实际上在Tests里面都有。所以，一定要去认认真真的看一下这个项目里面都有什么功能实例”); }

二、HelloWord操作

1.这个时候，我们对Cocos2d-JS以及她的目录结构是比较清晰的认识了，并且，我们也在上一个教程中学会了开发环境的搭建。那么，接下来，我们就开始创建基于Cocos2d-JS的HelloWord。走起。。。。

2.Cocos

3.创建工程

首先，你需要打开你的终端工具(Windows系统打开Dos系统)，运行下列命令(自选一种)

1 2 3 4 5 6

//创建一个同时包含Cocos2d-html5和Cocos2d-xJSB的项目 cocos new -ljs //创建一个仅包含Cocos2d-html5的项目,--no-native表示不需要支持Native平台(IOS,Android,Mac,Windows等)，只支持浏览器就可以了。 cocos new -ljs--no-native //创建一个置顶工程名字指定目标的项目 cocos new projectName-ljs-d./Projects

例如，我想在桌面创建一个叫HelloWord的项目。那么有两种做法。

第一种：

1 2	cd./Desktop cocos new HelloWord–ljs

第二种：

1	cocos new HelloWord-ljs-d./Desktop

4.运行项目

浏览器上：

1 2	cd./Desktop/HelloWord cocosrun-pweb

编译并运行Cocos2d-xJSB项目在iOS，android，mac上(即：native平台上)

1 2 3

cd./Desktop/HelloWord cocoscompile-pios|android|mac cocosrun-pios|android|mac

例如：我要运行在IOS上，那就运行：cocosrun-pios。编译好之后，对应的工程目录在HelloWord/frameworks/runtime-src/

Android项目导入Eclipse：

导入HelloWord/frameworks/runtime-src/proj.android到Eclipse,这个时候，Eclipse会报错，完成下面一步就好了。

导入HelloWord/frameworks/js-bindings/cocos2d-x/cocos/platform/android/java到Eclipse中即可

打包项目：()

1 2	cd./Desktop/HelloWord cocoscompile–pweb|android|IOS–mrelease

命令运行成功之后，在HelloWord工程文件夹下多出了一个publish文件夹，这个就是发布包。

例如我想把HelloWord跑在微信上，那三个步骤搞定：

1 2	cd./Desktop/HelloWord cocoscompile–pweb–mrelease

拷贝HelloWord/publish/html5到你的服务器下，然后微信浏览器访问这个地址，就搞定了。PC浏览器也是一样一样滴。



三、HelloWord分析

先上图：



1.上面的张图，就是我们的HelloWord项目。蓝色高亮的是我们开发中最经常接触的文件，我们来一个一个的解释下他们的作用：

frameworks中包含了两个引擎模块，还有一个包含各个平台上的工程文件夹runtime-src，你只需要进入到这个文件夹看一下就能明白他的功能了。

res目录.它包含了工程中所有被需要的资源文件。现在它仅仅包含一些图片样本。但是如果你想要增加一些游戏的元素或者一些极好的游戏音乐，你应该将它们放在这个文件夹下并给为每个文件取一个合适的名字。

src文件夹.它包含你真实游戏的所有逻辑代码。如果这里有成千上百个javascript源文件，你最好将它们用子文件夹分成许多小部分。现在，我们的HelloWord工程拥有2个javascript源文件。app.js包含我们模板的第一个场景代码。在resource.js定义了许多资源的全局变量。

index.html文件是HTML5基于web应用程序的入口点。它是一种HTML5兼容的格式。它定义了许多元数据，例如设置视角和全屏参数等。

project.json文件是我们工程的配置文件。请参考网站project.json获得更多详情。

main.js是一个创建你的第一个游戏场景和在浏览器显示这个场景的一个文件。在这个文件里，你也可以定义你的分辨率策略和预加载你的资源。

2.运行流程

浏览器上：

我们都知道，在浏览器上，首先会运行index.html文件，在这个文件中，我们可以看到下图：



可以看到，首先，浏览器会装载frameworks/Cocos2d-html5/CCBoot.js,它将会尝试从project.json文件中装载工程的设置信息。然后才继续装载main.js。我们来看下project.json，如下图：



project_type：工程类型

debugMode：debug模式

showFPS：是否显示FPS,就是左下角的那三行数据，第一个是渲染的调用次数，第二个是每帧的时间开销，第三个是帧率

frameRate：帧率

id：

renderMode：渲染模式。

engineDir：引擎路径

modules:加载模块，默认只加载["cocos2d"]，那比如你想用chipmunk物理引擎,就需要再加载external模块。也就是modules:["cocos2d","external"]，最后项目打包的时候，只打包有加载进来的模块，所以，没用到的不要加载进来哈。

jsList：自定义JS源文件的一个集合，类似Java、OC中的#import或者C、C++中的#include。

Native上：

在Native平台上就简单啦。看下HelloWord/frameworks/runtime-src/Classes/AppDelegate.cpp中的applicationDidFinishLaunching()方法就知道啦。