L'API File System Access permet des fonctionnalités de lecture, d'écriture et de gestion de fichiers. Découvrez comment Construct 3 utilise cette API.
Introduction
(Cet article est également disponible sous forme de vidéo).
Construct 3 est un éditeur de jeu développé par les frères Thomas et Ashley Gullen. Pour la troisième version actuelle de leur éditeur de jeu, les deux "[parier] sur le navigateur en tant que nouveau système d'exploitation" après avoir été créés pour Windows et NW.js auparavant. Vous pouvez vous faire une idée de certains jeux développés avec l'éditeur en explorant sa vitrine ou en suivant la visite guidée. De plus, grâce aux superpouvoirs du Web, il vous suffit de cliquer sur l'un des exemples "Trouvez l'inspiration" et de commencer à apporter des modifications immédiatement.
API File System Access dans Construct 3
Construire permet d'enregistrer dans des fichiers locaux avec l'API File System Access, d'enregistrer dans le cloud (Google Drive, OneDrive, Dropbox) et de télécharger une copie du fichier du projet. Les statistiques collectées par les développeurs Construct indiquent que 65% des sauvegardes sont effectuées avec l'API File System Access, ce qui démontre que c'est ce que la plupart des clients souhaitent utiliser.
Pour l'enregistrement, l'extrait suivant montre le code de production d'origine permettant d'obtenir un FileSystemFileHandle à partir de la méthode showSaveFilePicker(), qui est ensuite diffusé pour enregistrer les données réelles. Construire utilise le paramètre d'options id. Le champ id peut être spécifié pour suggérer le répertoire dans lequel l'outil de sélection de fichiers s'ouvre. En spécifiant un id, le navigateur peut mémoriser différents répertoires pour différents ID, ce qui permet d'ouvrir la boîte de dialogue de manière cohérente dans le même répertoire en fonction de l'ID. Par exemple, les fichiers de niveau peuvent s'ouvrir dans Documents/levels/, tandis que les fichiers de texture peuvent s'ouvrir dans Images/textures/. Le paramètre types est un tableau des types de fichiers compatibles avec un élément description visuel localisé et un objet accept qui indique au système d'exploitation de n'accepter initialement que les fichiers .c3p de type MIME application/x-construct3-project.
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;
}
L'équipe de construction a trouvé que travailler avec des fichiers sur le système de fichiers de l'utilisateur était très intuitif. Il fonctionne de la même manière que les applications de bureau traditionnelles et s'intègre facilement à d'autres logiciels. Il peut s'agir, par exemple, de logiciels de sauvegarde qui permettent de sauvegarder les fichiers des utilisateurs, d'envoyer facilement du travail à d'autres endroits ou de modifier des fichiers à l'aide d'outils externes. L'API File System Access est également utilisée pour d'autres cas d'utilisation, comme la sélection d'un dossier de sauvegarde ou l'importation d'éléments tels que des animations.
Travailler avec des fichiers et des dossiers volumineux
Certains clients de Construct travaillent sur des projets très volumineux, avec des centaines de mégaoctets. Enregistrer une telle quantité de travail dans un seul fichier est extrêmement lent, et encore moins l'importer dans un service cloud. L'API File System Access permet aux utilisateurs expérimentés de travailler avec un dossier local dont tous leurs éléments se trouvent dans des fichiers distincts. Cela permet des enregistrements très rapides, car seuls les fichiers modifiés doivent être mis à jour.
Reprenez là où vous en étiez
Les poignées de fichier et de répertoire peuvent être sérialisées vers IndexedDB, ce qui permet à Construire de fournir une liste de projets récents qui est conservée d'une session à l'autre, afin que les utilisateurs puissent à nouveau accéder au même fichier ou dossier, ce qui est très pratique pour l'utilisateur. En effet, environ 30% de tous les projets ouverts dans Construire sont ouverts de cette manière. La capture d'écran suivante montre deux projets récents, tetris.c3p et columns.c3p, et, dans la fenêtre "Outils de développement", les objets FileSystemFileHandle correspondants sérialisés dans une table IndexedDB.
Intégration par glisser-déposer
L'API File System Access s'intègre également à l'API glisser-déposer, ce qui permet à l'utilisateur de glisser-déposer des fichiers .c3p dans l'application. Ensuite, à l'aide de la méthode getAsFileSystemHandle() sur l'objet DataTransferItem, l'objet Construire peut obtenir un FileSystemFileHandle. Les fichiers ouverts de cette manière peuvent donc être modifiés et enregistrés immédiatement, sans passer par une autre boîte de dialogue d'enregistrement.
Version NW.js supprimée
Auparavant, l'équipe disposait d'un build NW.js de Construire qui nécessitait une maintenance et une mise à jour séparées pour accéder aux fichiers locaux. Après que Chromium a ajouté la prise en charge de l'API File System Access dans la version 84, les développeurs Construct ont implémenté cette API en 2020. Par la suite, ils ont pu supprimer le build NW.js et l'utiliser exclusivement sur toutes les plates-formes. Cela simplifie le développement et évite d'avoir à lier le moteur de navigation et l'application.
Conclusions
Construire fait un usage intensif des trois méthodes de sélection showOpenFilePicker(), showSaveFilePicker() et showOpenDirectoryPicker(), respectivement, au bénéfice des utilisateurs qui ont appris à dépendre de cette façon de travailler avec Cons. Autre avantage : Construit utilise également l'API File Handling, qui permet à Construct 3 de s'enregistrer en tant que gestionnaire (par défaut) des fichiers .c3p. Cela signifie que l'utilisateur peut effectuer un double clic ou un clic droit et ouvrir les fichiers de son jeu avec Construct 3 directement depuis l'explorateur de fichiers de son système d'exploitation. Miser entièrement sur le Web. Construit utilise de nombreuses autres API de navigateur modernes, comme WebGL, Web Audio, Web Workers, WebAssembly, WebRTC pour les jeux multijoueurs, Local Font Access, WebCodecs pour son nouveau produit d'animation, et bien plus encore. L'objectif a toujours été d'exploiter au maximum la plate-forme Web et de montrer comment d'excellents produits peuvent être développés à partir de celle-ci. N'hésitez pas à essayer la visite guidée et à créer vos propres jeux.