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

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

简介

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

Construct 3 是由兄弟 Thomas 和 Ashley Gullen 开发的游戏编辑器。在游戏编辑器的第三次迭代中,这两个团队在先前针对 Windows 和 NW.js 构建游戏后,完全“[押注] 浏览器将成为新的操作系统”。您可以浏览编辑器的展示版或完成导览,了解使用该编辑器开发的一些游戏。借助网络的强大功能,您还可以点击任何“获取灵感”示例,立即开始编辑。

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

结构 3 中的 File System Access API

Construct 提供了使用 File System Access API 保存到本地文件的选项,以及云端保存(Google 云端硬盘、OneDrive、Dropbox)和下载项目文件副本的选项。Construct 开发者收集的统计数据显示,65% 的保存操作是通过 File System Access API 完成的,这表明大多数客户都希望使用该 API。

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

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

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

处理大型文件和文件夹

Construct 的一些客户使用的是数百兆字节的大型项目。将如此大量的工作保存到单个文件的速度非常慢,更不用说将其上传到云服务了。借助 File System Access API,高级用户可以使用本地文件夹将其所有资源保存在单独的文件中。这样可以非常快速地进行保存,因为只需更新更改后的文件。

从上次停下的地方继续

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

“Construct 3”初始页包含两个近期的项目:tetris.c3p 和 columns.c3p。底部的 DevTools 显示了序列化为 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 build,在所有平台上都使用该浏览器。这样可以简化开发流程,避免将浏览器引擎与应用捆绑在一起。

总结

Construct 会大量使用分别对应的三个选择器方法 showOpenFilePicker()showSaveFilePicker()showOpenDirectoryPicker(),以便用户能够依赖这种使用 Construct 的方式。另一个好处是,Construct 还使用了 File Handling API,它允许 Construct 3 将自己注册为 .c3p 文件的(默认)文件处理程序。这意味着,用户可以直接在操作系统的文件资源管理器中双击或右键点击游戏文件,然后使用 Construct 3 打开这些文件。Construct 完全押注于 Web,因此使用了许多其他新型浏览器 API,例如 WebGL、Web Audio、Web Worker、WebAssembly、WebRTC(用于多人游戏)、Local Font Access、WebCodecs(用于其新动画产品),等等。他们的目标一直是充分利用 Web 平台,并展示如何在此平台上构建出色的产品,因此请务必试用他们的导览,并创建自己的游戏。