Die File System Access API bietet Lese-, Schreib- und Dateiverwaltungsfunktionen. Hier erfahren Sie, wie Konstrukt 3 diese API verwendet.
Einführung
(Dieser Artikel ist auch als Video verfügbar.)
Construct 3 ist ein Game-Editor, der von den Brüdern Thomas und Ashley Gullen entwickelt wurde. Für die aktuelle dritte Version des Spieleeditors waren die beiden vollständig „[bet] on the browser is the new Betriebssystem“, nachdem sie zuvor für Windows und NW.js entwickelt hatten. Sie können sich einen Eindruck von einigen mit dem Editor entwickelten Spielen verschaffen, indem Sie sich die Demo ansehen oder die Demo durchgehen. Dank der Macht des Webs kannst du dich auch einfach durch eines der Beispiele für Inspirationen klicken und sofort mit dem Bearbeiten beginnen.
Die File System Access API in Konstrukt 3
Mit Construct können Sie mit der File System Access API lokale Dateien speichern, in der Cloud speichern (Google Drive, OneDrive, Dropbox) und eine Kopie der Projektdatei herunterladen. Die von den Construct-Entwicklern erfassten Statistiken zeigen, dass 65% der Speicherungen mit der File System Access API erfolgen. Das zeigt, dass die meisten Kunden diese API verwenden möchten.
Das folgende Snippet zeigt zum Speichern den ursprünglichen Produktionscode zum Abrufen eines FileSystemFileHandle aus der showSaveFilePicker()-Methode, der dann dazu dient, die tatsächlichen Daten zu speichern. Für „Construct“ wird der Optionsparameter id verwendet. Das Feld id kann angegeben werden, um das Verzeichnis vorzuschlagen, in dem die Dateiauswahl geöffnet wird. Wenn Sie eine id angeben, kann der Browser unterschiedliche Verzeichnisse für unterschiedliche IDs speichern. So wird der Dialog je nach ID immer im selben Verzeichnis gestartet. So können sich Leveldateien beispielsweise in Documents/levels/ und Texturdateien in Images/textures/ öffnen. Der Parameter types ist ein Array unterstützter Dateitypen mit einer lokalisierten visuellen description-Darstellung und einem accept-Objekt, das dem Betriebssystem mitteilt, dass anfangs nur .c3p-Dateien mit dem MIME-Typ application/x-construct3-project akzeptiert werden sollen.
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 Construct-Team hat festgestellt, dass die Arbeit mit Dateien im Dateisystem des Nutzers sehr intuitiv ist. Sie funktioniert ähnlich wie herkömmliche Desktop-Anwendungen und lässt sich problemlos in andere Software einbinden. Dazu gehört beispielsweise eine Sicherungssoftware, mit der Sie die Dateien von Nutzern sichern, Aufgaben einfach an andere Orte senden oder Dateien mit externen Tools bearbeiten können. Außerdem wird die File System Access API für verschiedene andere Anwendungsfälle verwendet, z. B. für die Auswahl eines Sicherungsordners oder den Import von Assets wie Animationen.
Mit großen Dateien und Ordnern arbeiten
Einige der Kunden von Construct arbeiten mit sehr großen Projekten, die mehrere hundert Megabyte umfassen. Das Speichern einer so großen Menge an Arbeit in einer einzelnen Datei ist extrem langsam, ganz zu schweigen vom Hochladen in einen Cloud-Dienst. Mit der File System Access API können Poweruser mit einem lokalen Ordner arbeiten, bei dem alle Assets in separaten Dateien gespeichert sind. Das 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-Handle können in IndexedDB serialisiert werden. So kann Construct eine Liste der letzten Projekte bereitstellen, die über mehrere Sitzungen hinweg beibehalten wird. So können Nutzer wieder auf dieselbe Datei oder denselben Ordner zugreifen, was sehr praktisch ist. Tatsächlich werden etwa 30% aller in Construct geöffneten Projekte auf diese Weise geöffnet. Der folgende Screenshot zeigt zwei aktuelle Projekte, tetris.c3p und columns.c3p, und im DevTools-Fenster die entsprechenden FileSystemFileHandle-Objekte, die in einer IndexedDB-Tabelle serialisiert wurden.
Drag-and-drop-Integration
Die File System Access API lässt sich auch in die Drag-and-drop API einbinden, sodass Nutzer .c3p-Dateien per Drag-and-drop in die Anwendung ziehen können. Construct kann dann über die Methode getAsFileSystemHandle() des DataTransferItem-Objekts eine FileSystemFileHandle abrufen. Das bedeutet, dass auf diese Weise geöffnete Dateien sofort bearbeitet und gespeichert werden können, ohne dass ein separates Dialogfeld zum Speichern der Datei geöffnet werden muss.
Eingestellter NW.js-Build
Zuvor hatte das Team einen NW.js-Build von Construct, der separat gewartet und aktualisiert werden musste, um auf lokale Dateien zuzugreifen. Nachdem Chromium in Version 84 die File System Access API unterstützt, implementierten die Konstruktentwickler die API im Jahr 2020. Als Nebenprodukt konnten die NW.js-Builds eingestellt und der Browser ausschließlich auf allen Plattformen verwendet werden. Dies vereinfacht die Entwicklung und macht es unnötig, die Browser-Engine mit der App zu bündeln.
Schlussfolgerungen
In Construct werden die drei Auswahlmethoden showOpenFilePicker(), showSaveFilePicker() und showOpenDirectoryPicker() häufig verwendet. Das ist von Vorteil für Nutzer, die sich an diese Arbeitsweise gewöhnt haben. Außerdem verwendet Construct die File Handling API, mit der sich Construct 3 als (Standard-)Datei-Handler für .c3p-Dateien registrieren kann. Das bedeutet, dass Nutzer ihre Spieldateien direkt im Dateimanager ihres Betriebssystems mit Construct 3 öffnen können, indem sie darauf doppelklicken oder mit der rechten Maustaste darauf klicken. Construct setzt voll und ganz auf das Web und verwendet viele andere moderne Browser-APIs wie WebGL, Web Audio, Web Workers, WebAssembly, WebRTC für Multiplayer-Spiele, Local Font Access und WebCodecs für sein neues Animationsprodukt. Das Ziel von Google Web Builder war es immer, die Webplattform optimal zu nutzen und zu zeigen, wie tolle Produkte damit erstellt werden können. Sehen Sie sich also die Demo an und erstellen Sie Ihre eigenen Spiele.