Video Tutorial - Saving/Loading (HTML 5)

Several people have asked for a tutorial on this.

Save/load highscores in HTML 5 :

Great as always! :smiley:
A lot of users will find it useful, storage can be complex sometimes, even more in HTML5 :slight_smile:

Thanks. Hopefully some people will find these tutorials helpful and GD can get more users. It’s a great IDE.

Can you make a tutorial/example file on a save/load game system that is complete. One that automatically mass stores values/states to a file and can also load them from the file.

This post already saves and loads the values… So I have no idea what you mean? :confused:

Thanks Mat for this tutorial! :slight_smile:

You should add it here: … /tutorials
(as well as a link to all your other tutorials) to be sure that GD users find them! :smiley:

I think he means saving entire objects/scene states: properties and variables, dynamically.
First of all, it’s (surely) a very difficult task, really :unamused:
I’m going to theorize about it:

  • You have to save the scene properties (easy, they are fixed)
  • You have to save the scene variables too, this could be hard since you don’t know every variable name or how many they are, but you can handle it adding all variables in a master structure variable “AllVars”, then just save this big variable with the help of the erdos tutorial :sunglasses:
  • Every object needs to be saved, here the things go complex: every object type has different properties (animation, frame, animation speed scale, texture offset, text, string in memory, etc.), you’ll have to write a save/load method for each object type. Object groups containing a specific kind of object would help (a group for sprites, a group for tiled sprites, another for text objects, etc.). There is an example in the GD examples folder about saving/loading objects, I would start checking that :wink:
  • Save objects variables can be performed in the same way as scene variables.
  • Another difficult task would be saving automatisms states… again, each kind of automatism has its own properties, turning the work (even more) tedious :frowning:

As said before, it is not something that somebody makes in two-three days, I don’t even know if it’s possible. Maybe a lot of work can be saved restricting the save/load system capabilities: only save common objects (sprite, tiled sprite, text) and automatisms (platform, physics) :neutral_face:

it is surely a key feature for developing a game.
I made such a system in a couple of days for multimedia fusion here:

All you have to do to have and object’s variables stored - so they can be loaded after the game has been reopened- is to add the object to a group! … -save.html

To make the system work in MMF i needed a number of things that the engine provided:
0. First of all you need a three dimensional array! x=object ID, y=variable ID, z= frame number

  1. Run a foreach fastloop a number of times, depending on the number of objects in the “store values” group - The loopindex is used to get the Unique ID of the object that is being stored.

  2. in the for each fastloop, Run fastloop a number of times, depending on the number of values inside the object- The loopIndex ID of this fastloop is used to get the Unique ID of the Variable.

Use the loopindex number of the foreach fastloop (1.) to determine the X coordinate of the value, use the loopindex number of the second fastloop (2.) to determine the Y coordinate of the value. Use the current frame number to determine the Z coordinate of the value.

Write a value on each loop cycle - this automatically fills the array with values. In about two or three lines of code.
The same principle is used to load the values from the array- which can be done when loading your save from the array object.
Loading and saving the game is done by adding the action of loading from and saving to an array file in the game’s folder.

Now to my knowledge this can not be done in gdevelop in the same way.

You do not have a way to get the loopindex. Functions are not even supported in html5 games and I am not sure if you can get the number of the function cycle to use it as an expression value, or even tell the engine how many times to run the function using an expression.

To add to this, values do not have UIDs like in mmf.
You do not have an array that is three dimensional. You can not load/save to anything but jason- which is much slower than an array.

So there is absolutely no simple way to add this functionality in a big and useful/automated way in gdevelop.
In construct2 there is a load and save that is automatic - but the downside to it is that you get less control as to what to load and save. It just does it to everything in the scene.


I’ll take a look at doing some more substantial saving and loading later this week and if I can find a neat way of doing it, I’ll make a tutorial.

The most beautiful implementation imo would be a system that requires you to just add an object to a Group to make all of it’s values save-able.
That + the ability to have multiple save files by using a global value to determine on which one you are.

Having to manually load and save each individual value of each individual object by hand is just insane and laborious, especially if you are planning on making a real game with many stats.

i used his tutorial (thanks by the way). and what i did is i inverted the condition so even when you don click a button it will save it. works for me.


thank you mats

Unless your game is very unusual, it sounds like you’re going to be calling that save function a lot more often than you need to. If you want to keep the game saved regularly, without the user pressing a button, I suggest using a timer in place of “NOT on save button” and “NOT left mouse down”. You can then save the game every few seconds or whatever. It’s also a good idea to save the game at the moment the player dies/loses.

this is is a sub event that only takes action when you lose

or do i still need to change it ?

If you’re doing it as a sub-event like that, completely remove the button left is down and cursor is on savegame conditions, otherwise, if the user continues to hold the left mouse button after losing, the game will not save!

thank you so much. i did it

The “highscores” file is a XML file ? if yes, can you show me this file ?

In the native platform, the saved files are XML, to check the file “style” you can write some values (numbers and strings), in tags and so on, then open the saved file… nothing better than check what you’ve made :wink:
In the HTML5 platform, the saved file is a mystery :laughing: Just kidding, actually it doesn’t matter, you can’t open it, I think (it’s saved in the browser cache) :neutral_face:

Not in the browser’s cache but the browser’s webstorage (it’s not removed when deleting the cache).

Oh sure, my mistake… Thanks man, that could cause confusion! :smiley:

thanks bro =D