Hybrid development with cocos2d-x jsb and cocos2d-html5

Somewhat it seems that in game development, the testing and making changes using only cocos2d-x is a bit time-consuming, and version publication in app store takes a long time.

Hybrid development with cocos2d-x javascript binding seems to solve the above problems. We develop in javascript, test and make changes can be done via web browser, and make solutions for resources update to advance version publication progress. Everything becomes flexible.

So how to do it? Here I'll show a simple example. I'm using cocos2d-x-2.2 and cocos2d-html5 2.2.  Download here and decompress somewhere in your disk.

1. Creating a project

create a project in your terminal:

$ cd cocos2d-x-2.2/tools/project-creator/ 

$ python ./create_project.py -project HelloWorldJS -language javascript -package com.example.AwesomeGame

proj.ios : Done!

proj.android : Done!

proj.win32 : Done!

New project has been created in this path: /Users/yourname/Projects/cocos2d-x-2.2/projects/HelloWorldJS

Have Fun!

2. Importing project to Xcode

open the project in Xcode, you can see javesript files created in your app's Resources folder.

3. JavaScript Coding

Since coding javascript in Xcode would be painful because there are no completions and error checking.. I use WebStorm of JetBrains to write javascript codes. 

Open WebStorm and select Create New Project from Existing Files, next check Source files are in a local directory, no Web server is yet configured.

next select the project folder you just created in step 1 as Project Root. You can edit javascript code now but without cocos2d related code completion.

4. JavaScript code completion

Import cocos2d-html5 library to your WebStorm. Open WebStorm preference, and find JavaScript->Libraries, click Add:

select cocos2d-html5 folder you downloaded in step 1.

after adding cocos2d-html5 library your can use code completion in WebStorm. Enjoy!

5. Testing with Xcode/browser

As you code in WebStorm and save file, you can directly use Xcode to run and see the result.

Also, since it's written by javascript, you can also run you app in web browser. This step is rather straight-forward.

a. Just create a project(namely HelloWorldHtml5) using cocos2d-html5 and put your $HelloWorldJS/Resources/src/ files into $HelloWorldHtml5/src/ and overwrite it. 

b. In your terminal, navigate to $HelloWorldHtml5 folder and start web server with a simple command: 

$cd $HelloWorldHtml5
$python -m SimpleHTTPServer 8000

c. open http://localhost:8000 in your browser and you can now play your game in it!

(or the better way is to copy cocos2d.js/build.xml/index.html/main.js etc. files into HelloWorldJS folder and start web server there, in this way we needn't copy files every time.)

6. Summary

As you finished 5 steps you can now code and test your game easily. For the resources update part, there are many solutions. I came up with one with myself and maybe we can talk about it someday.