How to Make Your HTML5 Game App-Ready

By Andy Harris

Of course, your HTML5 games are really web pages, but you’re going to make them work in a way that also makes them act like apps. You need to do a couple of things. You can add an icon to your game so it appears on the desktop, you can modify the size so the game takes up the entire screen, and you can have your game stored offline.

Manage the game’s screen size

The first thing to consider is the screen size. This is an easy thing to change, but it can have big implications in your game. A game that works fine at one size can be much easier or harder at a different size. You can change the size and position of the game with the Scene object’s setSize() and setPos() functions.

image0.jpg

In general, you’ll find 1024 x 768 and 800 x 600 to be the most commonly used screen sizes. It makes sense to go a little smaller than these resolutions. Of course, if you have a particular device you want to program for, you can simply size your program directly for your device.

After you know the size you want, you can simply use the Scene object’s setSize() method to change the screen to whichever size you prefer.

Remember that for many games, changing the screen size will actually change the gameplay. Also, most input will happen on the actual screen, so think about how large thumbs are, and try to design your game so the user’s fingers don’t obscure any onscreen action.

How to make your game look like an app

There are a couple of wonderful tricks you can do for IOS users. You can design your game so the user can add an icon directly to the desktop. The user can then start the game like any other app. You can also make the browser hide the normal browser accoutrements so your game doesn’t look like it’s running in a browser!

It turns out that both these effects are quite easy to accomplish. Modern versions of IOS already have the capability to store any web page on the desktop. Just view the web page in Safari and click on the Share button. You’ll find an option to save the web page to the desktop.

However, the default icon for a saved app is quite ugly. If you want a nice-looking icon, you can save a small image from your game as a .png file and put it in the same directory as your game. Then you can add this line to your page (in the header), and that image will appear on the desktop when the user saves your game:

<link rel="apple-touch-icon" href="plane.png" />

As an added bonus, the iPhone and the iPad will automatically adjust the image to look like an Apple icon, adding a glassy effect and rounded corners.

image1.jpg

How to remove the Safari toolbar from the game screen

Although your game looks good from the main screen, when the user activates the game, it’s still obvious that the game is part of the web browser. You can easily hide the browser toolbar with another line in the header:

 <meta name="apple-mobile-web-app-capable" content="yes" />

This code will not do anything different unless the game is called from the desktop. However, in that case, it hides the toolbar, making the game look and feel like a full-blown app. As an added bonus, this runs the game in a full-screen mode, giving you a little more room for gameplay.

image2.jpg

Again, this is an Apple-specific solution. There isn’t an easy way to achieve the same effect on Android devices.

How to store your game offline

Now your game is looking a lot like an app, except it runs only when you’re connected to the Internet. HTML5 has a wonderful feature that allows you to store an entire web page locally the first time it’s run. Then, if the user tries to access the game and the system can’t get online, the local copy of the game is run instead.

This is a relatively easy effect to achieve:

  1. Make your game stable.

    Before you can use the offline storage mechanism, you’ll want to make sure your game is close to release ready. At a minimum, you’ll need to be sure you know all of the external files needed by the game.

  2. Build a cache.manifest file.

    Look at the directory containing your game, and create a new text file called cache.manifest.

  3. Write the first line.

    The first line of the cache.manifest file should contain only the text CACHE MANIFEST.

  4. Make a list of every file in the directory.

    Write the name of every file in the directory, one file per line. Be careful with your capitalization and spelling.

  5. Add the manifest attribute.

    The <html> tag has a new attribute called manifest. Use this to describe to the server where the cache manifest can be found:

    <html lang = "en"
      manifest = "cache.manifest">
  6. Load the page normally.

    You’ll need to load the web page once in the normal way. If all is set up correctly, the browser will quietly make a copy of the file.

  7. Test offline.

    The best way to test offline storage is to temporarily turn off wireless access on your machine and then try to access the file. If things worked out, you will be able to see your page as though you were still online.

  8. Check server settings.

    If offline storage is not working, you may need to check with your server administration. The text/manifest MIME type needs to be configured on the server. You may have to ask your server administrator to set this option in the .htaccess file for your account:

addtype text/cache-manifest .manifest