Unity - How to create a game-save with a preview image?

Question

I want my game-save to be shown with a preview image. This is often seen in City Builder games: The game-save usually has a name, a date and often also provides a preview of the build city (just a screenshot of what was seen on the screen when the user pressed Save).

For my game, I provide 16 game-save slots, and they all get saved in "one big" JSON file. For testing purposes, I currently take a screenshot, convert it to a Texture2D and assign it to the game-save slot in my UI.

What would be a good way to store the preview-screenshots so that it is available the next time the game is started?

The most obvious way would be to convert the screenshot to a png file, and save it together with the one big JSON file. But that would mean that the game-saves are no longer all just in one JSON file, but instead also rely on a separate file that holds the preview image, and that for each different game-save. (Downside: 1. Player can see the actuall png files in the save folder 2. with 16 save games, we now don't have only one save file, but 17 (16 screenshots, 1 JSON file))

Since I would like to have the save file to consist of only one file, I was considering to not save the screenshot at all, and just take new screenshots every time the game starts (based on the information stored in the JSON file). Since I am working on a small game, with only one scene, this would be easily possible. But this does not seem like an elegant solution. (Upside: Only one save file needs to be stored: the JSON file)

I found this reply to a question about complex save systems, which hints into the direction of storing a screenshot with the binary formatter. Would it be possible to save a collection of Texture2D in one file, using the binary formatter? If yes, where can I read more about that and, would it be possible to save the Texture collection together with the JSON file, to have only one save file in the end (or alternatively 2 files: 1 JSON + 1 File that holds all 16 previews)?

Answer 1

Since you're working with JSON format already, you could simply include the preview image as a Base64 blob that can be decoded on the fly when reading the savegame list.

Assuming you have access to a Texture2D representing your savegame preview (let's call it previewImage), you can do the following:

public string EncodePreview(Texture2D previewImage) {
    byte[] previewBytes = previewImage.EncodeToJPG();
    string previewBase64 = Convert.ToBase64String(previewBytes);
    return previewBase64;
}

This way, you can save the image as a string in the same JSON file where you keep the savegame data. When it's time to show up the save slots, you can convert the image back as follows:

public Texture2D DecodePreview(string previewBase64) {
    byte[] previewBytes = Convert.FromBase64String(previewBase64);

    Texture2D previewImage = new Texture2D(0, 0);
    if (ImageConversion.LoadImage(previewImage, previewBytes))
        return previewImage;
    else
        return null;
}