API Truy cập hệ thống tệp cho phép đọc, ghi và quản lý tệp. Tìm hiểu cách Bản dựng 3 sử dụng API này.
Giới thiệu
(Bài viết này cũng có sẵn ở dạng video.)
Xây dựng 3 là trình chỉnh sửa trò chơi do hai anh em Thomas và Ashley Gullen phát triển. Đối với phiên bản thứ ba hiện tại của trình chỉnh sửa trò chơi, hai trò chơi "[đặt cược] rằng trình duyệt là hệ điều hành mới" sau khi được tạo cho Windows và NW.js trước đó. Bạn có thể xem một số trò chơi do ban biên tập phát triển bằng cách khám phá phần giới thiệu hoặc làm việc trong chuyến tham quan có hướng dẫn. Nhờ sức mạnh của web, bạn cũng có thể chỉ cần nhấp vào bất kỳ ví dụ"Tìm nguồn cảm hứng" nào và bắt đầu chỉnh sửa ngay lập tức.
API Truy cập hệ thống tệp trong Bản dựng 3
Build cung cấp tuỳ chọn lưu vào các tệp cục bộ bằng File System Access API (API Quyền truy cập hệ thống tệp) cũng như lưu vào đám mây (Google Drive, OneDrive, Dropbox) và tải bản sao của tệp dự án xuống. Số liệu thống kê mà các nhà phát triển ứng dụng Xây dựng đã thu thập cho thấy 65% lượt lưu được thực hiện bằng API Truy cập hệ thống tệp, điều này chứng minh đó là nội dung mà hầu hết khách hàng muốn sử dụng.
Để lưu, đoạn mã sau đây cho thấy mã sản xuất gốc để lấy FileSystemFileHandle từ phương thức showSaveFilePicker(), sau đó phương thức này sẽ phục vụ để lưu dữ liệu thực tế. Hàm dựng sử dụng tham số tuỳ chọn id. Bạn có thể chỉ định trường id để gợi ý thư mục mà bộ chọn tệp mở ra. Bằng cách chỉ định id, trình duyệt có thể ghi nhớ các thư mục khác nhau cho các mã nhận dạng khác nhau, giúp khởi động hộp thoại một cách nhất quán trong cùng một thư mục tuỳ thuộc vào mã nhận dạng. Ví dụ: tệp cấp độ có thể mở trong Documents/levels/, còn tệp hoạ tiết có thể mở trong Images/textures/. Tham số types là một mảng các loại tệp được hỗ trợ với description hình ảnh người dùng đã bản địa hoá và đối tượng accept cho biết ban đầu chỉ chấp nhận các tệp .c3p có loại MIME application/x-construct3-project.
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;
}
Nhóm Xây dựng nhận thấy rằng việc xử lý các tệp trên hệ thống tệp của người dùng rất trực quan. Công cụ này hoạt động tương tự như các ứng dụng truyền thống dành cho máy tính và tích hợp với các phần mềm khác một cách thuận tiện. Ví dụ: phần mềm sao lưu có thể tạo bản sao lưu tệp của người dùng hoặc dễ dàng gửi công việc đến nơi khác hoặc chỉnh sửa tệp bằng các công cụ bên ngoài. Ngoài ra, họ cũng dùng API Truy cập hệ thống tệp cho nhiều trường hợp sử dụng khác, chẳng hạn như chọn thư mục sao lưu hoặc nhập các thành phần như ảnh động.
Xử lý các tệp và thư mục lớn
Một số khách hàng của nhóm Xây dựng làm việc với các dự án rất lớn, lên đến hàng trăm megabyte. Quá trình lưu một lượng lớn công việc vào một tệp sẽ rất chậm, chưa nói đến việc tải công việc đó lên một dịch vụ đám mây. API Truy cập hệ thống tệp cho phép người dùng thành thạo làm việc với một thư mục cục bộ có tất cả tài sản của họ trong các tệp riêng biệt. Thao tác này giúp lưu rất nhanh vì chỉ cần cập nhật những tệp được thay đổi.
Tiếp tục từ nơi bạn đã dừng lại
Cả hai ô điều khiển tệp và thư mục đều có thể được chuyển đổi tuần tự lên IndexedDB, cho phép Build cung cấp danh sách dự án gần đây được duy trì trong các phiên. Nhờ đó, người dùng có thể truy cập lại vào cùng một tệp hoặc thư mục. Điều này rất thuận tiện cho người dùng. Trên thực tế, khoảng 30% trong số tất cả dự án được mở trong lĩnh vực Xây dựng được mở theo cách này. Ảnh chụp màn hình sau đây cho thấy 2 dự án gần đây, tetris.c3p và columns.c3p, cũng như trong cửa sổ Công cụ cho nhà phát triển, các đối tượng FileSystemFileHandle tương ứng được chuyển đổi tuần tự trong bảng IndexedDB.
Tích hợp kéo và thả
API Truy cập hệ thống tệp cũng tích hợp với API kéo và thả, nên người dùng có thể kéo và thả tệp .c3p vào ứng dụng. Sau đó, quá trình tạo có thể thông qua phương thức getAsFileSystemHandle() trên đối tượng DataTransferItem để có được FileSystemFileHandle, nghĩa là các tệp được mở theo cách này có thể được chỉnh sửa và lưu ngay lập tức mà không phải chuyển qua một hộp thoại lưu tệp riêng.
Đã gỡ bỏ bản dựng NW.js
Trước đây, nhóm này đã có một bản dựng NW.js của Xây dựng cần duy trì và cập nhật riêng để truy cập vào các tệp cục bộ. Sau khi Chromium thêm hỗ trợ cho API Truy cập hệ thống tệp trong phiên bản 84, các nhà phát triển Xây dựng đã triển khai API vào năm 2020 và dưới dạng một sản phẩm phụ có thể gỡ bỏ bản dựng NW.js và sử dụng trình duyệt độc quyền trên tất cả các nền tảng. Điều này giúp đơn giản hoá việc phát triển và tránh phải gói công cụ trình duyệt với ứng dụng.
Kết luận
Cấu trúc sử dụng nhiều phương thức bộ chọn showOpenFilePicker(), showSaveFilePicker() và showOpenDirectoryPicker() tương ứng vì lợi ích của người dùng đã biết cách phụ thuộc vào cách làm việc này với Cấu trúc. Một lợi ích khác là Xây dựng cũng sử dụng API Xử lý tệp, cho phép Xây dựng 3 tự đăng ký làm trình xử lý tệp (mặc định) của các tệp .c3p. Điều này có nghĩa là người dùng có thể doubleclick hoặc nhấp chuột phải và mở bằng Build 3 tệp trò chơi của họ ngay trên trình khám phá tệp của hệ điều hành. Hoàn toàn đặt cược trên web, Build sử dụng vô số API trình duyệt hiện đại khác—như WebGL, Web Audio, Web Worker, WebAssembly, WebRTC cho các trò chơi nhiều người chơi, Quyền truy cập phông chữ cục bộ, WebCodecs cho sản phẩm hoạt ảnh mới của họ, v.v. Mục tiêu của họ luôn là khai thác tối đa nền tảng web và cho thấy cách xây dựng các sản phẩm tuyệt vời trên đó. Vì vậy, hãy nhớ thử chuyến tham quan có hướng dẫn viên của họ và tạo trò chơi của riêng bạn.