How to make native phone apps with Construct 2 and PhoneGap

1

Stats

38,356 visits, 64,255 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

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.

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:

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.

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. Note that if publishing with PhoneGap Build, Construct 2 automatically uses Crosswalk if the minimum Android OS version is below 5.0. If the minimum version is 5.0 or above, the Android system web view is good enough to run games without Crosswalk, which also helps reduce the download size of the APK.

Publishing options

Here are some of the ways you can build Cordova apps:

Construct 3's mobile app build service, which you can also use to build projects exported from Construct 2

PhoneGap Build, run by Adobe

Cordova CLI, for advanced users to build locally

Building with Construct 3

For more information on how to build Construct 2 Cordova exports with Construct 3, see the tutorial Using C3 to build C2 mobile exports.

Building 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.

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 Build 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!

Building with the Cordova CLI

For more information on how to build Construct 2 Cordova exports with the Cordova CLI (Command-Line Interface), see the tutorial Building mobile apps locally with Cordova CLI.

  • 3 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Hello,Do you have full tutorial on building the IOS native apps?

    Im struggling find the tutorial moreover for the latest version of construct 2.

    We need the latest tutorial

    • im recently developing IOS app via construct 2 to phonegap. But the app is always force closed when i open it. It opens and show cordova logo and force close.

      I think that's because of the config.xml file. Do you have the config.xml file that's really works? Also has been include Ultimate ads plugin inside

      Thanks blush

  • What Does Download Cordova?