Pixi’VNSave and load
This page explains how to implement saving and loading game progress in Pixi’VN, including file export, IndexedDB usage, and auto-save strategies for browser games.
Templates
The createGameSave and loadSave functions are already implemented in all templates. See utils/save-utility.ts.
Saving and loading is a core feature that lets players save their progress and continue later. This is essential for visual novels, allowing players to resume the story from where they left off.
Create
To create a save, use Game.exportGameState(). This returns an object with the game data, which you can store in a file or database.
Tip: Add extra info to your save file, such as the save name, creation date, and a screenshot of the current game state.
To generate an image, use canvas.extractImage(). This returns a base64 string of the current canvas, which you can use as a screenshot.
For example:
import { Game } from "@drincs/pixi-vn";
import GameSaveData from "../models/GameSaveData";
export function createGameSave(options?: { image?: string; name?: string }): GameSaveData {
const { image, name = "" } = options || {};
return {
saveData: Game.exportGameState(),
gameVersion: __APP_VERSION__,
date: new Date(),
name: name,
image: image,
};
}Load
To load a save, use Game.restoreGameState. This function has the following parameters:
saveData: The save data object to restore the game state.navigate: A function to navigate to a specific route after loading the save.
For example:
import { Game } from "@drincs/pixi-vn";
import { LOADING_ROUTE } from "../constans";
import GameSaveData from "../models/GameSaveData";
export async function loadSave(saveData: GameSaveData, navigate: NavigateFunction) {
await navigate(LOADING_ROUTE);
await Game.restoreGameState(saveData.saveData, navigate);
}