Making an iOS web app with Construct 2

Favourite 61 favourites
Tutorial written by AshleyOriginally published on 20th, July 2011 - 17 revisions

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)
iPhone 5: 640x1136 (slightly taller than the iPhone 4)
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.

You can also try enabling Hide address bar in Project Properties to increase the size of the screen on iPhones. Unfortunately iPads have a fixed address bar so this option won't work on them, but they don't have such small screens anyway.

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.

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

- Performance is good. On iOS 5+, Safari is a high performance browser for HTML5 games. You can get good framerates even when added to the home screen.

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.

- Audio won't play until the first touch. However, this is not usually very important and can be easily worked around with a "touch to begin" screen that plays a sound when you touch it.

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 exporting for PhoneGap, directCanvas or CocoonJS.

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

2
harrio 12.7k rep

how can you make your own icon for the 'home screen' app in ios?

Thursday, July 21, 2011 at 8:48:46 AM
3
Tom 36.2k rep

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.

Thursday, July 21, 2011 at 9:09:38 AM
0
harrio 12.7k rep

does that grab an icon from scirra, or does it let us create our own?

Thursday, July 21, 2011 at 10:41:51 AM
3
Tom 36.2k rep

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.

Thursday, July 21, 2011 at 10:49:59 AM
1
harrio 12.7k rep

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.

Thursday, July 21, 2011 at 11:29:21 AM
0
Tom 36.2k rep

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

Thursday, July 21, 2011 at 11:56:47 AM
1
gammabeam 12.5k rep

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

Wednesday, August 31, 2011 at 5:27:34 PM
0
harrio 12.7k rep

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?

Saturday, September 03, 2011 at 11:34:52 PM
0
shinkan 14.7k rep

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?

Monday, September 05, 2011 at 8:17:12 PM
0
TheMann 2,056 rep

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

Saturday, October 08, 2011 at 6:07:03 PM
0
TheMann 2,056 rep

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?

Saturday, October 08, 2011 at 6:15:57 PM
0
techdojo 2,231 rep

@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?

Wednesday, October 19, 2011 at 3:10:21 PM
0
Tsubasa 2,079 rep

nice tutorial ..

some thought of mine already answered by this post.

Monday, January 16, 2012 at 8:59:38 AM
0
gammabeam 12.5k rep

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?

Sunday, January 22, 2012 at 9:02:51 PM
0
Ashley 112.1k rep

@gammabeam it works on my iPad, did you 'Add to home screen' from the menu or did you somehow just add a link?

Sunday, January 22, 2012 at 10:58:13 PM

Leave a comment

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