Emanuele Feronato

Talking about Game development, HTML5, iOS and Javascript.

We are using a lot the “cross platform” term when we design a game once and make it run on several devices, each with its own browser. What if you want to turn your HTML5 game into a native iPhone – iPad app?

Today I am showing you how to use Ludei‘s CocoonJS to start with an HTML5 game and end with an iOS native app.

If you want to know more about CocoonJS or other ways to port your HTML5 games into iOS, check my blog posts Turn your HTML5 games into native mobile games with CocoonJS which explains how to run your games in an iOS wrapper app, and From PuzzleScript (or any other HTML5 game) to native iOS (or any other mobile device) using FREE Adobe PhoneGap Cloud service which shows you how to create iOS apps using Adobe PhoneGap.

So, once you created an account with CocoonJS, let’s create a new project from this page:

You will be asked to fill some basic information such as game name, scaling, orientation, and above all the Bundle Id, which must be unique so it’s recommended to use the reverse domain name followed by game name.

Upload the zipped project, select which devices you want to compile it to, then select the wrapper – I found WebView+ to grant the most compatibility – the compile the project.

While the project is compiling, perform your best “everything will be fine” dance. If you are a long time programmer, you should have a “everything will be fine” dance. I have mine since I started burning my first CD-R at 2X speed. 8 out of 10 did not burn correctly, so I had to create an “everything will be fine” dance to wish me luck. But I am sure you know what I mean.

With CocoonJS everything always will be fine, so once you receive an email saying your project has been successfully compiled, go back to your dashboard and download it.

If you are using a Windows computer, that’s where you should stop. Don’t even unzip it or in some cases you won’t be able to complete the process. It happened to me, and to a lot of people according to forum discussion you can find around the web.

Once you have a Mac, unzip the zipped file and open the Xcode project. Obviously, since we are about to create iOS apps, you’ll need Apple Developer keys, certificates and provisioning profiles. If you are new to this, there’s a detailed guide at the post Creation of an iPhone App with Flash and without a Mac (for all Windows lovers). It’s a bit dated but still absolutely working. You will also need to have Xcode installed on your Mac

Once you have your project launched in Xcode with all certificates in their own place – don’t worry about it, Xcode will guide you if you did not install them before you try to compile – plug a device to your Mac and select it. Then you can choose “Archive” to create an .ipa file or “Run” to make it run directly in your device, as a native app.

And that’s it, my reskin of A jumping Block game is running smoothly on an iPhone 5.

Expect it to Apple App Store in a few days, with some more features like ads, and I’ll show you how to monetize your HTML5 games once turned into native apps.