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應該是安裝好的）

[email protected]:~/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

[email protected]:~/devTools/cocos2d/cocos2d-x-3.16$ source ~/.bashrc

上述列印的資訊可以看出，安裝的過程其實就是將cocos的路徑配置到環境變數中。
而我本人就是安卓開發，所以又將安卓的路徑和ANT的路徑找到並配置到環境變數中。
最後又讓其立即生效。

cocos命令

[email protected]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入口指令碼

執行一下

[email protected]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了，可以盡情玩樂了！