Cocos2d-js学习--helloword

一、引擎包目录结构介绍

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

第一部分: 引擎相关文件

frameworks 目录包含了 Cocos2d-html5 引擎和 Cocos2d-x JavaScript 代码的汇集.
Cocos2d-html5 目录包含了所有 Cocos2d-html5 的引擎模块,例如引擎核心模块、音频模块、外部物理引擎库，CocosBuilder Reader, CocoStudio Reader 和其他的模块。所有的模块都用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,你可以查阅在引擎根目录下的 the license 文件夹来获得更多关于 Cocos2d-html5 and Cocos2d-x 的许可证细节。
tools 目录包括 cocos 控制台工具和绑定生成工具（bingings-generator）。template 文件夹下包含一个 build.xml 文件，里面存放着闭包编译器的控制信息，通过 ANT 这个命令,你可以将你的游戏打包成为一个单个文件。
build 目录包含着内置的工程样本文件。
docs 目录包含 JavaScript 编码风格指导和 release 的信息。
CHANGELOG 包含所有版本的修改信息。
setup.py 是一个环境搭建的 python 脚本。

1

2

3

4

for(var i = 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-x JSB的项目

cocos new -l js           

//创建一个仅包含Cocos2d-html5的项目, --no-native 表示不需要支持Native平台(IOS,Android,Mac,Windows等)，只支持浏览器就可以了。

cocos new -l js --no-native  

//创建一个置顶工程名字指定目标的项目

cocos new projectName -l js -d ./Projects

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

第一种：

1 2	`cd ./Desktop` `cocos` `new` `HelloWord –l js`

第二种：

1	`cocos` `new` `HelloWord -l js -d ./Desktop`

4. 运行项目

浏览器上：

1 2	`cd ./Desktop/HelloWord` `cocos run -p web`

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

1

2

3

cd ./Desktop/HelloWord

cocos compile -p ios|android|mac

cocos run -p ios|android|mac

例如：我要运行在IOS上，那就运行：cocos run -p ios。编译好之后，对应的工程目录在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` `cocos compile –p web\| android\|IOS –m release`

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

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

1 2	`cd ./Desktop/HelloWord` `cocos compile –p web –m release`

拷贝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()方法就知道啦。