Cocos2d-JS 【视频教程】_【3个小时——快速入门】

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%20
一、 前期准备:
在搭建Cocos2d-JS开发环境之前,我们应该要先准备好相关的原料,下面贴出原料清单,并在结尾,我们会对他们进行一个小小的备注说明。
原料清单:
1. Cocos2d-JS 引擎包 【下载地址:http://www.cocos2d-x.org/%20】
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 示意图:
      <img title = '环境搭建Mac.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_59/59_286541_080ba2d9873ffd2.png' > 
    2.4 Windows 示意图:
              <img title = '环境搭建Windows.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_59/59_286541_adba4b57e4c8fb6.png' > 

到这个时候呢,你的Cocos2-JS的开发环境,已经是搭建成功了。你可以打开你的系统环境变量看看Cocos Console都做了什么事情
在下一个教程当中,我们将告诉大家,如何的创建第一个基于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

下接第二篇 : http://www.cocoachina.com/bbs/read.php?tid=227642

这个要顶:14::14::14::14::14::14:

声援你一下吧

:10: MARK ! MARK!

博文还在写当中哇。。。大家可以先看视频哈,录制的也比较短,11个视频加起来171分钟,两部电影的时间就可以入门了哈。。。:7:

:870: :870: :870: 好棒!

给力啊!!!:867:

楼主后续教程快点出呀。。好期待。。:14:

No such file or directory: u’C:\Users\Administrator\Documents\cocos\CocosJSGame\temp\CocosJSGame\frameworks/js-bindings/cocos2d-x\plugin/plugins/facebook/proj.ios/sdk/FacebookSDK.framework/Versions/A/Resources/FBUserSettingsViewResources.bundle/Contents/Resources/en.lproj/Localizable.strings’

打包android报错 这个怎么解决呢

抢到第一页来盖楼了。好贴要顶,加油,加油!!

不顶不爽,楼主加油

顶起来,:10::10:

顶顶顶,加油

赞:856::856:

多谢多谢,好详细,赶紧试试

:10:赞个~~

sdk是从LZ的一键下载地址里面下的441.4M
提示

之后手动添加的环境变量,新建工程运行一切正常
编译的时候

抱歉,才刚刚看到,现在问题解决了吗?群里直接问可能会比较快一点。

按照楼主所说的把环境搭好后,打包APK出现错误
Running command: compile
Building mode: debug
building native
NDK build mode: debug
running: ‘D:\cocos\android-ndk-r9d\ndk-build -C D:\superdadishi\frameworks\runti
me-src\proj.android -j2 NDK_MODULE_PATH=D:\superdadishi\frameworks\runtime-src\p
roj.android…/…/js-bindings;D:\superdadishi\frameworks\runtime-src\proj.androi
d…/…/js-bindings/cocos2d-x;D:\superdadishi\frameworks\runtime-src\proj.androi
d…/…/js-bindings/cocos2d-x/cocos;D:\superdadishi\frameworks\runtime-src\proj.
android…/…/js-bindings/cocos2d-x/external NDK_DEBUG=1’

系统找不到指定的路径。
Ndk build failed!

期待解答