File System Access API 提供讀取、寫入和檔案管理功能。瞭解建構 3 如何運用這個 API。
簡介
(這篇文章也可以影片的形式提供)。
建構 3 是由 Thomas 和 Ashley Gullen 兄弟開發的遊戲編輯。針對目前遊戲編輯器的第三次疊代，我們先針對 Windows 和 NW.js 建構了這兩個版本，接著使用「[bet] 是新的瀏覽器是新的作業系統」。您可以瀏覽遊戲的展示區，或瀏覽導覽，瞭解透過編輯器開發的部分遊戲。拜網路的超能力之賜，您也可以點選任何「激發靈感」範例，立即開始編輯。
建構工具 3 中的 File System Access API
建立作業提供使用 File System Access API 和雲端儲存功能 (Google 雲端硬碟、OneDrive、Dropbox)，以及下載專案檔案副本的選項。根據「建築開發人員」收集到的統計資料，顯示 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 用於其他各種用途，例如選取備份資料夾或匯入動畫等素材資源。
使用大型檔案和資料夾
有些 Building 的客戶處理了非常大型的專案，擁有數百 MB 的容量。儲存這麼大量的工作到單一檔案並不容易，這是單純地上傳到雲端服務。進階使用者可以透過 File System Access API 使用本機資料夾，將本機資料夾及其所有資產分別儲存在不同的檔案中。由於只有變更過的檔案需要更新，因此能快速儲存。
繼續瀏覽先前安裝的應用程式
檔案和目錄控點都可以序列化為 IndexedDB，以便「建構」功能可提供在不同工作階段持續存在的近期專案清單，方便使用者再次存取相同的檔案或資料夾，對使用者來說非常方便。事實上，建構期間所開啟的專案約有 30% 都是透過這種方式開啟。以下螢幕截圖顯示最近的兩個專案 (tetris.c3p 和 columns.c3p)，以及在開發人員工具視窗中 (IndexedDB 資料表中序列化的對應 FileSystemFileHandle 物件)。
拖曳整合
File System Access API 也整合了 Drag and Drop API，讓使用者可以將 .c3p 檔案拖曳到應用程式。接著，建構可以經由 DataTransferItem 物件上的 getAsFileSystemHandle() 方法取得 FileSystemFileHandle，這表示透過這種方式開啟的檔案可以立即編輯和儲存，而不必另外開啟另一個檔案儲存對話方塊。
淘汰的 NW.js 版本
先前該團隊的 NW.js 建構版本需要單獨維護及更新，才能存取本機檔案。在 Chromium 在第 84 版開始支援 File System Access API 後，建構開發人員在 2020 年實作這個 API，就產品個別而言，可以淘汰 NW.js 版本，並在所有平台上完全使用瀏覽器。這可以簡化開發作業，且無須將瀏覽器引擎與應用程式組合在一起。
結論
建構時應分別大量使用 showOpenFilePicker()、showSaveFilePicker() 和 showOpenDirectoryPicker() 三種 Picker 方法，讓使用者學會依賴此建構方式。此外，建構也會使用 File Handling API，這個 API 允許 建構 3 自行註冊為 .c3p 檔案的 (預設) 檔案處理常式。也就是說，使用者可以在作業系統的檔案探索工具中，透過滑鼠右鍵建立 3 個遊戲檔案，並按右鍵開啟。「建構」應用程式會使用其他新型瀏覽器 API 的載入功能，例如 WebGL、Web Audio、Web Worker、WebAssembly、多人遊戲的 WebRTC、本機字型存取、新動畫產品的 WebCodecs 等。該公司的目標是全面發揮網路平台的效益，並示範如何運用網路平台打造優質產品，因此請務必體驗導覽產品，自行打造遊戲。