HTML5 to native Apple App Store / Android Google Play in one click with

When you want to publish your HTML5 games on the most popular mobile stores, like Apple App Store or Google Play, you have two main choices: Ludei or Cordova.

They are wrappers which basically crate a virtual environment where HTML pages and JavaScript run like we are used to see in our browsers. This way you can easily make your HTML5 game (which is all in all a series of JavaScript scripts) be transformed into a native app, which actually is a native virtual environment where your JavaScript runs.

If you think you just have to run a couples of command-line instructions to make things work, you are wrong.

In order to create your apps this way, you will need to install – and keep updated – on your computer both Android Studio and XCode.

Having both these tools installed on your computer – which should be a Mac since XCode is not available on Windows machines – is the best way to have complete control of your settings, but has the drawback of having to deal with updates, virtual devices, and a series of things which can be avoided with cloud compiling. shouts on its home page you can do it in one click, becaise it provides all the tools and services to build awesome native HTML5 apps and games with a simple workflow and all the power of Cordova.

I tried the service and… they are right. This is the project page of Ladderz, the game with the available source code at this page.

The same game which you can find where I give the source code has been zipped and uploaded to, and after a couple of minutes I got the .apk and .ipa files ready to be published on their respective stores.

Providing a complete step by step tutorial about the process of conversion is beyond the scope of this post and will be analyzed during next posts, because I want to jump straight to the main question people ask when dealing with HTML5 and mobile phones. PERFORMANCES, PLEASE.

You can download the Android Ladderz game and see it by yourself or even better you can test your own projects installing the Developer app on your devices and play with it.

The developer app is a mobile native app to ease the development and debugging process of a Cocoon project. This application is created in the project settings and it will have the same configuration as the project has at that very moment: plugins, icons and splashes and preferences. It will allow the developer to test the source under the same circumstances the final compilation would use.

I used for the porting of Ladderz for both Android and iOS devices and I was able to compile them and add one plugin in a matter of minutes. It took me more time to take the screenshot when it came the time to submit the game to the stores – I am serious.

I made everything on an ordinary Windows computer with no kind of any SDK installed, thanks to the power of cloud compiling.

Obviously this comes with a price.

I am using the free plan which allowed me to completely manage Ladderz game – with plugins if needed – and lets me have two projects simultaneously… this means you can delete your old projects (which you can create again if needed) to make room for new projects, this way the real limitation would br the 50MB max project size, which can be raised to 250MB – with 10 projects simultaneously – for as low as $8/month, which is the plan I recommend to start with.

Well, that’s all at the moment, I found useful, got my app published and everything worked like a charm, so give it a try and let me hear your thougts.

  • Thanks for the article. Why Cocoon and not PhoneGap? Apparently they do the same thing, with PhoneGap also exporting for Windows phone. Is there a reason?

    • Emanuele Feronato

      Just testing it, will test them both

    • Cocoon have improved performance. I have 5 fps in Chrome on my old Nook tablet. Cocoon game have normal fps on same tablet.

      On other side, Cocoon APK have bigger size, because it have own engine for Canvas and HTML rendering

      • Emanuele Feronato

        not THAT bigger anyway.

  • Arwin

    Nice job Emanuele! I tried cocoon too, But I’m having problem with ads. Can you give a fresh tutorial for example heyzap? Everytime I add ‘Cocoon.Ad.Heyzap.configure({publisherId: “myheyzapid”}); or any ‘Cocoon’ codes I get the error when I test the zip file on Cocoon dev app.

  • I’ll be testing the free plan as well to see if I can get my app published. Thanks for the info!