2.4　开发环境的搭建

“工欲善其事，必先利其器”，在开发Cocos2d-JS游戏之前需要先搭建开发环境，除了使用引擎中的工具来搭建Cocos环境外，还需要开发IDE环境，在这里推荐使用WebStorm进行开发，而调试运行的浏览器推荐使用Chrome。

2.4.1　安装Python

在Mac OSX的环境中系统会自带Python，在Windows的环境中开发需要读者自行安装Python，如果Mac系统中没有Python，也可以在官网下载。Python的官方下载地址为“https://www.python.org/downloads/index.html”。在下载时请选择Python的2.7.x版本，Python 3和Python 2.7有着较大的差别，可能出现一些奇特问题。

下载完成后，运行下载好的安装包，Mac版本的是pkg, Windows版本的是msi，单击“安装”按钮，按照提示执行即可。

Mac在安装pkg后即完成，而Windows环境还需要用户配置一下环境变量，以便在任意位置都能运行Python命令，配置过程如下。

（1）右击“我的电脑”，选择“属性”命令。

（2）选择“高级系统选项”。

（3）单击“环境变量”。

（4）在系统变量中找到path，双击打开编辑。

（5）在变量值最后加上Python的安装目录（要在前面的值结束后加上分号隔开）。

（6）单击“确定”按钮。

安装完成后，为了验证环境是否安装成功，可以在命令行的模式下运行python－－version来查看Python的版本，如果能成功看到Python的版本，或者直接输入运行Python命令进入到python命令行模式，即代表安装成功，如图2-6所示。

2.4.2　Cocos Console

细心的读者可能会发现，在前文介绍的Cocos引擎目录的tools目录下有一个cocos2d-console目录，这是Cocos官方提供的命令行工具，更加方便用户使用。它可以管理Cocos工程，包括创建、运行、编译、调试、打包等。Cocos Console使用Python编写，需要在Python环境下运行setup.py脚本安装，因此上一小节安装Python环境就是为了安装cocos console命令所用的。

使用终端命令行模式进入到Cocos引擎的根目录，运行python setup.py进行安装，在安装过程中可能需要分别输入NDK_ROOT、SDK_ROOT和ANT_ROOT来设置值，除了ANT_ ROOT外，其他的用户都可以设置，也可以直接回车跳过（如果除了开发之外还需要打包安装应用包，最好先设置NDK_ROOT和SDK_ROOT），过程如图2-7所示。

图2-7所示为笔者的安装过程，因为笔者已经配置好了NDK、SDK以及ANT的环境，所以这里直接从环境变量中找到如上环境，如果在引导安装中还没有下载好对应的环境可以先跳过。

安装完成后，可以在命令中行输入cocos命令来查看命令都可以带哪些参数，分别可以做什么事情，第一次运行cocos命令时会有一个是否同意收集数据的确认步骤，如图2-8所示。

2.4.3　安装WebStorm

推荐使用WebStorm来开发Cocos2d-JS程序，从理论上来说，开发JavaScript工程可以有很多IDE或者编辑器的选择，相对来说，WebStorm在代码提示、IDE的便利程度以及开发调试方面都有很多优越性，所以推荐使用WebStorm。如果读者有个人喜好，也可使用自己喜欢的IDE或编辑器。

WebStorm的官方下载地址为“https://www.jetbrains.com/webstorm/download/”，鼓励大家支持正版，购买正版序列号激活。

WebStorm的安装步骤相当简单，按照普通的软件安装过程即可，跟随安装提示一直单击“下一步”按钮，直到安装成功，安装完成后的图标如图2-9所示。

打开安装好的WebStorm，其中内置了亮色和暗色两种主题，笔者个人喜好暗色主题，WebStorm主界面如图2-10所示。

WebStorm主界面可以大致分为6个区域，分别有如下作用。

• 代码编辑区：编写代码的主要区域。
• 项目目录区：项目的目录结构。
• 控制台区：项目的编译、运行或其他内容的输出，也可以自定义内容。如图2-10所示，放置了终端窗口，通过View可以选择需要的窗口。
• 目录层级区：显示当前文件在项目中的层级关系。
• 工具栏区：提供调试、运行、VCS操作等快捷单击按钮。
• 代码文件区域：显示当前打开的代码源文件。

从图2-10中可以大致了解WebStorm的主界面中各个区域的作用，其实WebStorm还有很多实用的使用方式，比如设置快捷键、自定义工作区域等，这里不再赘述，读者可以自行研究。

2.4.4　配置Android环境

如果打算对Cocos2d-JS项目进行Android环境的APK打包，需要配置Android环境，Android环境在上文安装cocos console命令行时提到，需要用户安装NDK以及SDK环境，除此之外还需要安装JDK环境。

Android操作系统是基于Java语言的操作系统，因此需要JDK（Java Development Kit）环境的支持，而SDK（Software Development Kit）是为用户提供的Android环境开发的系统库文件以及一些开发工具，NDK（Native Development Kit）是Android开发C/C++的动态库的开发工具包，它能自动地将.so文件与Java应用一起打包成APK应用包。以上所述工具的下载地址如下。

• Android SDK为“https://developer.android.com/sdk/index.html?hl＝sk”。
• Android NDK为“http://developer.android.com/tools/sdk/sdk/ndk/index.html”。
• JDK为“https://www.oracle.com/downloads/index.html”。

如果需要配置Android开发环境，可以再运行一遍Cocos Console的安装文件setup.py，然后在对应的地方输入以上几个工具（需要下载解压到个人目录中）的目录路径。

2.4.5　Cocos Creator的安装

到目前为止，开发环境基本上搭建完成了，由于当前Cocos的组件化流行，再搭建一个Cocos Creator，以备掌握最新的组件化技术所用，如果需要，也可自行研究Cocos Creator带来的组件化开发。Cocos Creator是Cocos官方提供的开发工具，基于Cocos2d-x，到目前为止，其官方版本到1.4.2。当前官方提供JavaScript API，据说以后会提供Lua API。以下是官方对于Cocos Creator的介绍。

Cocos Creator是以内容创作为核心的游戏开发工具，在Cocos2d-x基础上实现了彻底脚本化、组件化和数据驱动等特点。

Cocos Creator基于开源框架Cocos2d-x，实现了一体化、可扩展、可自定义工作流的编辑器，并在Cocos系列产品中第一次引入了组件化编程思想和数据驱动的架构设计，这极大地简化了Cocos2d-x开发工作流中的场景编辑、UI设计、资源管理、游戏调试和预览、多平台发布等工作，是使用Cocos2d-x进行团队协作开发的最佳选择。

本书所有内容均基于Cocos2d-JS引擎进行开发，因为Cocos Creator的实用性及其划时代的意义，所以本节将介绍Cocos Creator的下载与安装。

Cocos Creator的官方下载地址为“http://www.cocos.com/creator”。

选择Mac或Windows版本进行下载，Mac为dmg安装包，Windows为exe安装包，安装过程也十分容易，按照安装提示一直单击“下一步”按钮，直到安装成功。Cocos Creator的图标如图2-11所示。

安装完成后首次打开，需要登录Cocos账号（如果没有账号，可以到Cocos的官网进行注册），如图2-12所示。

如图2-13所示，打开Cocos Creator之后会看到Dashboard界面，包含“最近打开项目”“新建项目”和“打开其他项目”，选择“新建项目”，可以看到Cocos Creator提供了一些Demo供参考。

双击“新建项目”之后可以看到如图2-14所示的Cocos Creator主界面，主界面分为几个区域，其作用分别如下。

• 场景编辑器：编辑游戏场景内容。
• 控件库：提供游戏内的控件。
• 属性检查器：控件的属性编辑。
• 工具区：提供调试、运行等快速按钮。
• 控制台/动画编辑器：调试内容输出和动画编辑器。
• 资源管理器：对项目资源的管理，双击可以直接打开，也可以直接拖曳到场景中。
• 层级管理器：编辑场景中的层级关系。
• 编辑工具栏：编辑场景中控件的部分属性。