游戏编辑器 Construct 3 如何使用 File System Access API 让用户保存游戏

File System Access API 提供读取、写入和文件管理功能。了解 Construct 3 如何使用此 API。

阿什利·古伦
Ashley Gullen

简介

(本文也可以视频的形式提供。)

《Construct 3》是一款游戏编辑器,由 Thomas 和 Ashley Gullen 兄弟开发。对于目前的第三代游戏编辑器,在针对 Windows 和 NW.js 进行构建后,两者完全“[肯定] 将浏览器视为新的操作系统”。您可以浏览通过编辑器开发的一些游戏的橱窗或浏览导览,大致了解一下这款游戏。借助网络的超能力,您还可以点击任何“获得灵感”示例,立即开始编辑。

显示用户正在修改其中一个入门项目的 Construct 3 应用。

构造 3 中的 File System Access API

“构造”提供了使用 File System Access API 保存到本地文件的选项,还提供云端存档(Google 云端硬盘、OneDrive、Dropbox)以及下载项目文件副本的选项。Construct 开发者收集的数据显示,65% 的保存是通过 File System Access API 完成的,这表明这正是大多数客户想要的应用。

为了便于保存,以下代码段显示了用于从 showSaveFilePicker() 方法获取 FileSystemFileHandle 的原始正式代码,该代码随后会保存实际数据。构造函数使用 id 选项参数。您可以指定 id 字段,以建议用于打开文件选择器的目录。通过指定 id,浏览器可以记住不同 ID 的不同目录,从而根据 ID 在同一目录中一致地启动对话框。例如,级别文件可以在 Documents/levels/ 中打开,而纹理文件可以在 Images/textures/ 中打开。types 参数是受支持文件类型的数组,其中包含本地化的用户可视 descriptionaccept 对象,后者会告知操作系统最初仅接受 MIME 类型为 application/x-construct3-project.c3p 文件。

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;
}

构建团队发现,处理用户文件系统中的文件非常直观。它的工作方式与传统的桌面应用类似,并且可以方便地与其他软件集成。例如,可以备份用户文件、轻松将工作内容发送到其他位置或使用外部工具编辑文件的备份软件。它们还会将 File System Access API 用于各种其他用例,例如选择备份文件夹或导入动画等素材资源。

处理大型文件和文件夹

Construct 的部分客户需要处理数百兆字节的超大型项目。将大量工作保存到单个文件速度非常慢,更不用说将其上传到云服务了。File System Access API 可让高级用户处理本地文件夹,并将其所有资源放在单独的文件中。这样一来,您只需更新已更改的文件,便可非常快速地保存。

从上次停下的地方继续

文件和目录句柄都可以序列化到 IndexedDB,从而允许 Construct 提供跨会话持久保留的最近项目列表,以便用户可以再次访问同一文件或文件夹,这为用户提供了极大的便利。事实上,在 Construct 中打开的所有项目中,大约有 30% 是以这种方式打开的。以下屏幕截图显示了最近两个项目 tetris.c3pcolumns.c3p,以及在 DevTools 窗口中序列化的相应 FileSystemFileHandle 对象(已在 IndexedDB 表中)。

Construct 3 初始页,其中包含最近两个项目(tetris.c3p 和 column.c3p)。在底部的开发者工具中,显示已序列化到 IndexedDB 的相应两个 FileSystemFileHandle 对象。

拖放集成

File System Access API 还与 Drag and Drop API 集成,因此用户可将 .c3p 文件拖放到应用中。然后,构造函数可以通过 DataTransferItem 对象的 getAsFileSystemHandle() 方法获取一个 FileSystemFileHandle,这意味着可以立即编辑和保存以这种方式打开的文件,而无需通过单独的文件保存对话框进行保存。

已废弃的 NW.js build

之前,该团队使用的是 Construct 的 NW.js build,需要单独维护和更新才能访问本地文件。Chromium 在版本 84 中增加对 File System Access API 的支持后,Construct 开发者在 2020 年实现了该 API,其副产品是淘汰 NW.js 版本,并仅在所有平台上使用这款浏览器。这简化了开发,并且无需将浏览器引擎与应用捆绑在一起。

总结

Construct 大量利用了 showOpenFilePicker()showSaveFilePicker()showOpenDirectoryPicker() 这三种选择器方法,这有利于其用户学习使用 Construct 的这种使用方式。另一个好处是 Construct 还使用 File Handling API,让 Construct 3 能够将自己注册为 .c3p 文件的(默认)文件处理程序。这意味着,用户可以双击或右键点击,并直接从其操作系统的文件浏览器中使用 Construct 3 打开他们的游戏文件。我们充分运用网络技术,Construct 使用了很多其他现代浏览器 API,例如 WebGL、Web Audio、Web Worker、WebAssembly、适用于多人游戏的 WebRTC、Local Font Access、WebCodecs 的新动画产品等等。他们一直致力于充分利用网络平台,并展示如何在该平台上构建出色的产品,因此请务必试用他们的导览,制作你自己的游戏。