Cocos2dJS快速入门_01环境搭建(MacWindows集合版)

一、 前期准备

在搭建Cocos2d-JS开发环境之前&＃xff0c;我们应该要先准备好相关的原料&＃xff0c;下面贴出原料清单&＃xff0c;并在结尾&＃xff0c;我们会对他们进行一个小小的备注说明。

原料清单&＃xff1a;

1. Cocos2d-JS 引擎包 【下载地址&＃xff1a;http://cn.cocos2d-x.org/download/ 】

2&＃xff0e;IDE

2.1 Cocos IDE  【同样也是在Cocos2d-x 官网上下载&＃xff0c;这个鬼东西老强大了&＃xff0c;后面我们会介绍这个IDE】

2.2 WebStorm   【下载地址问度娘要哈】

2.3 Chrome     【谷歌浏览器】

2.4 JetBrains-IDE-support 【如果你采用WebStorm编码&＃xff0c;那就需要这个东西&＃xff0c;它是Chrome浏览器的一个插件&＃xff0c;功能是用来桥接WebStorm和Chrome&＃xff0c;比较讨厌的一点是&＃xff0c;这个鬼东西需要翻墙才能下载&＃xff0c;如果你的楼梯太短&＃xff0c;翻墙失败的同学&＃xff0c;可以考虑直接用Cocos IDE哈&＃xff0c;也就是不用安装这个插件了】

2.5 XAMPP     【维基和百度百科说的太文邹邹&＃xff0c;我的理解就是一个服务器。见最底部 附录2&＃xff1a;关于直接在浏览器运行js-tests无法正常工作问题】

3. Python     【Windows系统需要安装[见最底部 附录1&＃xff1a;Window Python环境配置]&＃xff0c; Mac OS 有自带。官网建议用2.7版本】

4. Android 环境相关&＃xff1a; 

Apache Ant    【下载地址&＃xff1a;http://ant.apache.org/bindownload.cgi】

Android NDK   【下载地址&＃xff1a;http://developer.android.com/tools/sdk/ndk/index.html】

Android SDK   【下载地址&＃xff1a;https://developer.android.com/sdk/index.html?hl&＃61;sk】

一键下载地址&＃xff1a;http://pan.baidu.com/share/home?uk&＃61;1260900318#ca

5. 以上所有内容&＃xff0c;在Mac和windows上通用&＃xff0c;每个软件都有对应的Mac版本和Windows版本。

二、开始搭建

1. Cocos Console安装

1.1  Python检查&＃xff1a; 这个时候&＃xff0c;你的电脑操作系统(不管是Mac还是Windows)应该是都有Python环境了&＃xff0c;检查方法&＃xff1a; 在终端(Windows 系统 Dos窗口)直接中输入 Python ,回车&＃xff0c;可以看到你的Python版本&＃xff0c;对比下图。

Mac 示意图&＃xff1a;

Windows示意图&＃xff1a;

如果不能看到Python版本&＃xff0c;那么&＃xff0c;一二三四&＃xff0c;再来一次&＃xff0c;重新安装Python。

1.2  Cocos Console安装&＃xff1a; 打开终端&＃xff08;Windows打开Dos窗口&＃xff09;&＃xff0c; 将Cocos2d-js-v3.x/setup.py 拖到终端中&＃xff0c;潇洒的按下回车&＃xff0c;这个时候&＃xff0c;Cocos Console安装成功啦&＃xff0c;接下来就是配置Android环境了。Cocos2d-js-v3.x 就是你下载的Cocos2d-JS引擎包。

2. Android环境配置&＃xff1a;

2.1 这一步&＃xff0c;Cocos Console 会问你说你的Ant, SDK, NDK 放在哪里&＃xff1f;你告诉它之后&＃xff0c;它会转告给你的操作系统。

2.2 需要注意的一点是&＃xff1a;Ant比较矫情&＃xff0c;需要定位到bin文件夹下。

2.3 让配置的环境生效。

Mac: 进入到最后提示的那个路径&＃xff0c;比如我的是&＃xff1a;/Users/lingjianfeng/.bash_profile 然后双击打开运行下这个文件。友情提示哦&＃xff1a;这个文件是隐藏的&＃xff0c;需要显示下隐藏文件。

Windows: 重启下电脑就好啦。

Mac 示意图&＃xff1a;

Windows 示意图&＃xff1a;

到这个时候呢&＃xff0c;你的Cocos2-JS的开发环境&＃xff0c;已经是搭建成功了。你可以打开你的系统环境变量看看Cocos Console都做了什么事情[Mac 用户打开 /Users/你的用户名/ .bash_profile][Windows用户打开你的系统环境变量]

在下一个教程当中&＃xff0c;我们将告诉大家&＃xff0c;如何的创建第一个基于Cocos2d-JS的HelloWord&＃xff0c;以及编译或者运行在各平台上。

附录1&＃xff1a;Window Python环境配置

1. 因为windows操作系统不能直接运行python脚本&＃xff0c;所以我们需要安装下python&＃xff0c;安装步骤如下。

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) &＃xff0c;之后一路连续有三个确定可以点&＃xff0c;狂点吧。注意&＃xff0c;每个环境变量之间用分号(;)隔开。所以不要忘记了前面的分号&＃xff0c;  C:\Python27为你python安装的路径

4.3 OK。你的python安装成功啦。

附录2&＃xff1a;关于直接在浏览器运行js-tests无法正常工作问题

☞ 原因 : 一些浏览器对本地文件的支持不是很好。

☞ 解决办法&＃xff0c;安装服务器(推荐XAMPP)。

    ☞ 安装XAMPP成功后&＃xff0c;将整个cocos2d-js-v3.0-rc3(写这篇文章时候-JS的最新版本)拷贝到XAMPP/htdocs下。

    ☞ 启动服务器

    ☞ 浏览器&＃xff1a;http://localhost/cocos2d-js-v3.0-rc3/samples/js-tests。成功。

本系列教程简介&＃xff1a;

本系列教程由宝宝巴士(福建)网络科技有限公司-凌建风撰写

【宝宝巴士&＃xff0c;专注幼儿教育&＃xff0c;详情猛戳&＃xff1a;http://cn.babybus.com】

Cocos2d-JS快速入门—配套视频教程&＃xff1a;http://i.youku.com/lingjianfeng 

视频、讲义、源码&＃xff1a;http://pan.baidu.com/share/home?uk&＃61;1260900318#ca 

本帖论坛地址&＃xff1a;http://www.cocoachina.com/bbs/read.php?tid&＃61;227246&＃xff0c;欢迎参与讨论。