Salva e carica
Questa pagina spiega come implementare il salvataggio e il caricamento dei progressi di gioco in Pixi'VN, inclusa l'esportazione di file, l'utilizzo di IndexedDB e le strategie di salvataggio automatico per i giochi browser.
Templates
Le funzioni createGameSave
e loadSave
sono già implementate in tutti i template. Guarda utils/save-utility.ts
.
Salvare e caricare è una funzionalità fondamentale che consente ai giocatori di salvare i propri progressi e continuare in seguito. Questo è essenziale per le visual novel, poiché consente ai giocatori di riprendere la storia da dove l'avevano interrotta.
Crea
Per creare un salvataggio, utilizza Game.exportGameState()
. Restituisce un oggetto con i dati del gioco, che è possibile memorizzare in un file o in un database.
Suggerimento: aggiungi informazioni extra al tuo file di salvataggio, come il nome del salvataggio, la data di creazione e uno screenshot dello stato attuale del gioco.
Per generare un'immagine, utilizza canvas.extractImage()
. Restituisce una stringa base64 del canvas corrente, che puoi usare come screenshot.
Ad esempio:
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,
};
}
Carica
Per caricare un salvataggio, utilizza Game.restoreGameState
. Questa funzione ha i seguenti parametri:
saveData
: L'oggetto dati di salvataggio per ripristinare lo stato del gioco.navigate
: Una funzione per navigare verso un percorso specifico dopo aver caricato il salvataggio.
Ad esempio:
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);
}