How to export to mobile with Cordova

Favourite 87 favourites
Tutorial written by AshleyOriginally published on 28th, October 2011 - 19 revisions

Construct 2 supports exporting your games and apps to major mobile platforms with Cordova. Cordova is an open-source software library that allows HTML5 games and apps to be published as native apps. It is the library that powers PhoneGap Build, the Intel XDK and Ludei's Webviews. These build services save you from the hassle of setting up your own development environments for each platform, allowing you to easily build for multiple platforms at once.

Building iOS apps

You need to be registered with Apple as an iOS developer to build iOS apps at all (using any exporter). This costs $99/yr and requires access to a Mac. There are more instructions in How to become an iOS developer.

Supporting multiple screen sizes

Different devices have different sized screens. Construct 2 has some features to help you get your game working well on different devices - see Supporting multiple screen sizes.

Test first over Wifi/LAN

Publishing can be a fairly lengthy process if you just want to test your game. During development, it's a lot quicker and easier to preview on a local network. You can use the browser on your mobile device to get a good idea of how it will work.

You must test on a real device during development! Your desktop computer is probably 10-100x as powerful as a mobile device. To save yourself nasty surprises, make sure you test regularly on a real device all the way through development to ensure your game does not run too slowly on the device.

Exporting for Cordova platforms

The Cordova export option works with any Cordova-compatible platform, which includes PhoneGap Build, the Intel XDK, and Ludei's Webviews. The one Cordova export option covers all these platforms.

Before exporting, make sure your project has the appropriate details filled out in Project Properties, such as the author and app ID (e.g. com.scirra.spaceblaster). Then, in the Export Project dialog, choose the Cordova option and click Next. After the normal export options, the Cordova options dialog appears:

Cordova options dialog
Supported devices allows you to select whether the app is for handsets only, tablets only, or both (universal). It's strongly recommended to export universal apps. Providing your game properly supports multiple screen sizes most games should run on both handsets and tablets without modification.

Hide status bar if enabled will hide the status bar at the top of the screen, making more room for the game display.

Permissions is where you select which permissions your app will require. Using fewer permissions improves the user's trust in your app, but some features require particular permissions to be enabled to work. In particular:
Geolocation must be enabled for the Geolocation plugin to work.
Camera must be enabled for camera access with the User Media object to work.
Vibrate must be enabled for the Browser object's 'Vibrate' action to work.
Media must be enabled for audio input such as speech recognition or microphone input with the User Media object to work. Enabling Media also allows audio playback to work on Android 4.4 and older (without it, no audio will be heard), but the app will still state that it needs permission to access the device microphone.

You can choose which set of audio files to export in case you want to only target a single platform. Since there is not one audio format that plays everywhere, Construct 2 dual-encodes all audio in to two formats to cover all platforms. If both files are included, it can unnecessarily increase the download size. If you are only publishing for iOS or Windows Phone, you only need the .m4a files; otherwise for any other platform you need the .ogg files.

You can also choose the Minimum supported OSs for your app. This is important since older phone OSs can have very poor support for Cordova apps. For iOS it's strongly recommended to require iOS 8.0+, since performance is considerably improved over older versions. For Android it is recommended to export with Crosswalk for best performance and features on Android 4.0 and above. If not using Crosswalk, Cordova apps will only run well on Android 5.0 and above.

Publishing options

Here are some services which can build Cordova apps:

PhoneGap Build, run by Adobe
Intel XDK, run by Intel
Ludei CocoonJS, run by Ludei (note that Canvas+ does not support Cordova, only the Webview platforms)

For Android, it is recommended to export with Crosswalk using the Intel XDK.

Publishing with PhoneGap Build

If you want to publish using Adobe's PhoneGap Build service, visit PhoneGap Build and create an account.

PhoneGap won't build any iOS apps until you upload your iOS developer details. See How to become an iOS developer for more details.

Select all the files in the exported directory. Right-click them and add them all to a .zip file.

Zipping the files for PhoneGap Build.
Rename the zip file to something like app.zip.

In PhoneGap Build, create a new app. Be sure to use the Upload a .zip file option. Select your app.zip file and upload.

Wait a while for the file to upload. PhoneGap will then start building your apps! The page will automatically update the build status and tell you when they are ready. Errors may occur if you haven't set up your developer details for particular platforms, particularly iOS (where it cannot build at all until you've provided your details).

Now you can download the compiled apps for each phone system to your computer, and transfer them to your phone. You can drag and drop iOS .ipa files to iTunes and sync them to your devices for testing. Alternatively you can scan the QR code that PhoneGap Build displays and the device will download the app directly.

Now you have your apps ready to submit to the various app stores!

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

0
Andrex 3,668 rep

"- Android does not support multi-touch yet. Android 4 (Ice Cream Sandwich) should be released soon and ought to correct this."

I believe Android has had multitouch since 2.0, might be an issue with Phonegap itself.

Saturday, October 29, 2011 at 3:19:25 AM
7
Ashley 140.0k rep

@Andrex, Android does support multitouch but unfortunately not in its browser, which is still used to power PhoneGap apps. Apparently Android 4 fixes that!

Saturday, October 29, 2011 at 3:21:23 AM
0
Andrex 3,668 rep

@Ashley Ah OK, didn't think about the WebView.

I didn't even know it was possible to use multitouch in Construct.

Saturday, October 29, 2011 at 8:47:39 AM
0
AlexmosuTSP 2,488 rep

Worked for me, no sound though. I used my HTC Desire with Froyo.
It compiled well for Android, WebOS and Symbian, but failed for Blackberry.
Nice.
Looking forward to this feature working 100%.

saludos :D

Saturday, October 29, 2011 at 10:35:34 PM
0
PixelAmp 4,448 rep

Unless it has changed, one of the primary causes of failure for building on BlackBerry is that since it is passed through WebWorks, it doesn't allow for dashes in the file name. I love that Scirra has chosen PhoneGap Build as I use it in other applications and it has been relatively stable so far. Great work!

Monday, October 31, 2011 at 6:36:03 PM
3
Havok 3,364 rep

Fantastic feature!
You guys are poised to make Construct 2 have a very bright future if you guys keep this up.
Well don!

Thursday, November 03, 2011 at 8:46:44 AM
0
sqiddster 29.9k rep

You note that the PhoneGap apps are powered by the browser - what sort of performance limitations does this cause?

Saturday, November 05, 2011 at 10:06:44 PM
-1
ludodesign 24.8k rep

Dont work for me =(
every app same error in Android

Tuesday, November 22, 2011 at 5:46:41 PM
0
Tokinsom 12.7k rep

Tried this out with Bumper's Quest on an android phone. Got ~2fps but uh..hey it worked nonetheless :P

Monday, December 19, 2011 at 3:06:25 PM
0
zapmore 3,025 rep

Works well on Samsung Galaxy S, android 2.2. people, don't forget the part in the tutorial "ID must be a string in the form com.companyname.productname, e.g. com.scirra.spaceblaster." or else the install will fail, at least on android.

Sunday, February 19, 2012 at 6:50:43 PM
0
forzaerdal 2,402 rep

I have tried to upload my game with phone gap build. It say file is too large. My game only 11 mb..What is the file size limit for phone gap?

Friday, February 24, 2012 at 11:18:09 AM
0
Go2Holidays 2,223 rep

There appears to be a 10mb limit on PhoneGap filesizes. You simply have to trim your game size down a bit to fit.

Friday, February 24, 2012 at 11:34:35 AM
0
mina 12.1k rep

Great :) but the file size limit is too low, so is it possible to increase it in the future?

Sunday, February 26, 2012 at 12:34:46 PM
1
Ashley 140.0k rep

@mina, you'll have to ask PhoneGap Build, we don't have any control over their service!

Sunday, February 26, 2012 at 2:34:05 PM
0
mina 12.1k rep

@Ashley
Thank u, I thought its a common issue between both sides. so is the sound problem also under their control?

Thanks again 4 ur quick reply.
Have a nice day :)

Monday, February 27, 2012 at 7:33:25 AM

Leave a comment

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