De File System Access API maakt lees-, schrijf- en bestandsbeheermogelijkheden mogelijk. Ontdek hoe Construct 3 gebruik maakt van deze API.
Invoering
(Dit artikel is ook beschikbaar in de vorm van een video.)
Construct 3 is een game-editor ontwikkeld door de broers Thomas en Ashley Gullen . Voor de huidige derde versie van hun game-editor "[wedden] de twee volledig op de browser als het nieuwe besturingssysteem" nadat ze eerder voor Windows en NW.js hadden gebouwd. U kunt een indruk krijgen van sommige games die met de editor zijn ontwikkeld door de showcase te verkennen of de rondleiding te volgen. Dankzij de superkrachten van het web kun je ook gewoon doorklikken naar een van de 'Laat je inspireren'-voorbeelden en meteen beginnen met bewerken.
De API voor bestandssysteemtoegang in Construct 3
Construct biedt de mogelijkheid om op te slaan in lokale bestanden met de File System Access API , evenals cloudopslag (Google Drive, OneDrive, Dropbox) en het downloaden van een kopie van het projectbestand. Uit statistieken die de Construct-ontwikkelaars hebben verzameld blijkt dat 65% van de opslagbewerkingen wordt gedaan met de File System Access API, wat aantoont dat dit is wat de meeste klanten willen gebruiken.
Voor het opslaan toont het volgende fragment de originele productiecode voor het verkrijgen van een FileSystemFileHandle uit de methode showSaveFilePicker() , die vervolgens dient om de daadwerkelijke gegevens op te slaan. Construct maakt gebruik van de parameter id options. Het id veld kan worden opgegeven om de map voor te stellen waarin de bestandskiezer wordt geopend. Door een id op te geven, kan de browser verschillende mappen voor verschillende ID's onthouden, waardoor de dialoog afhankelijk van de ID consequent in dezelfde map kan worden gestart. Niveaubestanden kunnen bijvoorbeeld worden geopend in Documents/levels/ , terwijl textuurbestanden kunnen worden geopend in Images/textures/ . De parameter types is een array van ondersteunde bestandstypen met een gelokaliseerde, visuele description en een accept object dat het besturingssysteem vertelt om in eerste instantie alleen .c3p bestanden met het MIME-type application/x-construct3-project te accepteren.
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;
}
Het Construct-team heeft het werken met bestanden op het bestandssysteem van de gebruiker als zeer intuïtief ervaren. Het werkt op dezelfde manier als traditionele desktop-apps en kan gemakkelijk worden geïntegreerd met andere software. Bijvoorbeeld back-upsoftware die back-ups kan maken van bestanden van gebruikers, of waarmee je eenvoudig werk naar andere plekken kunt sturen, of bestanden kunt bewerken met externe tools. Ze gebruiken de File System Access API ook voor verschillende andere gebruiksscenario's, zoals het selecteren van een back-upmap of het importeren van middelen zoals animaties.
Werken met grote bestanden en mappen
Sommige klanten van Construct werken met zeer grote projecten, in de honderden megabytes. Het opslaan van zo'n grote hoeveelheid werk in één enkel bestand is pijnlijk traag, laat staan het uploaden ervan naar een cloudservice. Met de File System Access API kunnen hoofdgebruikers werken met een lokale map met al hun middelen in afzonderlijke bestanden. Dit maakt een zeer snelle opslag mogelijk, omdat alleen de gewijzigde bestanden hoeven te worden bijgewerkt.
Ga verder waar je was gebleven
Zowel bestands- als maphandles kunnen worden geserialiseerd naar IndexedDB, waardoor Construct een lijst met recente projecten kan leveren die gedurende sessies wordt bewaard, zodat gebruikers opnieuw toegang kunnen krijgen tot hetzelfde bestand of dezelfde map, wat een groot gemak voor de gebruiker is. Ongeveer 30% van alle projecten die in Construct worden geopend, worden op deze manier geopend. De volgende schermafbeelding toont twee recente projecten, tetris.c3p en columns.c3p en, in het DevTools-venster, de overeenkomstige FileSystemFileHandle objecten geserialiseerd in een IndexedDB-tabel.
Integratie via slepen en neerzetten
De File System Access API kan ook worden geïntegreerd met de Drag and Drop API , zodat de gebruiker .c3p bestanden naar de applicatie kan slepen en neerzetten. Construct kan vervolgens via de getAsFileSystemHandle() -methode op het DataTransferItem object een FileSystemFileHandle verkrijgen, wat betekent dat bestanden die op deze manier worden geopend, onmiddellijk kunnen worden bewerkt en opgeslagen, zonder dat u een afzonderlijk dialoogvenster voor het opslaan van bestanden hoeft te doorlopen.
Gepensioneerde NW.js-build
Voorheen had het team een NW.js- build van Construct die afzonderlijk moest worden onderhouden en bijgewerkt om toegang te krijgen tot lokale bestanden. Nadat Chromium in versie 84 ondersteuning voor de File System Access API had toegevoegd, implementeerden de Construct-ontwikkelaars de API in 2020 en als bijproduct konden ze de NW.js-build stopzetten en de browser exclusief op alle platforms gebruiken. Dit vereenvoudigt de ontwikkeling en vermijdt de noodzaak om de browserengine met de app te bundelen.
Conclusies
Construct maakt intensief gebruik van de drie picker-methoden showOpenFilePicker() , showSaveFilePicker() en showOpenDirectoryPicker() ten voordele van hun gebruikers die hebben geleerd te vertrouwen op deze manier van werken met Construct. Als bijkomend voordeel maakt Construct ook gebruik van de File Handling API , waarmee Construct 3 zichzelf kan registreren als (standaard) bestandshandler van .c3p bestanden. Dit betekent dat de gebruiker kan dubbelklikken of met de rechtermuisknop kan klikken en met Construct 3 zijn spelbestanden kan openen, rechtstreeks vanuit de bestandsverkenner van zijn besturingssysteem. Construct maakt volledig gebruik van het internet en gebruikt tal van andere moderne browser-API's, zoals WebGL, Web Audio, Web Workers, WebAssembly, WebRTC voor multiplayer-games, Local Font Access, WebCodecs voor hun nieuwe animatieproduct en nog veel meer. Hun doel is altijd geweest om volledig gebruik te maken van het webplatform en te laten zien hoe geweldige producten er bovenop kunnen worden gebouwd, dus zorg ervoor dat je hun rondleiding probeert en je eigen games maakt.