Cocos2d-JS连载之认识Cocos2d-JS和环境搭建及demo演示

由于工作需要，近期将记录Cocos2d-JS的学习实战，Spring源码还是会继续。进入cocos2d-JS的学习，对于不会客户端开发（Android,IOS）,会JS的程序员来说Cocos2d-JS游戏引擎的出现真是福音，它是个跨全平台的游戏引擎。其中有两个概念：

• Cocos2d-HTML5
• Cocos2d-x JavaScript Bindings（JSB）

其中这两者提供的js的api是一致的，Cocos2d-html5是Cocos2d-JS的一个重要模块，是一个面向Web的游戏引擎，采用Canvas或者WebGL渲染，并完全兼容HTML5规范，如果您只关注于纯Web游戏开发，那么您还可以选择Cocos2d-JS Lite的版本。 Cocos2d-x JavaScript Bindings（JSB）版是C++实现。可以把 Cocos2d-x JavaScript Bindings（JSB）理解成一个和C++的桥。就像JVM是C++写的一样，对外提供的是JAVA的接口。Cocos2d-JS是二者的融合。这是Cocos官网和cocos2d-js github的地址。那么到底什么区别的呢？我理解的就是只在web运行的话Cocos2d-html5足矣，但是你要打包成app（Android和IOS还有WIN）的话然后只用js语言开发那么需要的是Cocos2d-JS，其中包含了 Cocos2d-x JavaScript Bindings（JSB）。看一下官网的图片

官网对于现在框架的图解

看一下 Cocos2d-JS下载下来的引擎包的目录。我下载的是github上的master分支。
看一下

cocos2d-js-master

• 其中framwork就是 Cocos2d-HTML5和js-bindings两者。

framwork目录

• docs是文档，都是MarkDown格式的 即.md结尾的。
• samples是官方提供的例子 对以后的学习非常重要

samples/js-tests

• templates是官方提供的模板，在cocos命令创建项目的时候会直接把templates的东西copy过去 作为你的新建项目。
• tools目录就是打包成app的时候需要到工具集。其中还有consle 就是cocos的终端控制台，运行一些cocos命令。
• 最下面setup.py的文件是我们安装cocos时需要用到的文件。

下面看一下开发环境的搭建，我的是windows版的。

• 安装Python环境官方是指定2.7版本的Python 下载地址
• 配置Python的环境变量 path中加入即可（exe安装文件不需要设置手动设置环境变量）

Python环境变量设置

cmd运行

Python命令尝试

然后进入cmd中进入下载下来的cocos2d-js-master的目录运行python setup.py文件。

cmd运行python的安装文件 setup.py

其中有几个工具的地址需要设置

• ANT
• NDK
• SDK
  我的都是在D盘目录下 看上面的截图，其中ANT的目录要精确到bin目录。

我的开发工具用的是sublime text3，好多人用的是webstorm 。这个自己选择，官方还提供了IDE，目前最新的是个Creator（下章讲解,官网已经找不到IDE下载地址），这东西我还不会使用，慢慢摸索吧。
下面创建个cocos工程。

cocos new helloworld -l js -d ./
helloworld是项目的名字，-l是语言设置（js,lua,c++），-d是目录设置 我的是当前目录

如果不知道命令怎么使用可以运行 cocos -h 列出可以选择的命令 ，然后在cocos [命令] -h 例如

命令详解的获取方式

helloworld项目创建命令

创建好项目以后我们可以将将创建好的项目放到nginx下面，也可以在nginx下面配置alais目录

Paste_Image.png

然后启动nginx就可以访问了 http://127.0.0.1/cocos/helloworld/

helloworld项目访问效果

由于我们配置了android（JAVA环境是前提，我上面没说）的环境，所以我们可以将其打包成android的apk供安装使用
运行命令 比较耗费时间

cocos compile -p android-m release

web版本的打包

cocos compile -p web -m release

运行过程截图，可以看到在编译执行各种.cpp文件

运行过程截图

在编译完成后是需要输入keystory的文件路径的 这个做Android的应该都知道，
最后会在项目目录先生成 runtime文件 里面会包含 android的和html的文件夹，进入后可以看到对应的文件。

publish文件

进入publish 可以看到生成的文件，我的android打包的时候出现问题应该是keystor文件的问题 回头我再看一下。

web的compile文件

进入可以看到compile后的文件已经生成。只需要将html文件夹改名字发布到容器访问就可以了。

compile后我的web文件目录

go go home！