How to make native phone apps with Construct 2 and PhoneGap

Favourite 66 favourites
Tutorial written by AshleyOriginally published on 28th, October 2011 - 15 revisions

Note: Games published for iOS and Android using PhoneGap can be very slow. For these platforms we recommend using Crosswalk for Android and CocoonJS for iOS instead.

Construct 2 supports exporting your games and apps in a format that can be used by PhoneGap. PhoneGap provide a way of building HTML5 games and apps as native phone apps. They also provide the PhoneGap Build service which can build native phone apps for iOS, Android, Symbian, Blackberry, webOS and Windows Phone 7! This saves you from the huge amount of hassle of setting up your own development environments for each phone system. You can simply upload your project, wait a moment, then download the apps that PhoneGap Build has built.

Although it's possible to build "manually" via downloading and installing various SDKs, this is extremely time consuming and complicated compared to PhoneGap Build, and the resulting app would be identical. Unfortunately Scirra cannot offer support for users who try to build with the SDKs directly, so we highly recommend using the PhoneGap Build service.

Building iOS apps

You need to be registered with Apple as an iOS developer to build iOS apps, even with PhoneGap. This costs $99/yr and requires access to a Mac. There are more instructions in How to become an iOS developer.

You might also want to consider making iOS web apps: they work very similarly to native apps, but are much simpler to set up. You don't need to be an iOS developer to make them!

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

Exporting to PhoneGap is 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 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.

Sign up for PhoneGap Build

Visit PhoneGap Build and create an account. For now it is free.

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

Export your game for PhoneGap

Make sure your project has an appropriate description set in Project Properties. Then, in the Export Project dialog, choose Export for PhoneGap.

Exporting for PhoneGap
Click Next. The PhoneGap options dialog appears:

PhoneGap options
ID must be a string in the form com.companyname.productname, e.g. com.scirra.spaceblaster. If you're making an iOS app, this must match what you entered when creating the App ID.

You can also enter your author details, limit the orientations supported, and limit it to either tablets (like the iPad) or handsets (most mobile phones). However, it's best to support both orientations and all devices (universal) if you can.

When you're done click Export! Construct 2 exports your files to a folder as usual, but with an extra config.xml file which is for PhoneGap.

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,508 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
2
Ashley 112.1k 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,508 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,176 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
0
Havok 3,059 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 26.4k 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 22.5k rep

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

Tuesday, November 22, 2011 at 5:46:41 PM
0
MadFactory 12.2k 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 2,874 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,198 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.0k 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
0
Ashley 112.1k 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.0k 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.