RSS

How to start developing iOS & Android native apps with CocoonJS

04 Mar

CocoonJS is one of the mobile wrappers for HTML5 web apps in the market. The pro of it is web apps especially games developed with canvas can benefit for performance from binding the code to OpenGL ES. Web apps built with HTML DOM has to be modified to run in the WebView thus these kind of apps doesn’t gain performance by using CocoonJS platform.

This step by step tutorial tells you how to set up the environment to work with ImpactJS and CocoonJS. ImpactJS is a popular Javascript game engine which is also supported by appMobi. If you don’t need to use ImpactJS, skip step 1 & 3. If you don’t need to use CocoonJS extensions which supports iOS & Android device features, skip step 2 & 3.

1. Download ImpactJS. If you are wondering whether it worth the money or not you may have a look on its forum and Point of Impact.

2. Download [cocoon_CocoonJSExtensions](https://bitbucket.org/ludei/cocoon_cocoonjsextensions).

3. Setup the code with [opensource ImpactJS CocoonJS boilerplate](https://github.com/fragcastle/ImpactJS-CocoonJS-Example).

4. CocoonJS requires an index.html as the program entry. Add script references of CocoonJS extensions and ImpactJS to the index.html if you need them. Use javascript to create a <canvas> element for game contents to be hardware accelerated. Webviews can be loaded using CocoonJS.App.loadInTheWebView(htmlPath). The example with webview can be downloaded at [CocoonJS webview demo source](http://cocoonjsservice.ludei.com/cocoonjslaunchersvr/demo-list/).

5. Download and install CocoonJS Launcher App from the app store on your mobile device.

6. Once you load the CocoonJS Launcher App, there’s a “Demo” button to try official demos and a “Test” button to try your own app. Press “Test” and follow the steps to register CocoonJS. A detailed graphical registration step can be found at THE COCOONJS LAUNCHER APP.

7. After registration, you can test your app by putting your compressed app zip file through iTunes in the CocoonJS Launcher ( Make sure the index.html is located in your zip root. For Android users, see THE COCOONJS LAUNCHER APP ), or pointing the url to your zip or index.html which is faster for development.

Tutorials
==================

1. [COCOONJS DEVELOPMENT GUIDE](http://wiki.ludei.com/cocoonjs:devguide)
2. [Impactjs With Cocoonjs](http://fragcastle.com/tech/2012/12/31/impactjs-with-cocoonjs/)

Advertisements
 
2 Comments

Posted by on March 4, 2013 in Javascript

 

Tags: ,

2 responses to “How to start developing iOS & Android native apps with CocoonJS

  1. hotsauce

    October 23, 2013 at 11:42 PM

    So much the index.html cannot be a plain html page with JS scripts to navigate to another page?

     
    • begeeben

      October 25, 2013 at 12:02 AM

      No, at least when I wrote it.
      Our approach was using a webview for game GUI pages, which can also be used for internet browsing.

       

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: