How to export to CocoonJS

Favourite 119 favourites
Tutorial written by AshleyOriginally published on 14th, May 2012 - 20 revisions

Note: when exporting for Android, we recommend using Crosswalk instead since it has better compatibility with Construct 2 games. For more information see How to export to Android with Crosswalk. We also recommend publishing via Cordova for iOS.

HTML5 game performance on mobiles is often a problem, especially with old devices. CocoonJS by Ludei is a service that wraps your game as a native mobile app (similar to how PhoneGap works), but also significantly boosts performance using hardware acceleration. This can result in a 5-10x performance increase, often resolving performance problems.

Integrating with CocoonJS features

To add CocoonJS specific features to your game, such as adverts or in-app purchases, add the CocoonJS object to your project.

For more information about how to set up the Cloud Compiler for adverts, refer to the official Ludei documentation here: http://wiki.ludei.com/cocoonjs:extensions:ad

Exporting for CocoonJS

In the Export Project dialog, choose Export for: CocoonJS.

Open the folder exported to. When exporting to CocoonJS, you will just get a single .zip file exported. This is the file you need to submit to the CocoonJS service.

Get the CocoonJS Launcher

To test your game works before building it, install the CocoonJS Launcher app for your phone.

CocoonJS Launcher in the Google Play store
CocoonJS Launcher in the iTunes store

Run the app and press Your app. You'll need to press the Register button and get a registration code. When you receive your code, enter it in to the app. It'll be saved so you only need to enter it once.

Testing with the CocoonJS Launcher

To test your game, enter its URL (e.g. from the public link on Dropbox) to the Launcher app, and press Launch current. CocoonJS will download the zip, then launch the game.

After pressing Launch current, you can also later press Launch previous to run the last entered URL again. There are also options to save your games to the SD card so you can preview several of them even without a connection.

You can touch the cog button to enable debug mode. In debug mode an FPS counter will appear. You can press the FPS counter to see a debug log which may include helpful information about unsupported features or any errors that happened.

It's also possible to use Preview over Wifi when testing with the CocoonJS launcher, which helps speed up testing cycles significantly. Just enter the preview URL in to the Launcher app's URL field, e.g. http://192.168.1.3:50000/.

Compatibility

The following features are not supported in CocoonJS. If any of them are used, Construct 2 will print a message to the debug log saying that they are not supported.

- The form control plugins Textbox and Button are not supported.
- The XML object is not supported.
- The Facebook object is not supported.
- The letterbox fullscreen modes are not supported. If they are selected, it will fall back to 'Scale outer' mode instead.
- The Text plugin's 'Set web font' action is not supported.
- The WebStorage plugin's session storage is not available. Use local storage or global variables instead.

Using the Cloud Compilation system

Once you've tested your game with the launcher and are happy that everything is working, you can go ahead and build it. Ludei provide the Cloud Compilation system, which is where you upload your app to Ludei's servers which build it in to Android and iOS native apps.

To find out more about this process, it is best to use Ludei's documentation. Visit this URL to get started using the Cloud Compilation system:
http://wiki.ludei.com/cocoonjs:cloud

And best of luck publishing your iOS and Android apps!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

5
Anonymous1 3,311 rep

Thanks for the tut! I haven't played around with this yet, but it looks simple enough that anyone should be able to test their products!

Will the future packaging still require the CocoonJS launcher or will we be able to build our own Launchers that have the wrapper built in and allow us to put it on Google Play?

Monday, May 14, 2012 at 3:40:18 PM
5
Ashley 201.9k rep

@rdephillip I'm sure Ludei will add a feature to allow you to play your game like a native app, without having to use the launcher.

Monday, May 14, 2012 at 3:50:33 PM
15
ludei 3,616 rep

Hello Play Construct developers,

Ludei is working to provide a cloud based compilation system so you can get the final xarchive and APK files to upload to the markets. It will be available soon. Stay tuned on our blog and follow us on twitter (@ludei).

You can also try the CocoonJS Launcher app for iOS following this tutorial: http://blog.ludei.com/installing-the-cocoonjs-launcher-in-ios/

Hope it helps.

Regards,
Ludei

Friday, May 18, 2012 at 1:28:57 AM
1
Kamal 2,406 rep

CocoonJS FC on my HTC hero,does it support this device?

Comment by ludei

Hello Play Construct developers,
Ludei is working to provide a cloud based compilation system so you can get the final xarchive and APK files to upload to the markets. It will be available soon. Stay tuned on our blog and follow us on twitter (@ludei).

You can also try the CocoonJS Launcher app for iOS following this tutorial: http://blog.ludei.com/installing-the-cocoonjs-launcher-in-ios/

Hope it helps.

Regards,
Ludei

Friday, May 18, 2012 at 5:22:17 PM
3
brusacco 2,198 rep

Can only try this on the paid version of Construct2?

Friday, June 22, 2012 at 1:44:50 AM
3
PepperredPenguin 2,524 rep

I just tried with my game and OMG it got a HUGE boost. from 5 fps to 55!

Tuesday, July 17, 2012 at 4:22:23 PM
3
slw666 3,475 rep

PepperredPemguin: What phone are you testing on? Cheers

Friday, July 27, 2012 at 12:35:51 PM
3
ayster 2,999 rep

works great on my Toshiba Thrive Android 3.2 tablet, massive fps boost. Would love a simpler publishing option though (like a native app or something)

Monday, August 06, 2012 at 2:34:43 PM
3
Hillstrom 4,593 rep

This sounds like was asked before but.. Which gives more speed ups? Appmobi's Direct Canvas or CocoonJs acceleration? Or maybe both gives the same results once they break the limitations of the default IOS browser?

Tuesday, August 14, 2012 at 4:31:55 PM
2
roboteka 16.3k rep

Thank you, a great tutorial.

Wednesday, August 15, 2012 at 7:51:59 AM
3
bjadams 7,464 rep

Does C2 support Cocoon features like Camera, etc ?

Monday, September 03, 2012 at 3:20:59 PM
3
Hillstrom 4,593 rep

Cloud compilation.... This will blow many heads out!

Monday, September 03, 2012 at 3:52:44 PM
3
zack2029 7,748 rep

Thank you, awesome stuff.

Monday, September 03, 2012 at 4:00:42 PM
5
sqiddster 32.8k rep

This is great! I'm wondering, however: Why isn't letterbox scale supported? In my opinion, this is the most powerful of the fullscreen options, and it's a shame to lose it.

Monday, September 03, 2012 at 5:09:39 PM
3
jogosgratispro 23.4k rep

Pretty awesome tutorial!

Monday, September 03, 2012 at 6:26:29 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.