De File System Access API biedt lees-, schrijf- en bestandsbeheerfuncties. Ontdek hoe Construct 3 gebruikmaakt van deze API.
Invoering
(Dit artikel is ook beschikbaar als video.)
Construct 3 is een game-editor ontwikkeld door de broers Thomas en Ashley Gullen . Voor de huidige derde versie van hun game-editor hebben de twee volledig "gegokt op de browser als het nieuwe besturingssysteem" na eerder voor Windows en NW.js te hebben gebouwd. Je kunt een indruk krijgen van een aantal games die met de editor zijn ontwikkeld door de showcase te bekijken 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 direct beginnen met bewerken.
De API voor toegang tot het bestandssysteem in Construct 3
Construct biedt de mogelijkheid om bestanden lokaal op te slaan met de File System Access API , evenals in de cloud (Google Drive, OneDrive, Dropbox) en een kopie van het projectbestand te downloaden. Statistieken die de ontwikkelaars van Construct hebben verzameld, tonen aan dat 65% van de opslagbewerkingen via de File System Access API wordt uitgevoerd, 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 via de methode showSaveFilePicker() , die vervolgens dient om de daadwerkelijke gegevens op te slaan. Construct maakt gebruik van de optieparameter id . Het veld id kan worden opgegeven om de directory aan te geven waarin de bestandskiezer wordt geopend. Door een id op te geven, kan de browser verschillende directory's voor verschillende ID's onthouden, wat ervoor zorgt dat het dialoogvenster consistent in dezelfde directory wordt gestart, afhankelijk van de ID. Zo kunnen levelbestanden bijvoorbeeld worden geopend in Documents/levels/ , terwijl texturebestanden kunnen worden geopend in Images/textures/ . De parameter types is een array van ondersteunde bestandstypen met een gelokaliseerde, gebruikersvriendelijke 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 in het bestandssysteem van de gebruiker als zeer intuïtief ervaren. Het werkt vergelijkbaar met traditionele desktop-apps en integreert eenvoudig met andere software. Denk bijvoorbeeld aan back-upsoftware die back-ups van gebruikersbestanden kan maken, of waarmee u werk eenvoudig naar andere locaties kunt sturen, of bestanden kunt bewerken met externe tools. Ze gebruiken de File System Access API ook voor diverse andere toepassingen, zoals het selecteren van een back-upmap of het importeren van assets zoals animaties.
Werken met grote bestanden en mappen
Sommige klanten van Construct werken met zeer grote projecten, van honderden megabytes. Het opslaan van zo'n grote hoeveelheid werk in één bestand is tergend langzaam, laat staan het uploaden naar een cloudservice. Met de File System Access API kunnen ervaren gebruikers werken met een lokale map met al hun assets in aparte bestanden. Dit zorgt voor zeer snelle opslag, omdat alleen de gewijzigde bestanden hoeven te worden bijgewerkt.
Ga verder waar je gebleven was
Zowel bestands- als directoryhandles kunnen worden geserialiseerd naar IndexedDB, waardoor Construct een lijst met recente projecten kan leveren die behouden blijft tussen sessies. Gebruikers hebben zo opnieuw toegang tot hetzelfde bestand of dezelfde map, wat een groot gebruiksgemak oplevert. Ongeveer 30% van alle projecten die in Construct worden geopend, wordt op deze manier geopend. De volgende schermafbeelding toont twee recente projecten, tetris.c3p en columns.c3p , en, in het DevTools-venster, de bijbehorende FileSystemFileHandle objecten die zijn geserialiseerd in een IndexedDB-tabel.
Integratie met slepen en neerzetten
De File System Access API integreert ook 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, direct kunnen worden bewerkt en opgeslagen, zonder dat een apart dialoogvenster voor het opslaan van bestanden hoeft te worden doorlopen.
Gepensioneerde NW.js-build
Voorheen had het team een NW.js -build van Construct die apart onderhouden en bijgewerkt moest worden 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 konden ze als bijproduct de NW.js-build buiten gebruik stellen en de browser exclusief op alle platforms gebruiken. Dit vereenvoudigt de ontwikkeling en voorkomt de noodzaak om de browserengine met de app te bundelen.
Conclusies
Construct maakt veelvuldig gebruik van de drie picker-methoden showOpenFilePicker() , showSaveFilePicker() en showOpenDirectoryPicker() wat ten goede komt aan hun gebruikers die gewend zijn geraakt aan deze manier van werken met Construct. Als bijkomend voordeel gebruikt Construct ook de File Handling API , waarmee Construct 3 zichzelf kan registreren als een (standaard) bestandshandler van .c3p bestanden. Dit betekent dat de gebruiker kan dubbelklikken of rechtsklikken en hun gamebestanden met Construct 3 rechtstreeks vanuit de bestandsverkenner van hun besturingssysteem kan openen. Construct zet volledig in op het web en gebruikt talloze andere moderne browser-API's, zoals WebGL, Web Audio, Web Workers, WebAssembly, WebRTC voor multiplayergames, Local Font Access, WebCodecs voor hun nieuwe animatieproduct , en nog veel meer. Hun doel is altijd geweest om het webplatform volledig te benutten en te laten zien hoe geweldige producten erop gebouwd kunnen worden, dus probeer zeker hun rondleiding en creëer je eigen games.