Cocos2d-js3.0 01_入门篇

1. cocos2d-js 简介

    1.1 Cocos2d-JS 是 Cocos2d-x 的 Javascript 版本 ， 融合了 Cocos2d-html5 和 Cocos2d-x JSBinding 。它支持 Cocos2d-x 的所有特性 并提供更简单易用的 Javascript 风格 API 。

    1.2 Cocos2d-JS 为不同平台提供了统一的开发体验，无论你为 web 还是原生应用做开发。 “ 一次开发，全平台运行 ” 因为Cocos2d-JS 变得前所未有得简单和自然。同一套 Javascript 游戏代码，可以同时运行在所有现代浏览器和包括 Mac OSX, Windows, iOS, Android 的原生平台上，这将为我们的开发者在几乎所有发行渠道中带来难得的机遇。

    1.3 新的 Javascript 风格 API 使得编码，测试和发布环节都变得更加轻松简单。 Cocos2d-JS 还 自带了 Cocos Console ，一个用于简化项目创建和不同目标平台编译发布流程的终端工具。
    1.4 Cocos2d-JS V3.1 推出全新的渲染机制，渲染性能相对2.X提升了50%
    1.5 触控科技cocos2d团队目前主推Cocos2d-JS，所以，是未来cocos2d引擎的一种趋势。

2. 环境搭建

    2.1 开发工具

        2.1.1 cocos2d-js-v3.0-beta
        2.1.2 WebStorm (IDE)
        2.1.3 Chrome
        2.1.4 JetBrains-IDE-support (Chrome 的插件，负责WebSrorm 与Chrome协同编辑调试 )

    2.2 创建工程

    2.2.1 install cocos console
        ☞ 解压cocos2d-js-v3.0-beta，运行setup.py 脚本。(Mac直接拖进终端运行，Win见底部附录1：Window Python环境配置)
        ☞ 根据提配置NDK，Android SDK，Ant(定位到bin)环境变量
        ☞ 复制终端提示的执行命令(去掉source)到终端回车执行。(例如我得到的是：/Users/lingjianfeng/.bash_profile)
    2.2.2 new project
        ☞ 创建一个名为HelloCocos2dJS的工程在桌面：cocos new HelloCocos2dJS -l js -d ./Desktop 
    2.2.3 run project 
        ☞ cd ./Desktop/HelloCocos2dJS
        ☞ cocos run -p web | ios | android | mac 
    2.2.4 build project
        ☞ cd ./Desktop/HelloCocos2dJS
        ☞ cocos compile -p ios | android | mac 
    2.2.5 debug project
        ☞ 编译好的项目位于frameworks/runtime-src/
        ☞ IOS : proj.ios_mac
        ☞ Android : 
            1. 将proj.android导入Eclipse
            2. 将frameworks/js-bindings/cocos2d-x/cocos/platform/android/java导入Eclipse

4. 引擎文件结构分析

    AUTHOES                -- 作者们

    build                       -- 引擎样本，打开有惊喜

    CHANGELOG           -- 更新日志

    docs                       -- 文档等

    frameworks             -- 引擎源码

        cocos2d-html5     -- JS API

        js-bindings          -- C++ to JS

    LICENSE                 -- 许可证(麻省理工学院等认证)

    README.md            -- 一些改进

    samples                  -- 两个项目，一个月亮战士，一个JS-Tests(大量Demo)

    setup.py                 -- 配置cocos console 环境变量用的python脚本
    templates               -- 工程模版，没什么用。直接用命令创建工程。
    tools                      -- 一些工具

5. 安装服务器

    因为一些浏览器对本地文件的支持不是很好，所以我们需要安装web服务器(以后开发记得启动服务器)。推荐：XAMPP。

6. 添加WebStorm代码补全功能

    ☞ 打开WebStorm
    
    ☞ 创建工作区间
        ☞【位置定位：窗口中间】点击Create New Projects From Exiting Files
        ☞【位置定位：窗口底部】点击Source files are in a local...
        ☞【位置定位：窗口左上】点击Project Root
        ☞【位置定位：窗口中间】定位到你服务器htdocs/workspace(手动创建，方便项目管理)，点击 Finish。
    ☞ 代码补全(基于Mac，windows同理)
        ☞【位置定位：屏幕左上】点击WebStorm--Preferences
        ☞【位置定位：窗口左侧】Project Setting[Projects]--JavaScript--Libraries
        ☞【位置定位：窗口右上】点击Add按钮，键入Name：cocos2djs(自定义)
        ☞【位置定位：窗口左下】点击+按钮，选择Attach Directories  ... 选择 ~/cocos2d-js-v3.0-beta/frameworks/cocos2d-html5. 接着一路点击OK，完成。

附录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 验证python是否安装成功--> 打开windows dos窗口(windows键 + R ,然后输入cmd，回车) → 直接输入python，若有输出python版本等信息，说明安装成功。若失败，请检查python安装以及环境变量是否配置成功。
        4.4 运行python脚本。例如运行在桌面的一个setup.py脚本，那么步骤：
            cd ./Desktop
            python setup.py

附录2：关于运行js-tests无法正常运行问题

    ☞ 解决办法，安装服务器。

    ☞ 推荐XAMPP，
    ☞ 将整个cocos2d-js-v3.0-beta(建议改名，例如:cocos2djs)拷贝到服务器中的htdocs下。
    ☞ 启动服务器
    ☞ 浏览器：http://localhost/cocos2djs/cocos2djs/samples/js-tests。成功。