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.

1Prepare 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++.

2Copy 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.ACopy 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.BCompiled 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


3Create 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 CodeBrowse
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 CodeBrowse

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

Attached Pic MoonWar_01.jpg
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 CodeBrowse

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
MoonWar_02.jpg 

4Customized 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
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
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

5Build 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.ABuild 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.BBuild 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

 

6If 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

 

Reference:

1.      https://code.google.com/p/mkisofs-md5/downloads

2.      Cocos2D-HTML5 MoonWarriors Android Dev (wwashington Wrote) -- Android compiling user guide

3.      Cocos2D-HTML5 MoonWarriors iPhone6 Dev (wwashington Wrote) -- iOS compiling user guide

4.      Cocos2D-HTML5 Game MoonWarriors Apk (wwashington Build) -- Android compiling user guide

5.      Cocos2D-HTML5 Game MoonWarriors Src (wwashington Repack) – Source code

Original authorWwashington AT newsmthcocos2d-xchinaunixpcbeta on 2013/02/28

Adapt and interpret by: Dawei Cheng on 2013/03/25

Websitehttps://code.google.com/p/mkisofs-md5/downloads

For more complete information about compiler optimizations, see our Optimization Notice.