Making an iOS web app with Construct 2

2

Stats

13,629 visits, 22,807 views

Tools

Translations

This tutorial hasn't been translated.

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.

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 also try exporting for iOS with Ejecta.

  • 2 Comments

  • Order by
Want to leave a comment? Login or Register an account!
  • Can you help me? PLEASE?

    I want to try it, but i didn't understand everything, here some questions:

    1. I have to export to? (HTML5/Web Google Apps/ or?...)

    2. What is this server that i have to host my game? I have to buy it? Its for free? Or it just a site?

    • 1. Export your project as HTML5.

      2. There's a site called Netlify that lets you host your games and I think pretty much any HTML5 site for free. I've used it now for like 3 different projects, 2 of which I use on my phone.