Hello guest! Login or Register

Making an iOS web app with Construct 2

25 votes

Did you know iOS supports web apps - apps that are installed from a web page, rather than from the App Store? They'll even keep running after going offline! You can add them to your Home screen as well, so they work very similarly to native apps. Here's how to make them with Construct 2.

Make your game


First of all, you need to develop your game. Some things to bear in mind are:

- Mobile devices (iPhones, iPads etc.) generally have weaker hardware. This means they'll run slower than your PC. You should avoid using too many objects or events in case it runs too slowly on the devices.

- You'll be dealing with different viewport sizes. iPhones and iPads have different display sizes. Here are the screen resolutions of different iOS devices (given in portrait orientation):

iPhone 3 and earlier: 320x480
iPhone 4+: 640x960 (each pixel on a iPhone 3 screen is four pixels on an iPhone 4 screen - the screens are the same physical size)
iPad 2 and earlier: 768x1024
iPad 3+: 1536x2048

How to handle different screen sizes


You should make sure your game works for those different screen sizes. There's another tutorial covering this: Supporting multiple screen sizes

Using the Touch object


The iPhone and iPad all use touch screens. To get touch input, drop in the Touch object and set up some touch events. One easy way to control the game is to have some controls on-screen using some sprites, and detect touches on those sprites with the Touch object's On object touched and Is touching object conditions. There's more information in the tutorial on on-screen touch controls. Testing is also a lot quicker if you preview on a local network.

Export and upload


Export your project, and upload your files to a server. We've got a simple test app uploaded at http://www.scirra.com/labs/webapptest/ - it just tiles a texture over the screen and displays the WindowWidth and WindowHeight expressions. Not very exciting, but it might be useful for your testing!

Using your app on iOS


To use your app, visitors simply need to visit the URL in the Safari browser on their device.

Once there, tapping the menu icon shows a button Add to Home Screen. A custom name can be entered, and then it's on your home screen next to all the other apps! Congratulations, your app is "installed"! (Really, it's just a short-cut to the web page). However, thanks to Construct 2's offline support, the web app will keep running even after the user goes offline, just like a real app! See the tutorial on Offline support in Construct 2 for more information.

Note about window size


While your app is showing in Safari, the window size will be a bit smaller, because Safari will have some buttons at the top and bottom of the screen. Once you've added the app to the home screen though, it will launch in true full-screen - the buttons at the top and bottom will be gone. So it's a good idea to encourage your users to Add to Home Screen!

iOS 5


iOS 5 can run HTML5 games with good performance. However, older versions of iOS aren't so fast. Make sure you and your users are using iOS 5 or newer to get the most out of your web app!

Advantages and disadvantages


Web apps are a fairly little-known alternative to making App Store (native) apps on iOS. Here's a brief comparison.

Advantages


- You don't need an iOS developer subscription! Apple charge iOS developers $99 a year to allow them to make App Store apps. Web apps can be made for free!

- Apple can't reject your app! Apple are infamous for rejecting people's iOS apps that they already worked hard on. Also, they sometimes make it difficult for you to update an existing app. Web apps live on the internet, which Apple doesn't control. So you're free to publish and update your apps unrestricted!

- You don't need a Mac! You can do it all on Windows with Construct 2.

- They work offline! Thanks to Construct 2's offline support, the app will keep running even after the user goes offline - just like a real app.

- You can use your own payment system! The App Store prevents you taking payments yourself. You have to use Apple's payment system from which they take a 30% cut. With web apps you can set up your own payment system direct with customers and take all the profits without any cut at all going to Apple.

Disadvantages


- You can't sell or promote your app on the App Store. Your web apps basically have to be free, and you'll have to find a way of telling users about them other than through the App Store.

- Web apps might be a little slower. Web apps are made with Javascript and HTML5 canvas. This might be a bit slower than native apps. However, iOS 5 closes up the gap considerably, and be fast enough for most games to run just fine.

Conclusion


Web apps are an interesting alternative to publishing apps on the App Store. It's cheaper and easier, but obviously they don't get listed in the App Store.

If you'd like to try making iOS native apps, you can try the new experimental support for PhoneGap. However the process is a lot more complicated than setting up a web app.

Total of 12 edits. Last edit by Ashley on 06 May 2012 4:38 AM
Posted by

1
harrio (3.8K) Thursday, July 21, 2011 at 8:48:46 AM
how can you make your own icon for the 'home screen' app in ios?
1
Tom (11.9K) Thursday, July 21, 2011 at 9:09:38 AM
If you add in the line:

<link rel="apple-touch-icon" href="http://static3.scirra.net/images/favicon_apple.png" />

Into the header section of the HTML page it should add it as a home screen icon.
0
harrio (3.8K) Thursday, July 21, 2011 at 10:41:51 AM
does that grab an icon from scirra, or does it let us create our own?
1
Tom (11.9K) Thursday, July 21, 2011 at 10:49:59 AM
You can create your own and change the href, I just did the Scirra one as it's the one we use on this website. If you add this website to your home screen, it should add the icon, is that what you meant?

It would be good to have this as a project setting along with a normal favicon, I'll suggest it to Ash.
1
harrio (3.8K) Thursday, July 21, 2011 at 11:29:21 AM
i meant setting our own icon.

so we just have to change the href to show a location like dropbox, or our own server location or even a pic on google/picassa, and it will use that pic for the icon?

do you know what is the biggest size we can make the icon graphic for clarity?

this is great info, and yes, making it a project setting would be awesome, especially the ability to use our own custom icon.
0
Tom (11.9K) Thursday, July 21, 2011 at 11:56:47 AM
Yes that's correct, set the href to a publicly accessible URL which serves the PNG file.

You can set the icon per device, or just have a single one, see this page for more information:

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/configuringwebapplications/configuringwebapplications.html

This page shows the different sizes:

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

57x57 looks standard,114x114 for high resolution and 72x72 for iPad
1
gammabeam (8.4K) Wednesday, August 31, 2011 at 5:27:34 PM
I'm at work right now so I can't test it, but would it be possible for me to add an advertising banner on my C2 web app? I mean, like a Google AdSense banner...
0
harrio (3.8K) Saturday, September 03, 2011 at 11:34:52 PM
so, to deal with different screen sizes would this be appropriate; in an 'on start of layout' event - check for windowheight, and according to that height we can setup our background image, layout/sprite positions and sizes?
0
shinkan (5.2K) Monday, September 05, 2011 at 8:17:12 PM
Is it possible to test games on IOS without putting it on a web first? Something like, connect your iPhone to pc, copy game folder and run it?
0
TheMann (129) Saturday, October 08, 2011 at 6:07:03 PM
@Shinkan, the short answer: no.
but if you are just worried about throwing it out on the web too early, you can test it all locally:
you can set up a basic web server on your DEV computer, then you can access that computer from your iPhone and test it that way (this is how I do my testing).
It's not a bad idea to make a local server that does get relayed to the internet, in case you want friends to test their devices.
Setting it up is another story, but this should get you in the right direction.
0
TheMann (129) Saturday, October 08, 2011 at 6:15:57 PM
I am trying to make a iOS friendly game, but making the layer size dynamic to the screen size.
I only see how to scale the whole layer, not layer's X and Y.
Any suggestions?
0
techdojo (218) Wednesday, October 19, 2011 at 3:10:21 PM
@Shikan - Alternatively grab a dropbox account and copy the folder over to your public folder - if you don't tell anyone the link the chances of someone finding it by accident are VERY remote!

Also has anyone tried taking the exported project and running it through something like phonegap or one of the other html wrapping systems that converts web apps to native ones.

The guys at LostDecade Games apparently ported Onslaught Arena to a native Mac app just by including the web project into an Xcode project that simply showed a local webview

Food for thought?
0
Tsubasa (280) Monday, January 16, 2012 at 8:59:38 AM
nice tutorial ..

some thought of mine already answered by this post.
0
gammabeam (8.4K) Sunday, January 22, 2012 at 9:02:51 PM
I've decided to try this Web App now that Preview on LAN is available, and I couldn't turn it into a full screen App.

When I tap the icon on my ipad, the safari tab is visible.
Tried both in scale & crop modes.

What could I do? Am I forgetting something?
0
Ashley (48K) Sunday, January 22, 2012 at 10:58:13 PM
@gammabeam it works on my iPad, did you 'Add to home screen' from the menu or did you somehow just add a link?


You need to Login to post a comment!
Login to your account, or register a new account