File System Access API 可提供讀取、寫入和檔案管理功能。瞭解 Construct 3 如何使用這個 API。
簡介
(這篇文章也有影片版本)。
Construct 3 是 Thomas 和 Ashley Gullen兄弟開發的遊戲編輯器。針對目前第三版的遊戲編輯器，這兩個版本在先前為 Windows 和 NW.js 建構後，就已完全「將瀏覽器視為新作業系統」。你可以瀏覽展示模式或觀看導覽，體驗使用編輯器開發的部分遊戲。多虧了網路的強大功能，你也可以直接點選任何「獲得靈感」範例，立即開始編輯。
File System Access API 的建構步驟 3
建構提供選擇透過 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;
}
建築團隊發現使用者檔案系統中的檔案作業相當直覺。其運作方式與傳統桌面應用程式類似，且可輕鬆與其他軟體整合。例如備份軟體，可備份使用者的檔案，或輕鬆將工作傳送到其他位置，或使用外部工具編輯檔案。他們也會使用 File System Access API 執行其他用途，例如選取備份資料夾或匯入動畫等資產。
使用大型檔案和資料夾
Construct 的部分客戶會處理數百 MB 的大型專案。將這麼大量的工作儲存至單一檔案的速度會非常緩慢，更不用說上傳至雲端服務。File System Access API 可讓進階使用者在本機資料夾中處理所有資產，並將資產存放在不同的檔案中。這樣一來，系統只需要更新已變更的檔案，就能快速儲存內容。
繼續瀏覽先前安裝的應用程式
檔案和目錄控制代碼都能序列化為 IndexedDB，讓 build 提供在整個工作階段中持續存在的近期專案清單，讓使用者能再次存取相同的檔案或資料夾，因此對使用者來說非常實用。事實上，在 build 中開啟的所有專案中，約有 30% 是以這種方式開啟。下圖顯示兩個近期專案：tetris.c3p 和 columns.c3p，以及在 DevTools 視窗中，對應的 FileSystemFileHandle 物件在 IndexedDB 表格中序列化。
拖曳整合
File System Access API 也與 Drag and Drop API 整合，因此使用者可以將 .c3p 檔案拖曳到應用程式。接著，建構函式可透過 DataTransferItem 物件的 getAsFileSystemHandle() 方法取得 FileSystemFileHandle，這表示以這種方式開啟的檔案可立即編輯及儲存，不必透過個別的檔案儲存對話方塊。
已淘汰的 NW.js 版本
先前，團隊有一個 NW.js 版本的 Construct，需要另外維護及更新才能存取本機檔案。在 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 Workers、WebAssembly、WebRTC (用於多人遊戲)、Local Font Access、WebCodecs (用於新動畫產品) 等等。他們的目標一直是充分運用網路平台，並展示如何在該平台上建立出色的產品，因此請務必試試他們的導覽功能，並自行建立遊戲。