L'API Accesso al file system consente funzionalità di lettura, scrittura e gestione dei file. Scopri come Construct 3 utilizza questa API.
Introduzione
Questo articolo è disponibile anche sotto forma di video.
Build 3 è un editor di videogiochi sviluppato dai fratelli Thomas e Ashley Gullen. Per la terza versione attuale del proprio editor di giochi, i due completamente "[scommettono] sul browser come nuovo sistema operativo" dopo aver eseguito la compilazione per Windows e NW.js in precedenza. Puoi farti un'idea di alcuni giochi sviluppati con l'editor esplorando la relativa vetrina o seguendo il tour guidato. Grazie ai superpoteri del web, puoi anche fare clic su uno degli esempi"Lasciati ispirare" e iniziare subito a modificare.
L'API File System Access in Construct 3
Build offre la possibilità di salvare nei file locali con l'API File System Access, nonché di eseguire il salvataggio sul cloud (Google Drive, OneDrive, Dropbox) e il download di una copia del file di progetto. Le statistiche raccolte dagli sviluppatori di Building mostrano che il 65% dei salvataggi viene eseguito con l'API File System Access, che dimostra che è ciò che la maggior parte dei clienti vuole utilizzare.
Per il salvataggio, il seguente snippet mostra il codice di produzione originale per ottenere un FileSystemFileHandle dal metodo showSaveFilePicker(), che serve a salvare i dati effettivi. La costruzione utilizza il parametro di opzioni id. Il campo id può essere specificato per suggerire la directory in cui si apre il selettore file. Se specifichi un id, il browser può ricordare directory diverse per ID diversi, il che serve ad avviare la finestra di dialogo in modo coerente nella stessa directory a seconda dell'ID. Ad esempio, i file di livello potrebbero aprirsi in Documents/levels/, mentre i file di texture potrebbero aprirsi in Images/textures/. Il parametro types è un array di tipi di file supportati con un description visualizzato dall'utente localizzato e un oggetto accept che indica al sistema operativo di accettare inizialmente solo i file .c3p con il tipo MIME application/x-construct3-project.
let fileHandle = null;
try {
fileHandle = await window["showSaveFilePicker"]({
id: "save-project-file",
types: [
{
description: lang("ui.project-file-picker.c3-single-file-project"),
accept: {
"application/x-construct3-project": [".c3p"],
},
},
],
});
} catch (err) {
// Assume user cancelled, or permission otherwise denied.
return;
}
Il team di Construct ha riscontrato che lavorare con i file sul file system dell'utente è molto intuitivo. Funziona in modo simile alle app desktop tradizionali e si integra facilmente con altri software. Ad esempio, software di backup che può eseguire il backup dei file degli utenti, inviare facilmente i lavori in altri luoghi o modificare i file con strumenti esterni. Utilizzano inoltre l'API File System Access per vari altri casi d'uso, ad esempio la selezione di una cartella di backup o l'importazione di asset come le animazioni.
Lavorare con file e cartelle di grandi dimensioni
Alcuni dei clienti di Construct lavorano con progetti molto grandi, di centinaia di megabyte. Salvare una quantità così grande di lavoro in un singolo file è estremamente lento, per non parlare del caricamento su un servizio cloud. L'API File System Access consente agli utenti esperti di lavorare con una cartella locale con tutti i loro asset in file separati. In questo modo, i salvataggi sono molto rapidi, in quanto devono essere aggiornati solo i file modificati.
Continua da dove avevi interrotto
Sia gli handle dei file che quelli delle directory possono essere serializzati in IndexedDB, consentendo a Construct di fornire un elenco di progetti recenti che viene mantenuto nelle sessioni, in modo che gli utenti possano accedere di nuovo allo stesso file o alla stessa cartella, il che è molto pratico per l'utente. In effetti, circa il 30% di tutti i progetti aperti in Construct viene aperto in questo modo. Lo screenshot seguente mostra due progetti recenti, tetris.c3p e columns.c3p e, nella finestra di DevTools, gli oggetti FileSystemFileHandle corrispondenti serializzati in una tabella IndexedDB.
Integrazione con trascinamento
L'API Accesso al file system si integra anche con l'API Trascina e rilascia, in modo che l'utente possa trascinare i file .c3p nell'applicazione. La classe Construct può quindi, tramite il metodo getAsFileSystemHandle() dell'oggetto DataTransferItem, ottenere un FileSystemFileHandle, il che significa che i file aperti in questo modo possono essere modificati e salvati immediatamente, senza dover passare attraverso una finestra di dialogo di salvataggio del file separata.
Build NW.js ritirata
In precedenza, il team aveva una build di Construct in NW.js che doveva essere gestita e aggiornata separatamente per accedere ai file locali. Dopo che Chromium ha aggiunto il supporto dell'API File System Access nella versione 84, gli sviluppatori di Construct hanno implementato l'API nel 2020 e, come sottoprodotto, sono stati in grado di ritirare la build NW.js e utilizzare il browser esclusivamente su tutte le piattaforme. In questo modo, lo sviluppo viene semplificato ed è possibile evitare di dover includere il motore del browser nell'app.
Conclusioni
Construct fa un uso intensivo dei tre metodi di selettore showOpenFilePicker(), showSaveFilePicker() e showOpenDirectoryPicker() rispettivamente a vantaggio degli utenti che hanno imparato a fare affidamento su questo modo di lavorare con Construct. Come ulteriore vantaggio, Construct utilizza anche l'API File Handling, che consente a Construct 3 di registrarsi come gestore dei file (predefinito) dei file .c3p. Ciò significa che l'utente può fare doppio clic o fare clic con il tasto destro del mouse e aprire con Construct 3 i file del gioco direttamente dal file explorer del sistema operativo. Puntando completamente sul web, Build utilizza una serie di altre API per i browser moderni, come WebGL, Web Audio, Web Workers, WebAssembly, WebRTC per i giochi multiplayer, Local Font Access, WebCodec per il suo nuovo prodotto di animazione e altro ancora. Il loro obiettivo è sempre stato sfruttare al meglio la piattaforma web e mostrare come è possibile creare prodotti straordinari sulla base di questa piattaforma. Assicurati quindi di provare il loro tour guidato e di creare i tuoi giochi.