L'API File System Access permet d'effectuer des opérations 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 itération actuelle de leur éditeur de jeu, les deux [misent] sur le navigateur comme nouveau système d'exploitation après avoir compilé pour Windows et NW.js. Pour vous faire une idée de certains jeux développés avec l'éditeur, explorez sa présentation ou suivez la visite guidée. Grâce aux super-pouvoirs du Web, vous pouvez également cliquer sur l'un des exemples "Trouvez l'inspiration" et commencer à modifier immédiatement.
API File System Access dans Construct 3
Construct vous permet d'enregistrer des fichiers locaux avec l'API File System Access, ainsi que d'enregistrer des fichiers dans le cloud (Google Drive, OneDrive, Dropbox) et de télécharger une copie du fichier de projet. Les statistiques recueillies par les développeurs Construct montrent que 65% des enregistrements sont effectués 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 de code suivant montre le code de production d'origine permettant d'obtenir un FileSystemFileHandle à partir de la méthode showSaveFilePicker(), qui sert ensuite à enregistrer les données réelles. Construct utilise le paramètre d'options id. Vous pouvez spécifier le champ id pour suggérer le répertoire dans lequel s'ouvre le sélecteur de fichiers. En spécifiant un id, le navigateur peut mémoriser différents répertoires pour différents ID, ce qui permet de lancer 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 de types de fichiers compatibles avec un description visuel localisé pour l'utilisateur et un objet accept qui indique au système d'exploitation d'accepter initialement uniquement les fichiers .c3p avec le 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 Construct a trouvé que travailler avec des fichiers dans le système de fichiers de l'utilisateur était très intuitif. Il fonctionne de manière similaire aux applications de bureau traditionnelles et s'intègre facilement à d'autres logiciels. Par exemple, il s'agit de logiciels de sauvegarde capables de sauvegarder des fichiers d'utilisateurs, d'envoyer facilement du travail à d'autres endroits ou de modifier des fichiers à l'aide d'outils externes. Ils utilisent également l'API File System Access pour divers autres cas d'utilisation, tels que 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 de grande envergure, de l'ordre de plusieurs centaines de mégaoctets. Enregistrer une telle quantité de travail dans un seul fichier est extrêmement lent, sans parler de l'importer dans un service cloud. L'API File System Access permet aux utilisateurs expérimentés de travailler avec un dossier local contenant tous leurs éléments dans des fichiers distincts. Cela permet d'enregistrer très rapidement, car seuls les fichiers modifiés doivent être mis à jour.
Reprenez là où vous en étiez
Les poignées de fichiers et de répertoires peuvent être sérialisées dans IndexedDB, ce qui permet à Construct de fournir une liste de projets récents qui est conservée entre les sessions. Les utilisateurs peuvent ainsi accéder à nouveau au même fichier ou au même dossier, ce qui est très pratique. En fait, environ 30% des projets ouverts dans Construction le sont de cette façon. La capture d'écran suivante montre deux projets récents, tetris.c3p et columns.c3p. Dans la fenêtre "DevTools", les objets FileSystemFileHandle correspondants sont 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. Construct peut ensuite obtenir un FileSystemFileHandle via la méthode getAsFileSystemHandle() de l'objet DataTransferItem. Cela signifie que les fichiers ouverts de cette manière peuvent être modifiés et enregistrés immédiatement, sans avoir à passer par une boîte de dialogue d'enregistrement de fichier distincte.
Compilation NW.js supprimée
Auparavant, l'équipe disposait d'une version NW.js de Construct qui devait être gérée et mise à jour séparément 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é l'API en 2020. Ils ont ainsi pu abandonner le build NW.js et utiliser le navigateur exclusivement sur toutes les plates-formes. Cela simplifie le développement et évite d'associer le moteur de navigateur à l'application.
Conclusions
Construct utilise largement les trois méthodes de sélecteur showOpenFilePicker(), showSaveFilePicker() et showOpenDirectoryPicker(), respectivement, pour le plus grand bénéfice de ses utilisateurs qui ont appris à dépendre de cette façon de travailler avec Construct. De plus, Construct utilise également l'API de gestion des fichiers, qui permet à Construct 3 de s'enregistrer en tant que gestionnaire de fichiers (par défaut) des fichiers .c3p. Cela signifie que l'utilisateur peut faire un clic droit ou cliquer avec le bouton droit de la souris et ouvrir avec Construct 3 ses fichiers de jeu directement depuis l'explorateur de fichiers de son système d'exploitation. Pari entièrement sur le Web, Construct utilise de nombreuses autres API de navigateur modernes, telles que 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. Son objectif a toujours été de tirer pleinement parti de la plate-forme Web et de montrer comment créer d'excellents produits en s'appuyant sur celle-ci. N'hésitez donc pas à essayer la visite guidée et à créer vos propres jeux.