Offline games in Construct 2

Construct 2 games work offline. So long as the game has been downloaded once while online, the user can play the game again after going offline. This is great for both iOS web apps and Chrome Web Store hosted apps, since you don't need to be online to play! This tutorial describes how the offline support works and how you can enhance it with features like auto-update.

The App Cache file

After exporting your project, you should notice a file called offline.appcache in the exported folder. This enables offline support. It's pretty much a list of every file the game uses, so the browser can save it all to disk.

It's important to note when you upload your project, some servers are not set up to serve .appcache files correctly. Your server must be set up to serve .appcache files with the MIME type text/cache-manifest. It's important to have the right MIME type or the offline support may not work and you will be wasting bandwidth! This is described in more detail along with other MIME types you may need to set up in the manual entry on server MIME types.

If everything is set up right, the browser will save your entire game to disk after loading it for the first time. After that, if you load the game again, it loads from disk. Nothing is downloaded at all! Usually that means the game loads instantly as well. This means even if you're offline, you can still load the game and play. Your imported project files are cached for offline use, too.

Note: if you rename your index.html file - even just to change the extension, e.g. index.php or index.asp - make sure you also change the line with index.html in offline.appcache. Browsers are very fussy. If offline.appcache says index.html, and the browser cannot find it because you renamed it, it will ignore the entire offline.appcache file! That will stop your game working offline, so remember to update it if you rename index.html. You can open offline.appcache in Notepad or any other text editor.

Updating your game

You might wonder: if the game is always loaded from disk, how do you update your game?

If you're online and you load the game, the browser loads from disk instantly as before. However, as the game is running, it checks for an update in the background. If you've uploaded a new version, the browser downloads it and saves it to disk. Then, next time you load the game (this includes refreshing the page), the browser loads the new version. Until then, the user keeps playing the old version.

The Browser object has two conditions to detect this happening: Is downloading update and On update ready. Is downloading update is true if the browser is downloading a new version in the background. The system expression loadingprogress is also set to the update progress from 0 to 1, e.g. 0.5 for half complete. On update ready triggers when the download has finished, and the new version is ready to be loaded. If this triggers on the game's title screen, you might want to prompt the user to reload the page (using the Browser's 'reload' action) so they're playing the latest and greatest version. However, you probably don't want to interrupt them mid-game!

This allows you to easily make a simple auto-updater for your game. You could show a text object saying "Downloading an update..." to notify the user an update is being downloaded. When On update ready triggers, you might want to show a message saying an update is ready, and display a button which reloads the page when clicked.

Remember to re-upload the offline.appcache file

If you're updating even just one file of your game, you must also re-upload the exported offline.appcache file - every time! Otherwise the browser will assume nothing has changed and won't bother downloading the update. (The offline.appcache file must have changed for the browser to check for an update, and Construct 2 adds a timestamp to the top of the offline.appcache file to ensure it always changes.)

Other useful features

The Browser object has three other useful conditions: is online, on went online and on went offline. With these, you can tell if the user is currently online, and detect if they come online and go offline during the running of the game. This might be useful to enable and disable any online features like the AJAX object.

Conclusion

Make sure your offline.appcache file is working on your server. Then, drop in the Browser object to your game and use the update checking events. Now you have a game that works offline and auto-updates whenever the user is online. This is very simple to set up, but very useful! Be sure to add support to your games!

For further reading, you may want to consider using loader layouts to make a custom loading screen.

  • 1 Comments

  • Order by
Want to leave a comment? Login or Register an account!