So nutzt der Spieleeditor Konstrukt 3 die File System Access API, damit Nutzer ihre Spiele speichern können

Die File System Access API bietet Lese-, Schreib- und Dateiverwaltungsfunktionen. Hier erfahren Sie, wie diese API in Construct 3 verwendet wird.

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 ihres Game-Editors haben die beiden Entwickler „[auf den Browser als neues Betriebssystem gesetzt]“, 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 Superkräfte des Webs können Sie auch einfach zu einem der Beispiele unter „Lass dich inspirieren“ klicken und sofort mit der Bearbeitung beginnen.

Die Construct 3-App, in der ein Nutzer eines der Starterprojekte bearbeitet.

Die File System Access API in Construct 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 über die File System Access API erfolgen. Das zeigt, dass die meisten Kunden diese API verwenden möchten.

Zum Speichern wird im folgenden Snippet der ursprüngliche Produktionscode zum Abrufen einer FileSystemFileHandle aus der Methode showSaveFilePicker() angezeigt, die dann zum Speichern der tatsächlichen Daten dient. 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ören beispielsweise Sicherungssoftware, mit der die Dateien der Nutzer gesichert werden können, oder Software, mit der Arbeitsergebnisse an andere Orte gesendet oder Dateien mit externen Tools bearbeitet werden 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 erfahrene Nutzer mit einem lokalen Ordner arbeiten, in dem sich alle Assets in separaten Dateien befinden. 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.

Die Startseite von Construct 3 mit zwei kürzlich verwendeten Projekten, tetris.c3p und columns.c3p. Unten in den DevTools sind die beiden entsprechenden FileSystemFileHandle-Objekte zu sehen, die in IndexedDB 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 Unterstützung für die File System Access API hinzugefügt hatte, implementierten die Construct-Entwickler die API 2020. Als Nebeneffekt konnten sie den NW.js-Build einmotten und den Browser ausschließlich auf allen Plattformen verwenden. Dies vereinfacht die Entwicklung und macht es unnötig, die Browser-Engine mit der App zu bündeln.

Ergebnisse

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.