Die File System Access API ermöglicht Lese-, Schreib- und Dateiverwaltungsfunktionen. Erfahren Sie, wie Konstrukt 3 diese API nutzt.
Einführung
(Dieser Artikel ist auch in Form eines Videos verfügbar.)
Konstrukt 3 ist ein Spieleeditor, der von den Brüdern Thomas und Ashley Gullen entwickelt wurde. In der aktuellen dritten Version des Spieleeditors „[wetten] sie voll und ganz darauf, dass der Browser das neue Betriebssystem ist“, nachdem sie vorher eine App für Windows und NW.js entwickelt hatten. Sie können sich einen Eindruck von einigen Spielen verschaffen, die mit dem Redakteur entwickelt wurden, indem Sie sich deren Schaufenster ansehen oder die Tour durcharbeiten. Dank der Superkräfte des Webs kannst du dir auch einfach ein paar Beispiele aus der Kategorie"Inspiration finden" durchklicken und sofort mit der Bearbeitung beginnen.
Die File System Access API in Konstrukt 3
Konstrukt bietet die Möglichkeit, die Projektdatei mit der File System Access API in lokalen Dateien oder in der Cloud (Google Drive, OneDrive, Dropbox) zu speichern und eine Kopie der Projektdatei herunterzuladen. Statistiken der Konstrukt-Entwickler zeigen, dass 65% der Speichervorgänge mit der File System Access API erfolgen. Dies zeigt, dass die meisten Kunden diese API verwenden.
Das folgende Snippet zeigt zum Speichern den ursprünglichen Produktionscode zum Abrufen eines FileSystemFileHandle aus der showSaveFilePicker()-Methode, das dann zum Speichern der tatsächlichen Daten dient. Das Konstrukt verwendet den Optionsparameter id. Das Feld id kann angegeben werden, um das Verzeichnis vorzuschlagen, in dem die Dateiauswahl geöffnet wird. Durch Angabe einer id kann der Browser verschiedene Verzeichnisse für unterschiedliche IDs speichern. Dadurch wird der Dialog je nach ID immer wieder im selben Verzeichnis geöffnet. Verschiedene Dateien lassen sich beispielsweise in Documents/levels/ öffnen, Texturdateien hingegen in Images/textures/. Der types-Parameter ist ein Array unterstützter Dateitypen mit einem lokalisierten, für Nutzer sichtbaren description und einem accept-Objekt, das das Betriebssystem anweist, anfangs nur .c3p-Dateien mit dem MIME-Typ application/x-construct3-project zu akzeptieren.
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;
}
Das Konstrukt-Team hat die Arbeit mit Dateien im Dateisystem der Nutzenden als sehr intuitiv empfunden. Es funktioniert ähnlich wie herkömmliche Desktop-Apps und lässt sich bequem in andere Software integrieren. Zum Beispiel Sicherungssoftware, mit der sich Nutzerdateien sichern, Arbeiten ganz einfach an andere Orte senden oder Dateien mit externen Tools bearbeiten können. Die File System Access API wird auch für verschiedene andere Anwendungsfälle verwendet, z. B. für die Auswahl eines Sicherungsordners oder das Importieren von Assets wie Animationen.
Mit großen Dateien und Ordnern arbeiten
Einige der Kunden von Konstrukt arbeiten an sehr großen Projekten mit mehreren hundert Megabyte. Das Speichern einer so großen Menge an Arbeit in einer einzigen Datei ist lästig langsam, ganz zu schweigen von dem Hochladen in einen Cloud-Dienst. Mit der File System Access API können Poweruser mit einem lokalen Ordner arbeiten, der alle Assets in separaten Dateien enthält. Dies ermöglicht ein sehr schnelles Speichern, da nur die geänderten Dateien aktualisiert werden müssen.
Da weitermachen, wo du aufgehört hast
Sowohl Datei- als auch Verzeichnis-Handles können in IndexedDB serialisiert werden. So kann Konstrukt eine Liste der letzten Projekte bereitstellen, die sitzungsübergreifend beibehalten wird, sodass Nutzer wieder auf dieselbe Datei oder denselben Ordner zugreifen können, was für den Nutzer sehr praktisch ist. Tatsächlich sind etwa 30% aller in „Konstrukte“ geöffneten Projekte auf diese Weise geöffnet. Der folgende Screenshot zeigt zwei aktuelle Projekte, tetris.c3p und columns.c3p, und im Entwicklertools-Fenster die entsprechenden FileSystemFileHandle-Objekte, die in einer IndexedDB-Tabelle serialisiert sind.
Drag-and-drop-Integration
Die File System Access API ist auch in die Drag & Drop API eingebunden, sodass Nutzer .c3p-Dateien per Drag-and-drop in die Anwendung ziehen können. Das Konstrukt kann dann über die getAsFileSystemHandle()-Methode für das DataTransferItem-Objekt ein FileSystemFileHandle abrufen. Das bedeutet, dass auf diese Weise geöffnete Dateien sofort bearbeitet und gespeichert werden können, ohne ein separates Dialogfeld zum Speichern von Dateien durchlaufen zu müssen.
Eingestellter NW.js-Build
Zuvor hatte das Team einen NW.js-Build von Konstrukt, bei dem für den Zugriff auf lokale Dateien separate Updates durchgeführt und aktualisiert werden mussten. Nachdem Chromium in Version 84 die File System Access API unterstützt hat, haben die Konstrukt-Entwickler die API 2020 implementiert. Als Nebenprodukt konnten NW.js-Builds eingestellt und der Browser ausschließlich auf allen Plattformen verwendet werden. Dadurch wird die Entwicklung vereinfacht und es ist nicht mehr erforderlich, die Browser-Engine mit der App zu bündeln.
Ergebnisse
Bei Konstrukt werden in großem Umfang die drei Auswahlmethoden showOpenFilePicker(), showSaveFilePicker() und showOpenDirectoryPicker() zum Vorteil der Nutzer eingesetzt, die gelernt haben, mit dieser Methode zu arbeiten. Ein weiterer Vorteil ist, dass Konstrukt auch die File Handling API verwendet, mit der sich Konstrukt 3 als (Standard-)Datei-Handler für .c3p-Dateien registrieren kann. Das bedeutet, dass der Nutzer seine Spieldateien direkt aus dem Datei-Explorer seines Betriebssystems per Doppel- oder Rechtsklick öffnen und mit Konstrukt 3 öffnen kann. Konstrukt setzt auf zahlreiche moderne Browser-APIs wie WebGL, Web Audio, Web Workers, WebAssembly, WebRTC für Spiele im Mehrspielermodus, Zugriff auf lokale Schriftarten, WebCodecs für das neue Animationsprodukt und vieles mehr. Ziel des Unternehmens ist es seit jeher, die Webplattform optimal zu nutzen und zu zeigen, wie tolle Produkte darauf aufbauen können. Probieren Sie die Demo aus und entwickeln Sie Ihre eigenen Spiele.