How to Compile Cocos2D-HTML5 JSBinding for Android X86 Devices

This is a technical tutorial for build Cocos2D-HTML5 JSBinding for Android x86 devices. Cocos2d-html5 is an open-source web 2D game framework, released under MIT License. It is a HTML5 version of Cocos2d-x project. Its focus for Cocos2d-html5 development is around making Cocos2d cross platforms between browsers and native application. On top of the framework provided by Cocos2d-html5, games can be written in Javascript, using API that is COMPLETELY COMPATIBLE with that of Cocos2d-iPhone, Cocos2d-html5 also supports running game code in "Cocos2d Javascript binding" without or with little modification.

Before reading this tutorial, you need be experienced in developing NDK applications for Android devices, especially for Android X86 devices.

1）Prepare Building Environment

Eclipse, ADT, CDT, Android SDK, Android NDK are essential, at the same time, UDE is a good development tools provided by CMCC. It supports cross platform develop, debug, compile and will support game develop in near feature.

Cygwin is also needed while compile Cocos2D-HTML5 Jsbinding project. It’s provided by Redhat.

ADT  ，http://developer.android.com/tools/sdk/eclipse-adt.html
CDT  ，http://www.eclipse.org/cdt/
SDK  ，http://developer.android.com/sdk/index.html
NDK  ，http://developer.android.com/tools/sdk/ndk/index.html
UDE  ，http://dev.10086.cn/app/local/
Cygwin，http://www.cygwin.com/
Unzip cocos2d-2.1beta3-x-2.1.1.zip to D:\Game\SDK\, This is a base folder for JS Binding build environment.

Unzip android-ndk-r8.zip to D:\Game\NDK, and then add this path to system environment or you can also add the path to Cygwin environment.

Add a new system environment and named it as NDK_ROOT and set its value to D:\Game\NDK\android-ndk-r8。

Hybrid application needs an interpreter to interpret JS codes. JavaScriptCore and SpiderMonkey are popular JS interpreters for developer.

Since JIT(Just-In-Time) can improve JavaScript performance, therefore, it’s very essential for HTML5 game developers to fix short point of performance issue.

Here is a topic shows why Cocos2d-HTML5 moved from JavaScriptCore to SpiderMonkey?

http://www.cocos2d-x.org/boards/20/topics/9696

My name is Rolando and I've been working on the cocos2d-x-javascript bindings for a
while. We (Zynga) released as open source the branch old-js-bindings, that was using
JavaScriptCore last week and right now we're openly working on a new, better, improved,
faster, javascript bindings using SpiderMonkey.

Apparently everyone is using JavaScriptCore, but although that seems to be true, they
are all infringing the LGPL license (actually Apple is infringing the License), so we
searched for other JavaScript VMs and decided that SpiderMonkey was a good candidate.

https://developer.mozilla.org/en/docs/SpiderMonkey
SpiderMonkey is Mozilla's JavaScript engine written in C/C++.

2）Copy file OR compile with Cygwin

You can choose either of them.

Cygwin is a very powerful tool to tuning C++ code and you could debug source code by gdb. Another method is building so by script build_native.sh. it’s more convenient than Android NDK which is co-worked by Cygwin. But this method is not powerful than Cygwin.

2.A）Copy file

An batch script is provided to save time. if you need to use this script to build other project, you only need to change the value of EngineHome and SamplesApp.

D:\Game\Home\Readme\MoonWar>type MoonWar_Apk.cmd
set EngineHome=D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1
set SamplesApp=MoonWarriors
set AndroidDir=%EngineHome%\samples\Javascript\%SamplesApp%\proj.android
set SamplesDir=%EngineHome%\samples\Javascript\Shared\games\%SamplesApp%
set BindingDir=%EngineHome%\scripting\javascript\bindings\js

echo %EngineHome%
echo %SamplesApp%
echo %AndroidDir%
echo %SamplesDir%
echo %BindingDir%

cd /d %AndroidDir%
if exist assets rmdir /s /q assets
mkdir assets
cd assets
mkdir res
mkdir src

xcopy /s /y %SamplesDir%\res res
xcopy /s /y %SamplesDir%\src src
copy /y %SamplesDir%\*.js .
copy /y %BindingDir%\*.js .

2.B）Compiled with Cygwin

$ cd "D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1"
$ chmod -R 755 *

$ cd "D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android"
$ ./build_native.sh
please define NDK_ROOT

$ vi ~/.bashrc
export NDK_ROOT='D:\Game\NDK\android-ndk-r8'
:q!

$ . ~/.bashrc
$ env | grep NDK
NDK_ROOT=D:\Game\NDK\android-ndk-r8

$ ./build_native.sh
"Compile++ thumb : moonwarriors_shared <= main.cpp
"Compile++ thumb : moonwarriors_shared <= AppDelegate.cpp
......

ld.exe: ./obj/local/armeabi/js_static.a: No such file: Permission denied
collect2: ld returned 1 exit status

$ ls -la ./obj/local/armeabi
$ chmod -R 755 ./obj/local/armeabi/*.a

$ ./build_native.sh

$ chmod -R 755 assets

3）Create a game project, compile related libraries

3.A is essential, while you can choose one step from 3.B and 3.C, since 3.B and 3.C are same functional to project.

3.A） Create Project

Create a new project in Eclipse. File -> new -> Project -> Android -> Android Project from Exsiting Code、Browse
D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android

And then, Project -> Clear -> Clear select item MoonWarriors. You would find error in red in src folder. We track the problem：

Can’t import org.cocos2dx.lib Line26
Cocos2dxActivity can’t be a class Line30
Cocos2dxActivity can’t be a class Line33

3.B） Add Related Library by Compile Source Codes.

Right click the project created in 3.A. Reference -> Android -> Library, and then you would find the reference is a java project. Then, we build reference library by compile source codes.

Now, cocs2d-x Java library is the target we need to build.

Import export library -> File -> New -> Project -> Android -> Android Project from Exsiting Code、Browse

D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\cocos2dx\platform\android\java

（Attached Pic MoonWar_01.jpg）
Note: The picture is captured in Chinese version, it should be same in English version of Eclipse.

3.C） Add Related Library by Copying File.

If you don’t want 3.B solution, you could also add reference library by Copying file. Copying pre-build jar library to project folder as dependent library is another method, which is the same as 3.B step.

Open folder D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\cocos2dx\platform\android\java
and drag file to src folder in Eclipse Project. then “+” would showed，select Copy files and folders， override? select Yes for all.

And then, Import export library -> File -> New -> Project -> Android -> Android Project from Exsiting Code、Browse

D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\cocos2dx\platform\android\java

3.D） Check dependency library.

Now check MoonWarriors project again, error disappeared. and java.jar is showed in Android Dependencies list.

（attached picture MoonWar_02.jpg）

4）Customized your Builder

Right Click the project, Project -> Reference -> Builder -> New -> Program and then input the following information. Please make sure working directory is correct. If Cygwin is pre-installed and you have finished 2.B step successfully, you can skip this step 4 and go to step 5.

（prcture MoonWar_03.jpg）

Name：NDK Cocos2dxActivity
Place：D:\Game\NDK\android-ndk-r8\ndk-build.cmd
Working directory：${workspace_loc:/MoonWarriors}
Independent variable：

NDK_MODULE_data-path="D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1;D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\cocos2dx\platform\third_party\android\prebuilt"

（Picture MoonWar_04.jpg）

Note：

You can find working directory in Reference -> Resources -> Path. Copy the value to working directory.

And then we need to set the NDK location to the correct path.

Setting: Window -> Reference -> Android -> NDK -> NDK Location, set the value to D:\Game\NDK\android-ndk-r8

5）Build the Project

You can choose either 5.A or 5.B according to your experience. In order to build NDK applications for Intel Atom Platform, we need to add APP_ABI := x86 into the Makefile Android.mk.

5.A）Build with NDK

Project -> Build Project and then Eclipse would build the project to library with self Builder.

This step is same as build_native.sh script in Cygwin.

Please check all libs are building successfully, open the lib folder in Eclipse project and you would find x86 folder included and a so file in this folder.

If build successfully, you also need to package -> Run -> Run as -> Android to finial build your cocos2d-HTML5 JSBinding project.

"Compile++ thumb : moonwarriors_shared <= main.cpp
"Compile++ thumb : moonwarriors_shared <= AppDelegate.cpp
......

5.B）Build with Cygwin

If you find error during Package -> Run -> Run as -> Android, and it shows “No rule to make target: CCConfiguration.cpp”. It maybe occurred by file permission rejection or timeout during compiling. In this situation, you need to delete previous build library and rebuild them, repeat step 2.A and 5.A.

$ rm -Rf obj/*
$ rm -Rf libs/*
$ ./build_native.sh

6）If Error Occurs

If you find error during Package -> Run -> Run as -> Android, and it shows “Could not find *.apk”. It’s normally occurred by project settings error, It should be an application instead of a library, you need to change settings by following steps:

Project -> Reference -> Android -> Library -> Is Library. Unchecked the check box and then:

Run -> Run as -> Android Application. If error occurred again as “Zip add failed”, it’s a permission rejection failure, you need to reset the file permission.

After install in android phones, if MoonWar running in a low performance, it is need to optimized SpiderMonkey engine.
Unable to add 'D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android\assets\res\arial-14.GlyphProject': Zip add failed
Unable to add 'D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android\assets\res\arial-14.fnt': Zip add failed
org.cocos2dx.moonwarriors.MoonWarriors] ERROR: unable to process assets while packaging 'D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android\bin\resources.ap_'
org.cocos2dx.moonwarriors.MoonWarriors] ERROR: packaging of 'D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android\bin\resources.ap_' failed

$ cd "D:\Game\SDK\cocos2d-2.1beta3-x-2.1.1\samples\Javascript\MoonWarriors\proj.android"
$ ls -la assets
$ chmod -R 755 assets