File System Access API 支持读取、写入和文件管理功能。了解 Construct 3 如何使用此 API。
简介
(本文还提供视频形式。)
Construct 3 是由兄弟 Thomas 和 Ashley Gullen 开发的游戏编辑器。在游戏编辑器的第三次迭代中,这两个平台完全“[押注] 浏览器将成为新的操作系统”,之前已针对 Windows 和 NW.js 进行构建。您可以通过浏览编辑器的展示版或完成导览,大致了解使用该编辑器开发的一些游戏。借助网络的强大功能,您还可以点击任何“获取灵感”示例,立即开始编辑。

Construct 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 和 accept 对象,用于告知操作系统最初仅接受 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;
}
Construct 团队发现,在用户的文件系统中处理文件非常直观。它的运作方式与传统桌面应用类似,并且可轻松与其他软件集成。例如,备份软件可以备份用户的文件,或者用于轻松将工作发送到其他位置,或者使用外部工具编辑文件。它们还会将 File System Access API 用于各种其他用例,例如选择备份文件夹或导入动画等资源。
处理大型文件和文件夹
Construct 的一些客户使用的是数百兆字节的大型项目。将如此大量的工作保存到单个文件的速度非常慢,更不用说将其上传到云服务了。借助 File System Access API,高级用户可以处理包含所有资产的单独文件的本地文件夹。这样可以非常快速地保存,因为只需更新更改后的文件。
从上次中断处继续
文件句柄和目录句柄都可以序列化到 IndexedDB,这让 Construct 能够提供会跨会话保留的近期项目列表,以便用户再次访问同一文件或文件夹,这对用户来说非常方便。事实上,在 Construct 中打开的所有项目中,约有 30% 是通过这种方式打开的。以下屏幕截图显示了两个近期项目 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 平台,并展示如何在此平台上构建出色的产品,因此请务必试用他们的导览,并创建自己的游戏。