L'API File System Access consente di leggere, scrivere e gestire i file. Scopri come Build 3 utilizza questa API.
Introduzione
Questo articolo è disponibile anche sotto forma di video.
Build 3 è un editor di giochi sviluppato dai fratelli Thomas e Ashley Gullen. Per la terza iterazione attuale dell'editor di giochi, le due versioni "[bet] sul browser sono il nuovo sistema operativo" dopo aver creato per Windows e NW.js in precedenza. Puoi farti un'idea di alcuni giochi sviluppati con l'editor esplorando la vetrina o seguendo il tour guidato. Grazie ai superpoteri del web, puoi anche fare clic su uno qualsiasi degli esempi di tipo "Trova l'ispirazione" e iniziare subito ad apportare modifiche.
API File System Access in Costruito 3
Produc offre la possibilità di salvare in file locali con l'API File System Access, nonché di salvare sul cloud (Google Drive, OneDrive, Dropbox) e scaricare una copia del file di progetto. Le statistiche raccolte dagli sviluppatori di Build mostrano che il 65% dei salvataggi viene eseguito con l'API File System Access, che dimostra che è l'API che la maggior parte dei clienti vuole utilizzare.
Per il salvataggio, il seguente snippet mostra il codice di produzione originale per ottenere un elemento FileSystemFileHandle dal metodo showSaveFilePicker(), che viene poi utilizzato per salvare i dati effettivi. L'elemento costruttore utilizza il parametro delle 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ò memorizzare 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 dei livelli potrebbero aprirsi in Documents/levels/, mentre i file delle texture potrebbero aprirsi in Images/textures/. Il parametro types è un array di tipi di file supportati con un oggetto description localizzato visivo dall'utente e un oggetto accept che indica al sistema operativo di accettare inizialmente solo 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 costruttore ha trovato molto intuitivo l'utilizzo dei file nel file system dell'utente. Funziona in modo simile alle tradizionali app desktop e si integra facilmente con altri software. Ad esempio, software di backup in grado di eseguire il backup dei file degli utenti, per inviare facilmente il lavoro in altre posizioni o per modificare file con strumenti esterni. Inoltre, utilizzano l'API File System Access per vari altri casi d'uso, come la selezione di una cartella di backup o l'importazione di asset come le animazioni.
Utilizzare file e cartelle di grandi dimensioni
Alcuni clienti di Producer lavora con progetti molto grandi, nell'ordine di centinaia di megabyte. Il salvataggio di una tale quantità di lavoro in un singolo file è estremamente lento, per non parlare di averlo caricato su un servizio cloud. L'API File System Access consente agli utenti esperti di lavorare con una cartella locale con tutti i propri asset in file separati. Ciò consente salvataggi molto rapidi, in quanto solo i file modificati devono essere aggiornati.
Continua da dove avevi interrotto
Gli handle dei file e delle directory possono essere serializzati in IndexedDB, consentendo a Build di fornire un elenco di progetti recenti che è persistente in tutte le sessioni, in modo che gli utenti possano accedere di nuovo allo stesso file o alla stessa cartella, il che è una grande comodità per l'utente. Infatti, circa il 30% di tutti i progetti aperti in Build viene aperto in questo modo. Il seguente screenshot mostra due progetti recenti, tetris.c3p e columns.c3p, e, nella finestra DevTools, gli oggetti FileSystemFileHandle corrispondenti serializzati in una tabella IndexedDB.
Integrazione tramite trascinamento
L'API File System Access si integra inoltre con l'API di trascinamento, in modo che l'utente possa trascinare file .c3p nell'applicazione. Costruisci quindi può ottenere, tramite il metodo getAsFileSystemHandle() sull'oggetto DataTransferItem, un valore FileSystemFileHandle, il che significa che i file aperti in questo modo possono essere modificati e salvati immediatamente, senza dover aprire una finestra di dialogo separata per il salvataggio dei file.
Build NW.js ritirata
In precedenza, il team aveva una build di Build NW.js che richiedeva la manutenzione e l'aggiornamento separatamente per accedere ai file locali. Dopo che Chromium ha aggiunto il supporto per l'API File System Access nella versione 84, gli sviluppatori di Progetta hanno implementato l'API nel 2020 e, come prodotto secondario, sono riusciti a ritirare la build NW.js e a utilizzare il browser esclusivamente su tutte le piattaforme. Questo semplifica lo sviluppo ed evita la necessità di integrare il motore del browser con l'app.
Conclusioni
Build fa un uso intensivo dei tre metodi di selezione, rispettivamente showOpenFilePicker(), showSaveFilePicker() e showOpenDirectoryPicker(), a vantaggio dei propri utenti che hanno imparato a dipendere da questo modo di lavorare con Progetta. Come ulteriore vantaggio, Build utilizza anche l'API File handling, che consente a Costruire 3 di registrarsi come gestore di file (predefinito) di file .c3p. Ciò significa che l'utente può fare doppio clic o fare clic con il tasto destro del mouse e aprire i file di gioco con Build 3 direttamente da Esplora file del sistema operativo. Completamente scommesso sul web, Costruisci utilizza moltissime altre API moderne del browser, come WebGL, Web Audio, Web Workers, WebAssembly, WebRTC per giochi multiplayer, Local Font Access, WebCodecs per il suo nuovo prodotto di animazione e altro ancora. Il loro obiettivo è sempre stato quello di fare pieno uso della piattaforma web e mostrare come si possano costruire prodotti straordinari su questa piattaforma, quindi assicurati di provare il loro tour guidato e creare i tuoi giochi.