下载掌阅APP，畅读海量书库
立即打开
使用Cocos2d-JS引擎开发游戏，主要的程序代码是JavaScript语言，因此，凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书推荐WebStorm和Cocos Code IDE工具。
在上一章使用了WebStorm开发工具，它是非常优秀的JavaScript开发工具，WebStorm工具可以开发和调试基于Cocos2d-JS引擎的JavaScript程序代码，但是测试和调试时只能运行在Web浏览器上。
WebStorm安装过程在上一章已经介绍了，但是要想开发基于Cocos2d-JS引擎的JavaScript程序，还需要安装Google Chrome浏览器和JetBrains IDE Support插件。Google Chrome浏览器安装不再介绍，这里重点介绍JetBrains IDE Support插件。
JetBrains IDE Support是安装在Google Chrome浏览器上的插件，它是为了配合WebStorm工具调试使用的。JetBrains IDE Support插件安装过程是在Google Chrome浏览器的网址中输入https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomchmhgeddb内容，安装页面如图3-4所示。该页面中可以单击“已添加至CHROME”按钮安装插件。
图3-4 安装JetBrains IDE Support插件
安装成功后会在浏览器的地址栏后面出现JB图标，具体如何使用在后面章节再介绍。
Cocos Code IDE是Cocos2d-x团队开发的，用于开发Cocos2d-JS和Cocos2d-x Lua绑定的游戏工具，它是基于Eclipse
平台的开发工具，Eclipse基于Java，要想运行Cocos Code IDE工具，需要安装JDK或JRE，JDK是Java开发工具包，JRE是Java运行环境。
1．JDK下载和安装
图3-5所示是JDK 7下载界面，它的下载地址是http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html,其中有很多版本。注意选择对应的操作系统，以及32位还是64位安装的文件。
图3-5 下载JDK
下载完JDK并安装完成后需要设置系统环境变量，主要是设置JAVA_HOME环境变量。打开环境变量设置对话框，如图3-6所示，可以在用户变量（上半部分，只影响当前用户）或系统变量（下半部分，影响所有用户）添加环境变量。一般情况下，在用户变量中设置环境变量。
图3-6 环境变量设置对话框
在用户变量部分单击“新建”按钮，弹出对话框如图3-7所示，设置“变量名”为JAVA_HOME，变量值为“C:＼Program Files＼Java＼jdk1.7.0_21”。注意变量值的路径。
图3-7 设置JAVA_HOME
为了防止安装了多个JDK版本对于环境的影响，还可以在环境变量PATH追加C:＼Program Files＼Java＼jdk1.7.0_21＼bin路径，如图3-8所示，在用户变量中找到PATH。双击打开PATH修改对话框，如图3-9所示，追加C:＼Program Files＼Java＼jdk1.7.0_21＼bin。注意PATH之间用分号分隔。
图3-8 环境变量PATH设置对话框
图3-9 PATH修改对话框
2．Cocos Code IDE下载和安装
Cocos Code IDE下载地址是http://www.cocos2d-x.org/download，在浏览器中页面如图3-10所示。选择合适的文件下载，目前包括Mac OS X版本和Windows版本。注意Windows有32位和64位之分，还有安装（setup）版本和压缩（zip）版本之分。
图3-10 下载Cocos Code IDE
这里下载的是cocos-code-ide-win64-1.0.0-rc1.zip解压版本，解压之后找到Cocos Code IDE.exe文件运行可以启动Cocos Code IDE工具，在启动过程中需要选择Workspace目录，如图3-11所示，Workspace目录是工程的管理目录。选择好之后单击OK按钮，如果该目录不存在，则创建。
图3-11 选择Workspace
Cocos Code IDE具体如何使用在后面章节再介绍。
首先到Cocos2d-JS官方网站下载Cocos2d-JS开发包，目前Cocos2d-JS 3.0最终版已经发布。Cocos2d-JS 3.0下载解压后的目录结构如图3-12所示。
图3-12 Cocos2d-JS开发包内容
如果想要运行官方的案例可以进入到build目录，build目录中的内容如图3-13所示，这里包含各个平台编译和运行案例的工程等文件。其中，cocos2d_jsb_samples.xcodeproj文件是Cocos2d-JS案例的Xcode工程文件，cocos2d_jsb_samples.vc2012.sln文件是Cocos2d-JS案例Win32平台下Visual Studio 2012解决方案文件，android-build.py是在Android平台下编译和运行案例时使用的。
图3-13 Cocos2d-JS开发包build目录内容
如果在Windows下学习和开发，一般运行cocos2d_jsb_samples.vc2012.sln解决方案就可以了。如果启动cocos2d_jsb_samples.vc2012.sln解决方案，则进入如图3-14所示的Visual Studio 2012界面，其中的js-tests工程是Cocos2d-JS官方提供的案例工程。需要选中js-tests工程，在右击弹出的快捷菜单中选择“设置启动项目”命令，然后运行上方工具栏中的运行调试按钮
，运行js-tests工程。
图3-14 Cocos2d-JS案例
首次运行需要编译Cocos2d-JS时间会长一些，运行起来之后会出现一个Windows的窗口［如图3-15（a）所示］，选择其中的一个菜单项可以运行相应的示例［如图3-15（b）所示］。
如果想查看js-tests源代码，不能通过Visual Studio 2012查看，需要到<Cocos2d-JS引擎目录>＼samples＼js-tests＼src目录下，使用文本编辑工具或者WebStorm工具。
事实上，<Cocos2d-JS引擎目录>＼build目录工程文件只是编译Cocos2d-x库并使案例基于JSB方式运行，不能够通过这些工程修改案例中的JavaScript代码。为了能够查看、修改和运行案例中的JavaScript代码，可以在WebStorm工具中配置案例工程，管理案例。具体过程是启动WebStorm，选择File→New Project from Existing Files命令，这样选择是为了从已经存在的文件创建WebStorm工程，弹出如图3-16所示对话框。选择最后一个选项，这个选项的意思是文件在本地，还没有配置Web服务器。
图3-15 运行案例
图3-15 （续）
图3-16 选择配置方案
提示 JavaScript和HTML等Web文件运行，需要部署到一个Web服务器下。
在图3-16所示界面选择好后，单击Next按钮进入设置工程根目录对话框，如图3-17所示，选择<Cocos2d-JS引擎目录>，然后单击Project Root按钮，设置无误后，单击Finish按钮完成设置过程。设置成功界面如图3-18所示。
图3-17 设置工程的根目录
图3-18 设置成功
在导航面板中选择Samples→js-tests→index.html，从右击弹出的快捷菜单中选择Debug “index.html”命令，WebStorm会启动Google Chrome浏览器，如图3-19所示。此时发现在浏览器中已启动js-tests官方案例。
图3-19 启动Google Chrome浏览器
从Cocos2d-JS官方下载的开发包中没有API文档，可以使用Cocos2d-JS官方的在线API文档，可以通过http://www.cocos2d-x.org/wiki/Reference选择Cocos2d-JS Online API Documentation进入在线API文档，如图3-20所示。可以在左边的文本框中输入查询条件，找到感兴趣的内容，如图3-21所示。
图3-20 Cocos2d-JS在线API文档
图3-21 从在线API文档中搜索内容