Translations

Know another language? Translate this tutorial!

Stats

8K visitors
29.5K page views
203 translation visitors
271 translation page views

Offline games in Construct 2

Favourite 64 favourites
Tutorial written by AshleyOriginally published on 24th, October 2011 - 10 revisions

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 will not work and you will be wasting bandwidth! Some servers assume it's a text file and use the MIME type text/plain, but that will not work either! The MIME type must be text/cache-manifest. If you're not sure how to set this up, ask your host or whoever runs your server.

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.

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

5
Jailson 12.1k rep

Nice tutorial @Ashley! It's more clear now. Before reading this I didn't even know that HTML5 games could be played offline so easily!!!

I was also wondering what was the utility of the auto generated offline.appcache file!

Monday, October 24, 2011 at 3:05:18 AM
0
gammabeam 12.6k rep

Great tutorial! Weird I didn't find it before!

Tuesday, January 24, 2012 at 11:16:55 AM
-1
shamma 2,076 rep

great tutorial,but can i create a facebook multiplayer game using constract2,please i need an answer

Wednesday, February 22, 2012 at 8:19:03 PM
0
thiago 3,983 rep

Comment by shamma

great tutorial,but can i create a facebook multiplayer game using constract2,please i need an answer
You can start here http://www.scirra.com/tutorials/58/how-to-make-a-facebook-game

Tuesday, April 03, 2012 at 5:42:32 PM
0
iggyvolz 2,188 rep

"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 will not work and you will be wasting bandwidth! Some servers assume it's a text file and use the MIME type text/plain, but that will not work either! The MIME type must be text/cache-manifest. If you're not sure how to set this up, ask your host or whoever runs your server."

So, how do I do this? I use DropBox, do I have to ask them, or is it something I need to do to the file?

Sunday, April 15, 2012 at 8:23:07 PM
1
Ashley 112.5k rep

@iggyvolz, DropBox have already set the right MIME types so there's no need to worry there.

Sunday, April 15, 2012 at 9:08:20 PM
0
Index 6,811 rep

If there's an update to the offline.appcache, will the ENTIRE project redownload to capture the update?

Saturday, July 07, 2012 at 3:30:38 AM
1
Ashley 112.5k rep

@Index - no, the browser will do a normal update, where it checks if each file has changed before downloading it. So if you change 1 file and update offline.appcache, that tells the browser to check with the server for file updates, then it will see only 1 file changed and only download that.

Saturday, July 07, 2012 at 2:04:17 PM
0
liquidskin 2,215 rep

Is it possible to set it that after the first load of files the browser will automatically keep the local copies up to date as they change. Then when you do not have a network connection, your web browser will automatically switch over to the local copies instead.

Thursday, August 02, 2012 at 7:01:27 PM
0
Ashley 112.5k rep

@liquidskin - isn't that how it works already?

Thursday, August 02, 2012 at 7:31:05 PM
0
liquidskin 2,215 rep

@Ashley - my projects files are in my dropbox public folder.. after loading it in my safari and adding it to home screen on my iphone then repeatedly re-opening it does not use the local cache but instead it reloads. Eventually, my game got cached after a few tries. Do i need to load the cache manifest file manually to have instant results?

Also I think there is a bug in tiled backgrounds when the "full screen to browser" is set to scale. The edge of the background image flickers.

Thursday, August 02, 2012 at 8:04:38 PM
2
Ashley 112.5k rep

@liquidskin - the browser might still be busy caching the game after it starts running, and it will cancel the caching if you reload the page before the background task is done. If you load the game for the first time then play through it, by the time you're done it should have finished caching and reload instantly. I would guess you're reloading before the caching has finished.

Thursday, August 02, 2012 at 9:00:32 PM
0
liquidskin 2,215 rep

@Ashley Thanks!!

Thursday, August 02, 2012 at 9:25:21 PM
0
kenli 6,393 rep

Useful Manual, thx :)

Sunday, October 07, 2012 at 12:43:05 PM
0
vmars316 2,130 rep

Thanks Ashley ,
Once I get a game running offline on my computer ,
Could I just zip it up and provide the zip file to other users for their offline play ?
..vm

Saturday, April 06, 2013 at 12:47:49 AM

Leave a comment

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