3.2 集成开发工具
使用Cocos2d-x JS API开发游戏，主要的程序代码是采用JavaScript语言，因此凡是能够开发JavaScript语言工具的都适用于Cocos2d-x JS API游戏开发。本书推荐使用WebStorm和Cocos Code IDE工具。
3.2.1 安装WebStorm工具
我们在第2章使用了WebStorm开发工具，它是非常优秀的JavaScript开发工具，WebStorm工具可以开发和调试基于Cocos2d-x JS API的JavaScript程序代码，但是测试和调试时只能运行在Web浏览器上。
WebStorm安装过程在第2章已经介绍了，但是要想开发基于Cocos2d-x JS API的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/hmhgeddbohgjknpmjagkdomcpobmllji内容，安装页面如图3-5所示，在该页面中可以单击“已添加至CHROME”按钮，安装插件。
图3-5 安装JetBrains IDE Support插件
安装成功后会在浏览器的地址栏后面出现“JB”图标，我们在后面的章节再介绍具体如何使用。
3.2.2 安装Cocos Code IDE工具
Cocos Code IDE是Cocos2d-x团队开发的，目前版本是2.0.0Beta，用于开发Cocos2d-x JS API和Cocos2d-x Lua API的开发工具。Cocos Code IDE是基于IntelliJ IDEA平台的，IntelliJ IDEA也是jetbrains公司开发，与WebStorm工具同源，因此需要安装JDK或JRE，JDK是Java开发工具包，JRE是Java运行环境。
1．JDK下载和安装
JDK的版本要求为JDK8以上，图3-6是JDK8的下载界面。它的下载地址是http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html，其中有很多版本，注意选择对应的操作系统，以及32位还是64位安装的文件。
图3-6 下载JDK
下载完成并默认安装完成之后，需要设置系统环境变量，主要是设置JAVA_HOME环境变量。打开环境变量设置对话框（如图3-7所示），可以在用户变量（上半部分，只影响当前用户）或系统变量（下半部分，影响所有用户）添加环境变量，一般情况下在用户变量中设置环境变量。
图3-7 环境变量设置对话框
在用户变量部分单击“新建”按钮，然后弹出对话框，如图3-8所示。变量名为JAVA_HOME，变量值为C:\Program Files\Java\jdk1.8.0_66，注意变量值的路径。
图3-8 设置JAVA_HOME
为了防止安装了多个JDK版本对环境的不利影响，还可以在环境变量Path追加C:\Program Files\Java\jdk1.8.0_66\bin路径，如图3-9所示，在用户变量中找到Path。双击打开Path修改对话框，如图3-10所示，追加C:\Program Files\Java\jdk1.8.0_66\bin，注意Path之间用分号分隔。
图3-9 环境变量PATH设置对话框
图3-10 Path修改对话框
2．Cocos Code IDE完整安装
完整的安装包含IntelliJ IDEA和Cocos Code IDE插件，下载地址：Windows版本下载链接是http://www.cocos2d-x.org/filedown/cocos-code-ide-2.0.0-beta.exe；Mac OS X版本下载链接http://www.cocos2d-x.org/filedown/cocos-code-ide-2.0.0-beta.dmg。这种方式安装比较简单，此处不过多介绍了。
3．Cocos Code IDE插件安装
插件安装就是自己下载Cocos Code IDE插件和IntelliJ IDEA，然后在IntelliJ IDEA中配置Cocos Code IDE插件。IntelliJ IDEA的下载地址是https://www.jetbrains.com/idea/download/，如图3-11所示。我们可以选择Ultimate和Community版本，Ultimate版本是收费的，Community版本是免费的。对于Cocos2d-x JS API开发，Community版本就够用。
提示 目前IntelliJ IDEA是15.0.1版本，在这个版本调试模式下有一些问题，笔者推荐使用14.0版本，这个版本的下载可以通过页面下方的previous versions超链接进入老版本下载页面。
图3-11 IntelliJ IDEA下载页面
Cocos Code IDE插件下载地址是http://www.cocos2d-x.org/filedown/cocos-intellij-plugin-2.0.0-beta.zip，插件没有平台之分，无论是Windows、Mac OS X还是Linux都是通用的。
下载完成之后需要在IntelliJ IDEA中配置插件，启动IntelliJ IDEA后可以看到欢迎界面，如图3-12所示。在欢迎界面中单击Configure→Plugins，弹出图3-13所示的插件安装对话框，单击Install plugin from disk按钮从磁盘中安装插件，安装完成后单击OK按钮关闭对话框。
图3-12 配置Cocos Code IDE插件
图3-13 插件安装对话框
3.2.3 配置Cocos Code IDE工具
Cocos Code IDE工具安装完成后，还需要配置该工具。我们可以在欢迎界面中单击Configure→Settings，或单击菜单File→Settings，弹出图3-14所示的IntelliJ IDEA配置对话框，在Other Settings→Cocos Framework配置Cocos Code IDE插件。有两种模式（Framework Mode和Engine Mode）可以配置插件，如果使用Cocos Framework，可以配置Framework Mode模式，这种模式下运行配置比较简单；如果不使用Cocos Framework而是Cocos开发包，可以选中Engine Mode模式，其中Lua需要Cocos2d-x开发包，JavaScript需要Cocos2d-JS开发包，但是这种Engine Mode模式已经不再适用了，Cocos2d-x 3.7之后Cocos2d-x和Cocos2d-JS合并了，合并之后的目录结构有很大的改变。
图3-14 配置Cocos Code IDE工具
在Framework Mode下还需要配置Simulator（模拟器），我们可以在图3-14所示的界面中的Simulator后面的Browse按钮找到模拟器安装目录，如果安装了Cocos引擎，则在Cocos引擎的安装目录下会有cocos-simulator-bin目录，这就是模拟器安装目录。图3-15所示是笔者根据自己情况设置的模拟器。
图3-15 配置模拟器
注意 使用Cocos引擎提供的Win32模拟器时，程序无法进行日志输出，这是由于这个版本的Win32模拟器工具在编译时是release模式。解决办法是找到Win32模拟器源程序进行debug编译。我们可以在＜ cocos2d-x开发包＞\tools\simulator\frameworks\runtime-src\proj.win32目录找到Win32模拟器程序代码，需要Visual Studio工具打开并进行debug编译。另外，也可以直接使用笔者编译好的模拟器，模拟器可以在本书工具包中找到，工具包下载地址请阅读前言中的说明。
有时候虽然模拟器设好了，但是还会出现无法找到模拟器的现象，我们可以设置重新设置模拟器环境，如图3-16所示，单击工具栏中的HelloJS按钮，在弹出的菜单中选择Edit Configurations，会弹出图3-17所示的对话框，在JSBinding Target Platform→Windows 7/ Windows 8的Simulator path中输入C:\Cocos\cocos-simulator-bin\win32\Simulator.exe，C:\Cocos是笔者的Cocos引擎安装目录，读者要根据自己的情况设置模拟器目录。设置完成之后单击OK按钮就可以了。
图3-16 模拟器不存在
图3-17 设置模拟器