How to make savegames

Favourite 234 favourites
Tutorial written by AshleyOriginally published on 9th, April 2013 - 9 revisions

Construct 2 provides an easy way to make savegames. These allow your players to save the game, then come back later and load it from exactly where they left off. It's important for long games, especially when the levels or stages are lengthy. While it's possible to have a very simple "last level reached" type save using Local Storage, it's usually very difficult to use it save the full state of every last object. The System object Save and Load actions conveniently allow you to do just this, allowing you to easily add sophisticated savegame functionality with very little effort.

Basic savegame support

A simple way to add savegames is just using the system Save and Load actions when a certain key is pressed. For example:

Savegame events
For mobile games you'll obviously need to make a touchable button somewhere instead, but to keep things simple we'll focus on a desktop game.

Savegames are stored on disk by the browser. This means players can switch off their computer or device, come back the next day, and the savegame can still be successfully loaded. Note however savegames are associated with the specific browser. For example, Firefox and Chrome will store savegames separately; if a player saves a game while using Chrome, then switches to Firefox, they will not be able to load that savegame.

Savegames are not saved in the cache. The browser cache is a very much temporary storage that is used to save things like images on web pages without having to re-download them every time, and it's regularly cleared. Savegames don't go there (luckily), they are stored in either WebStorage or IndexedDB, which are permanent storages and are not affected by the user clearing their cache.

Save slots

It's often useful to allow players to have multiple savegames. This is what the save slot allows. Each slot is like a separate file that stores a different save. You could offer the player a set of slots to save to, or allow them to enter their own savegame names.

Note that most browsers have a limit on how much data a web page can save to disk. This is unlikely to be a problem for most games, but if you have a huge number of separate save slots you might hit the storage limit. Offering a limited number of save slots is a good way to ensure you never hit the limit. Appropriate use of the No Save behavior can also help make savegames smaller (see below).

Completed triggers

Saving can take a moment to complete, and the game keeps running in the mean time. Once saving has completed, the System trigger On save complete triggers. Similarly loading can take a moment to finish, and triggers On load complete when done. Note any changes made after the Save action, but before On save complete triggers, may still be saved.

If you try to load from a slot that hasn't been saved to yet, On load failed will trigger. If the user is choosing a save slot to load, you may just want to start a new fresh game in this event.

'No Save' behavior

Anything with the No Save behavior will not be saved, and won't be affected when loading. It is good practice to add the No Save behavior to any static objects, such as scenery and backgrounds. It can also be used on automatically-updated objects like the HUD and text objects which are updated every tick. This won't make any difference to the game, but it makes savegames smaller and faster to save and load, since the unnecessary information is omitted. (It's also necessary to make continuous preview work effectively.)

Changing the project after saving

Savegames should be robust to changes in your project. You should be able to add, remove and reorder various things like variables, behaviors and other objects, and still have old savegames load successfully. Note however anything new you add won't have save data for it, so will not be affected when loading. Also note if you remove anything from the project it won't be able to load again either. You can delete individual instances without affecting savegames, but if you remove entire object types, layouts or layers, they will never be loaded back from a savegame.

Advanced topics

Everything covered so far is enough for most games to easily add a savegame feature. However advanced users may be interested in the following topics which go in to further detail about the savegame system.

Tracking which slots are used

The system save/load actions don't tell you which slots have been saved to. The best way to track this is to store some extra meta-data yourself in the WebStorage object. For example, whenever you save to a slot, also write a WebStorage key that indicates the slot has been saved to. You could add some other metadata like the player name or even a small screenshot of the game as a data URI. Then you can tell which slots are in use from the WebStorage data you've saved. You can perform other operations like resetting or clearing save game data just by adjusting these meta-data keys, such as removing them to make it look like the slot is empty again.

What is and isn't saved

The full state of the game - including instance variables, global and local variables, behavior properties, effects, particles, currently playing audio, etc. - is saved. However there are a few exceptions, hopefully none of which are surprising. The following things are not saved and won't be affected when loading:

- Input state (i.e. mouse position, or whether the player was holding keys or touches)
- AJAX requests
- WebSocket connections
- The XML object
- User Media video or audio feeds
- Facebook login
- WebStorage state
- CocoonJS/Windows 8 state
- Any in-app purchases on any platform
- Anything with the 'No Save' behavior

Using the JSON data directly

In both the On save complete and On load complete triggers, the system SaveStateJSON expression returns a string of all the JSON data for the savegame. Note the SaveStateJSON expression will return an empty string outside of these triggers; the triggers are your only opportunity to access the data directly.

If you have your own server, it's possible to make shared savegames by posting the JSON data to the server with the AJAX object and storing it in a server database. Alternatively some platforms like Windows 8 and Clay.io allow you to store data for the logged in user, where it's shared anywhere they log in. This is a useful for allowing users to take savegames with them wherever they go.

Once you get the JSON string back, you can load the game from it using the Load from JSON system action.

Versioning

Usually you'll be able to change your project and old games will still load just fine. However some advanced users may wish to track precisely which version of their project a savegame has come from. You can do this using a global variable. Call the variable Version and initialise it to 1. Later, if you publish a new version of your game, change the initial value of the variable to a new number, e.g. 2. Now when On load complete triggers, the global variable has been loaded and set with the value of Version at the time the Save action was used. This might be useful if you add lots of new objects to the game, but want to make sure they're destroyed or hidden when loading old savegames.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

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

11
kenli 7,828 rep

Awesome!
We can make savegame system with newest C2 r124.

Looking forward to use this on my next games :)

Tuesday, April 09, 2013 at 1:38:09 PM
3
Ashesh 6,445 rep

Thanks Ashley,
In new beta version there is also save game event Cool!

Tuesday, April 09, 2013 at 1:41:10 PM
4
Kuso 4,813 rep

Simply awesome, the feature I always wait to come true.

Tuesday, April 09, 2013 at 2:34:15 PM
3
TELLES0808 22.8k rep

Awesome, thank you!

Tuesday, April 09, 2013 at 5:02:38 PM
4
Xerullian 3,177 rep

Just to clarify, "Savegames are stored on disk by the browser."

Does this mean the games are stored on the hard drive?

Also, does deleting all browser history (cookies, downloads, etc) delete/affect the saved games?

If not, how did you get around the browser to hard drive security wall?

Tuesday, April 09, 2013 at 11:10:49 PM
2
Tedg 9,884 rep

Thank you simple and elegant solution.

Wednesday, April 10, 2013 at 7:26:55 AM
6
Excal 5,234 rep

This seems to be tailored towards browser-based HTML5 games. If we are publishing to a platform like iOS, does the savegames system still work the same?

Wednesday, April 10, 2013 at 12:02:41 PM
10
Ashley 195.4k rep

@Xerullian - yes, on the hard drive. I think there is a browser setting that will remove it, but it shouldn't be deleted by clearing the cache, because the save data is not part of the cache. (It also shouldn't be covered by history, cookies, downloads, etc. I think in Chrome it's called 'hosted app data'.)

@Excal - it should work on both iOS and Android - all platforms support WebStorage which is where savegames go (or IndexedDB if supported).

Wednesday, April 10, 2013 at 2:30:22 PM
2
akumaGouki 3,627 rep

I have a Question, What if when I load I only want to load the variables but not the layout where I saved.

For example, I have a puzzle game and I saved in the variables the player progress, I want to load that information since the Intro, however, every time that I tried to load, the game loads in the save screen.

I'm using cocoonJS with the intention to export the game to an iOS application that's why I'm not using Webstorage

Thanks in advance!

Thursday, April 11, 2013 at 11:27:08 PM
3
Ashley 195.4k rep

@akumaGouki - WebStorage might be more suitable for that. It works on CocoonJS.

Sunday, April 14, 2013 at 5:44:16 PM
3
GG-Works 3,791 rep

This is great news, you might of just saved my project! Your dedication to this engine is outstanding.

Keep up the good work!

Monday, April 15, 2013 at 2:58:29 AM
3
akumaGouki 3,627 rep

Thanks @Ashley that's great!!!!

Monday, April 15, 2013 at 7:22:38 AM
3
moodlemuse 1,967 rep

It works. Awesome, thankyou.. just deleted 20 lines of code to do a similar thing with one.

Saturday, May 04, 2013 at 10:24:34 AM
3
spiritu 2,467 rep

I have problem with safari , the state is not saved, the rest of browsers are fine,anyone found that bug?

Also is there antone working on exporter to j2me ?

thanks

Wednesday, May 08, 2013 at 9:12:19 PM
3
California 5,079 rep

@spiritu: got capx?
Post it in the bugs forum

Thursday, May 09, 2013 at 4:05:29 PM

Leave a comment

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