HTML How do save games work in HTML?

[ChurryOp]

Most of the HTML-based games have a save game function that allows the user to select a file name and save to disk. That is somewhat outside of normal HTML/CSS/JS behavior.

I've looked at the JavaScript in some of them, but it's obfuscated and I can't tell which bits are necessary and which ones are part of a framework I don't otherwise need or want.

My goal: add comprehensive (larger than 2K character) files saves to disk, running from the browser, and not relying on remote calls to other code (an included library or JS module I can live with). Ideally the solution would work on Mac and Linux platforms as well as Windows, but a Windows solution is essential.

Any advice or insight would be appreciated. Developers, what do you use, and is it just magic or did you select tools?

Thanks!

 

[Feebs]

Most HTML games that I've encountered on here use Twine, which comes with an inbuilt save system ready to go. I'm unsure of any character limitations, and if there are any I've yet to come across them. It uses JS to create a plaintext JSON file with all your declared variables then uses base64 to encode the string.

Sugarcube is often the partner to Twine and the docs explain what goes into the save file here:

You must be registered to see the links

, but generally speaking unless you're looking to do something atypical, the default system should serve most needs.

You could happily use JS to create and open a save dialog for your own custom save files if you'd prefer not to use any existing tools. I built something very similar to what Twine does (though presumably less refined) some years ago, an autosave feature that used the browser's localstsorage and then a manual save option to save to disk. In both scenarios, it was just a big JSON object that JS pushed to the relevant place. I can post a code example if it would be useful, but there may be more modern solutions by now.

Honestly, though, I'd just recommend going with Twine. The IDE isn't great for actually coding, but for organisation of story content it's pretty good and you can import whatever external scripts you'd like if you'd prefer to keep all the JS separated. I'd recommend for any actual coding you use something else and copy paste into the relevant Twine passages as appropriate. I personally use Notepad++ and I really wish the two were intertwined, notepad++ text editor in Twine would be grand. Another great feature of Twine is "moments" which is a similar concept to rollback in renpy. It can be turned off.

 

[Alcahest]

Most HTML games that I've encountered on here use Twine, which comes with an inbuilt save system ready to go.

The save system you typically see in SugarCube games comes from SugarCube. I don't know if Twine itself has a save system. I don't see any way to save the game when starting a new project with Harlowe as default, but I have zero experience with Harlowe.

Honestly, though, I'd just recommend going with Twine. The IDE isn't great for actually coding, but for organisation of story content it's pretty good and you can import whatever external scripts you'd like if you'd prefer to keep all the JS separated. I'd recommend for any actual coding you use something else and copy paste into the relevant Twine passages as appropriate. I personally use Notepad++ and I really wish the two were intertwined, notepad++ text editor in Twine would be grand. Another great feature of Twine is "moments" which is a similar concept to rollback in renpy. It can be turned off.

Save yourself a lot of time and hassle. Switch to Tweego. You can convert your existing Twine project to Tweego if you want.

Then you can code in VS Code and your index.html will be updated the moment you save any file. All you have to do is put something like this in a bat file you have running.

tweego -w src -o index.html

This is assuming the folder where you have the tweego files are in a folder named src.

There is a sugarcube2 addon for VS Code that highlights your code properly.

 

[Feebs]

I have only used Twine with Sugarcube, so I guess that was my misunderstanding.

I will revisit Tweego, I'm aware of it but perhaps misunderstood its use. I didn't realise it could do "live" updates. I had assumed, seemingly wrongly, I had to recompile each time. That would indeed remove my main frustration with Twine. Now, if only we could have more tags!

Thank you.