COCOS-JS开发1：环境搭建

cocos2d-js

cocos2d-js宣称是跨全平台的游戏引擎，这一点应该是最最吸引人的地方。而且伴随着微信小游戏的火爆，cocos2d-js对其支持到位，也注定在未来有更广阔的空间。
Cocos2d-js是cocos2d-x的JS版本，前身是cocos2d-HTML5。在后来被整合在了一起，与cpp和lua并存。在V3.16中可以看见它们矫健的身影。

Ubuntu下环境搭建

本人本着玩玩的态度来搭建个开发环境，从一些资料上看，目前官方推荐在win和mac下做开发，我等linux下的童鞋有些悲剧了。
但是调查一番后，发现cocos2d-x引擎部分是支持上述三个平台的，但是cocos creator只支持两个平台。

而一些开发者是使用cocos console + JS IDE来做开发的，那么IDE比如Web Storm是支持Linux的。看来把玩一番应该是可以的。

1、下载引擎V3.16
解压后在根目录下运行安装脚本（Ubuntu下python应该是安装好的）

linc@linc-Inspiron-5448:~/devTools/cocos2d/cocos2d-x-3.16$ python setup.py 

Setting up cocos2d-x...
->Check environment variable COCOS_CONSOLE_ROOT
  ->Search for environment variable COCOS_CONSOLE_ROOT...
    ->COCOS_CONSOLE_ROOT not found

  -> Add COCOS_CONSOLE_ROOT environment variable...
    ->Added COCOS_CONSOLE_ROOT=/home/linc/devTools/cocos2d/cocos2d-x-3.16/tools/cocos2d-console/bin

->Check environment variable COCOS_X_ROOT
  ->Search for environment variable COCOS_X_ROOT...
    ->COCOS_X_ROOT not found

  -> Add COCOS_X_ROOT environment variable...
    ->Added COCOS_X_ROOT=/home/linc/devTools/cocos2d

->Check environment variable COCOS_TEMPLATES_ROOT
  ->Search for environment variable COCOS_TEMPLATES_ROOT...
    ->COCOS_TEMPLATES_ROOT not found

  -> Add COCOS_TEMPLATES_ROOT environment variable...
    ->Added COCOS_TEMPLATES_ROOT=/home/linc/devTools/cocos2d/cocos2d-x-3.16/templates

->Configuration for Android platform only, you can also skip and manually edit "/home/linc/.bashrc"

->Check environment variable NDK_ROOT
  ->Search for environment variable NDK_ROOT...
    ->NDK_ROOT not found

  ->Search for command ndk-build in system...
    ->Path /opt/ndk/android-ndk-r10b was found

  -> Add NDK_ROOT environment variable...
    ->Added NDK_ROOT=/opt/ndk/android-ndk-r10b

->Check environment variable ANDROID_SDK_ROOT
  ->Search for environment variable ANDROID_SDK_ROOT...
    ->ANDROID_SDK_ROOT not found

  ->Search for command android in system...
    ->Path /opt/sdk was found

  -> Add ANDROID_SDK_ROOT environment variable...
    ->Added ANDROID_SDK_ROOT=/opt/sdk

->Check environment variable ANT_ROOT
  ->Search for environment variable ANT_ROOT...
    ->ANT_ROOT not found

  ->Search for command ant in system...
    ->Path /opt/apache-ant-1.9.4/bin was found

  -> Add ANT_ROOT environment variable...
    ->Added ANT_ROOT=/opt/apache-ant-1.9.4/bin


A backup file "/home/linc/.bashrc.backup" is created for "/home/linc/.bashrc".

Please execute command: "source /home/linc/.bashrc" to make added system variables take effect

linc@linc-Inspiron-5448:~/devTools/cocos2d/cocos2d-x-3.16$ source ~/.bashrc

上述打印的信息可以看出，安装的过程其实就是将cocos的路径配置到环境变量中。
而我本人就是安卓开发，所以又将安卓的路径和ANT的路径找到并配置到环境变量中。
最后又让其立即生效。

cocos命令

linc@linc-Inspiron-5448:~/devTools/cocos2d/cocos2d-x-3.16$ cocos --help

/home/linc/devTools/cocos2d/cocos2d-x-3.16/tools/cocos2d-console/bin/cocos.py 2.3 - cocos console: A command line tool for Cocos2d-x.

Available commands:
    run              Compiles, deploy and run project on the target.
    gen-libs         Generate prebuilt libs of engine. The libs will be placed in 'prebuilt' folder of the engine root path.
    luacompile       Encrypt and/or compile lua files.
    deploy           Compile and deploy a project to a device/simulator.
    package          Manage package for cocos.
    compile          Compile projects to binary.
    gen-simulator    Generate Cocos Simulator.
    new              Creates a new project.
    jscompile        Compile and/or compress js files.

Available arguments:
    -h, --help          Show this help information.
    -v, --version           Show the version of this command tool.
    --ol ['en', 'zh', 'zh_tr']  Specify the language of output messages.
    --agreement ['y', 'n']      Skip the agreement with specified value.

Example:
    cocos new --help
    cocos run --help

创建一个新项目

linc@linc-Inspiron-5448:~/js-workspace$ cocos new helloworld -l js
> Copy template into /home/linc/js-workspace/helloworld
> Copying directory from cocos root directory...
> Copying files from template directory...
> Copying Cocos2d-x files...
> Rename project name from 'HelloJavascript' to 'helloworld'
> Replace the project name from 'HelloJavascript' to 'helloworld'
> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.helloworld'
> Replace the Mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.helloworld'
> Replace the iOS bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.helloworld'
linc@linc-Inspiron-5448:~/js-workspace$ ls
helloworld
linc@linc-Inspiron-5448:~/js-workspace$ cd helloworld/
linc@linc-Inspiron-5448:~/js-workspace/helloworld$ ls
CMakeLists.txt  frameworks  index.html  main.js  manifest.webapp  project.json  res  src

目录结构

CMakeLists.txt cocos console编译时所依赖的文件
frameworks 包含web引擎和native引擎
–cocos2d-html5 html5引擎
–cocos2d-x cocos2d-x游戏引擎
–runtime-src 各平台的项目工程文件，如ios、android studio、windows等
index.html web工程的主页面来的，很重要：包含canvas元素、CCBoot.js引擎脚本、main.js入口脚本

运行一下

linc@linc-Inspiron-5448:~/js-workspace/helloworld$ cocos run -p web
Building mode: debug
Deploying mode: debug
Starting application.
Try start server on 127.0.0.1:8000
Serving HTTP on 127.0.0.1, port 8000 ...

运行tests项目也是一样的，如下图。

其他

用命令行来创建项目、编译运行项目，这样是可行的。那么用IDE来编写代码也是需要的，可以试用一下web storm这款收费的js开发神器。
另外，在部署项目时，也可以用xampp来做。
好了，工具都ready了，可以尽情玩乐了！