初识Cocos Creator，环境搭建

其实想做游戏很久了，只是一直碍于工作及懒癌^-^，没有动手实施。

最近又升起了做游戏的念头，便想动手实践一下，作为新人，我应该从2D游戏入手，那么首先想到的工具当然是Cocos2dx，其官方推出了新的IDE：Cocos Creator。目前最新的版本是 Cocos Creator 1.5.1。

下面来看看Cocos Creator相关开发环境，由于我是使用windows环境，以下内容默认为win_x64环境。

 

我想做的是原生游戏，所以这里先将编译apk所需的环境搭建好：

1. Cocos2d-x 自带的编译工具 Cocos Console 需要以下运行环境：
   • Python
     • 下载 python-2.7.13 (python-2.7.13.amd64.msi) 。
     • 需要注意 Python 2.x 和 Python 3.x 由于部分语法不同，Cocos Creator 需要 Python 2.x，不要下载 Python 3.x 版本。
     • 环境变量配置：
       • Path 中增加 python 安装目录
       • cmd 中键入 python 查看是否成功。
         
         
   • Visual Studio
     • Windows 下需要安装 Visual Studio 2013 或 2015 、2017，社区版即可（ 下载页）。
     • 在安装 Cocos Creator 的时候，会提示是否安装 Visual Studio。
2. Android 平台相关依赖：
   • Android SDK
     • 下载 Android Studio 2.3.3.0 (android-studio-bundle-162.4069837-windows.exe) ，其中已经包含 Android SDK 和 SDK Manage(简介) 。
     • 或者直接下载 Android SDK Tools (sdk-tools-windows-3859397.zip) 。
     • Cocos Creator 配置：
       • 安装 Android Studio
       • 选择 Android Studio 安装目录中的 Android SDK
       • （若单独下载 SDK）选择刚才下载并解压后的 Android SDK 路径
       • 所选 SDK 目录下应该包含 build-tools、platforms
   • NDK
     • 下载 NDK-r14b (android-ndk-r14b-windows-x86_64.zip) 。
       
     • 环境变量配置：
       • Path 中增加 NDK 安装目录
       • cmd 中键入 ndk-build 查看是否成功。
     • Cocos Creator 配置：
       • 选择刚才下载并解压后的 NDK 路径根目录。
3. 编译 Android 工程所需：
   • Java SE JDK
     • 下载 Java SE Development Kit 8u131
     • 环境变量配置：
       • 创建环境变量 JAVA_HOME，将该变量设置到 JDK 根目录。
       • Path 中增加 %JAVA_HOME%\bin 。
       • cmd 键入 java -version 查看是否配置成功。
         

          

   • Apache Ant 
     • 是一种用来构建软件的 Java 程序库和可执行文件，下载 apache-ant-1.10.1-bin.zip 即可。
     • 环境变量配置：
       • 创建环境变量 ANT_HOME，将该变量设置到 ANT 根目录。
       • Path 总增加 %ANT_HOME%\bin 。
       • cmd 键入 ant -version 查看是否配置成功。
         

          

     • Cocos Creator 配置：
       • 选择前面下载并解压完成的 Apache Ant 路径 \bin 目录 ，选定的路径中应该包括一个名叫 ant 的可执行文件
         

 

--------------------------------------------- 以下部分援引 Cocos Creator 官方文档 ---------------------------------------------

配置代码编辑环境

在快速上手教程中，我们介绍了在 资源管理器 中双击脚本文件打开代码编辑器快速编辑代码的方法。但编辑器内置的代码编辑器功能并不完善，只适合快速浏览和做少量编辑的需要。对程序员来说，我们需要更成熟完善的代码编辑环境。

Visual Studio Code

Visual Studio Code （以下简称 VS Code）是微软新 推出的轻量化跨平台IDE，支持 Windows、Mac、Linux 平台，安装和配置非常简单。通过下面介绍的设置方法，使用 VS Code 管理和编辑项目脚本代码，可以轻松实现语法高亮、智能代码提示等功能，还可以直接使用 VS Code 调试网页和原生版本的游戏。

安装 VS Code

前往 VS Code 的官方网站，点击首页的下载链接即可下载。

Mac 用户解压下载包后双击 Visual Studio Code 即可运行。

Windows 用户下载后运行 VSCodeSetup.exe 按提示完成安装即可运行。

安装 Cocos Creator API 适配插件

在 Cocos Creator 中打开你的项目，然后选择主菜单里的 开发者/安装 VS Code 扩展插件。

该操作会将 Cocos Creator API 适配插件安装到 VS Code 全局的插件文件夹中，一般在用户 Home 文件夹中的.vscode/extensions 目录下。这个操作只需要执行一次，如果 API 适配插件更新了，则需要再次运行来更新插件。

安装成功后在 控制台 会显示绿色的提示：VS Code extension installed to ...。这个插件的主要功能是为 VS Code 编辑状态下注入符合 Cocos Creator 组件脚本使用习惯的语法提示。

在项目中生成智能提示数据

如果希望在代码编写过程中自动提示 Cocos Creator 引擎 API，需要通过菜单生成 API 智能提示数据并自动放进项目路径下。

选择主菜单的 开发者/更新 VS Code 智能提示数据。该操作会将根据引擎 API 生成的 creator.d.ts 数据文件复制到项目根目录下（注意是在 assets 目录外面），操作成功时会在 控制台 显示绿色提示：API data generated and copied to ...。

对于每个不同的项目都需要运行一次这个命令，如果 Cocos Creator 版本更新了，也需要打开您的项目重新运行一次这个命令，来同步最新引擎的 API 数据。

注意 从 VS Code 0.10.11 版开始，需要在项目根目录中添加 jsconfig.json 设置文件才能正确的使用包括智能提示在内的 JavaScript 语言功能，在执行上面的命令时，预设的 jsconfig.json 文件会和 creator.d.ts 一起拷贝到您的项目根目录中。

使用 VS Code 打开和编辑项目

现在可以运行我们之前下载安装好的 VS Code 了，启动后选择主菜单的 File/Open...，在弹出的对话框中选择您的项目根目录，也就是 assets, project.json 所在的路径。

现在新建一个脚本，或者打开原有的脚本编辑时，就可以享受智能语法提示的功能了。

注意 creator.d.ts 文件必须放在 VS Code 打开的项目路径下，才能使用智能提示功能。