Cocos2d-JS 快速入门_01 环境搭建(Mac && Windows集合版)

此教程，由宝宝巴士(福建)网络科技有限公司-凌建风撰写
【宝宝巴士，专注幼儿教育】
【详情猛戳：http://cn.babybus.com 】

Cocos2d-JS快速入门—配套视频教程：http://i.youku.com/lingjianfeng 
视频、讲义、源码：http://pan.baidu.com/share/home?uk=1260900318#ca

一、 前期准备：
在搭建Cocos2d-JS开发环境之前，我们应该要先准备好相关的原料，下面贴出原料清单，并在结尾，我们会对他们进行一个小小的备注说明。
原料清单：
    1. Cocos2d-JS 引擎包 【下载地址：http://www.cocos2d-x.org/download/ 】
    2． IDE
        2.1 Cocos IDE  【同样也是在cocos2d-x 官网上下载，这个鬼东西老强大了，后面我们会介绍这个IDE哈, 囧…】
        2.2 WebStorm   【下载地址问度娘要哈】
        2.3 Chrome     【谷歌浏览器】
        2.4 JetBrains-IDE-support 【如果你采用WebStorm编码，那就需要这个东西，它是Chrome浏览器的一个插件，功能是用来桥接WebStorm和Chrome，比较讨厌的一点是，这个鬼东西需要XX才能下载，如果你的楼梯太短，XX失败的同学，可以考虑直接用Cocos IDE哈，也就是不用安装这个插件了】

2.5 XAMPP      【维基和百度百科说的太文邹邹，读书少，看不懂，我的理解就是一个服务器。见最底部 附录2：关于直接在浏览器运行js-tests无法正常工作问题】
    3. Python     【Windows系统需要安装[见最底部 附录1：Window Python环境配置]， Mac OS 有自带。官网建议用2.7版本】
    4. Android 环境相关： 
        Apache Ant    【下载地址： http://ant.apache.org/bindownload.cgi 】
        Android NDK   【下载地址： http://developer.android.com/tools/sdk/ndk/index.html 】
        Android SDK   【下载地址：https://developer.android.com/sdk/index.html?hl=sk 】
一键下载地址：http://pan.baidu.com/share/home?uk=1260900318#ca 
    5. 以上所有内容，在Mac和windows上通用，每个软件都有对应的Mac版本和Windows版本
二、开始搭建
    1. Cocos Console安装
        1.1  Python检查 ： 这个时候，你的电脑操作系统(不管是Mac还是Windows)应该是都有Python环境了，检查方法： 在终端(Windows 系统 Dos窗口)直接中输入 Python ,回车，可以看到你的Python版本，对比下图。
        Mac 示意图：
        
 
        Windows示意图：
          
 
如果不能看到Python版本，那么，一二三四，再来一次，重新安装Python。囧、、、

        1.2  Cocos Console安装： 打开终端（Windows打开Dos窗口）， 将Cocos2d-js-v3.x/setup.py 拖到终端中，潇洒的按下回车，这个时候，Cocos Console安装成功啦，接下来就是配置Android环境了。Cocos2d-js-v3.x 就是你下载的Cocos2d-JS引擎包。
    2. Android环境配置：
        2.1 这一步，Cocos Console 会问你说你的Ant, SDK, NDK 放在哪里？你告诉它之后，它会转告给你的操作系统。
        2.2需要注意的一点是：Ant比较矫情，需要定位到bin文件夹下。
        2.3 让配置的环境生效。
        Mac : 进入到最后提示的那个路径，比如我的是：/Users/lingjianfeng/.bash_profile 然后双击打开运行下这个文件。友情提示哦：这个文件是隐藏的，需要显示下隐藏文件。
        Windows: 重启下电脑就好啦。
        2.3 Mac 示意图：
          
 
        2.4 Windows 示意图：
                  
 
         
到这个时候呢，你的Cocos2-JS的开发环境，已经是搭建成功了。你可以打开你的系统环境变量看看Cocos Console都做了什么事情[Mac 用户打开 /Users/你的用户名/ .bash_profile][Windows用户打开你的系统环境变量]
在下一个教程当中，我们将告诉大家，如何的创建第一个基于Cocos2d-JS的HelloWord，以及编译或者运行在各平台上…

附录1：Window Python环境配置
    1. 因为windows操作系统不能直接运行python脚本，所以我们需要安装下python，安装步骤如下。
    2. 下载python --> 去https://www.python.org/downloads/ 下载的python, 下载2.7版本。
    3. 安装python --> 直接运行python-2.7.msi。可以直接装在C盘。
    4. 环境变量配置 -->
        4.1 找到python安装目录 --> 例如 C:\Python27 。
        4.2 环境变量配置  --> 右键桌面上【我的电脑】→ 【属性】→ 【高级系统设置】→【环境变量(N)...】 → 【系统变量(S)】 → 选择【 path】→  点击 【编辑(I)...】 → 在变量值最后输入括号里面的内容 (;C:\Python27) ，之后一路连续有三个确定可以点，狂点吧。注意，每个环境变量之间用分号(;)隔开。所以不要忘记了前面的分号，  C:\Python27为你python安装的路径
        4.3 OK。你的python安装成功啦。

附录2：关于直接在浏览器运行js-tests无法正常工作问题
    ☞ 原因 : 一些浏览器对本地文件的支持不是很好。
    ☞ 解决办法，安装服务器(推荐XAMPP)。
    ☞ 安装XAMPP成功后，将整个cocos2d-js-v3.0-rc3(写这篇文章时候-JS的最新版本)拷贝到XAMPP/htdocs下。
    ☞ 启动服务器
    ☞ 浏览器：http://localhost/cocos2d-js-v3.0-rc3/samples/js-tests。成功。

[说明]：最近有一些同学，说ndk不能用什么的，这里，我表示很抱歉哈。我网盘上的资源是Mac的，可能在windows下会有问题。若出现问题，请参考下面给出的资料哈。

附录3: 相关资源
Cocos Console 安装手册：
http://www.cocos2d-x.org/docs/manual/framework/html5/v2/cocos-console/zh
(需要先安装Python)
https://www.python.org/download/releases/2.7.8/

安卓平台编译依赖：

Android SDK：https://developer.android.com/sdk/index.html
Android NDK r9d：
    Windows 32bit：http://dl.google.com/android/ndk/android-ndk-r9d-windows-x86.zip 
    Windows 64bit：http://dl.google.com/android/ndk/android-ndk-r9d-windows-x86_64.zip 
    Mac：http://dl.google.com/android/ndk/android-ndk-r9d-darwin-x86.tar.bz2 

Web平台编译依赖：http://ant.apache.org/bindownload.cgi