File System Access API memungkinkan kemampuan membaca, menulis, dan mengelola file. Pelajari cara Construct 3 menggunakan API ini.
Pengantar
(Artikel ini juga tersedia dalam bentuk video.)
Construct 3 adalah editor game yang dikembangkan oleh Thomas dan Ashley Gullen bersaudara. Untuk iterasi ketiga dari editor game mereka saat ini, keduanya sepenuhnya "[bet] pada browser menjadi sistem operasi baru" setelah membangun untuk Windows dan NW.js sebelumnya. Anda dapat memperoleh kesan tentang beberapa game yang dikembangkan dengan editor dengan menjelajahi koleksi game atau mengikuti tur terpandu. Berkat kecanggihan web, Anda juga dapat mengklik salah satu contoh"Dapatkan inspirasi" dan langsung mulai mengedit.
File System Access API di Construct 3
Construct menyediakan opsi untuk menyimpan ke file lokal dengan File System Access API, serta penyimpanan di cloud (Google Drive, OneDrive, Dropbox), dan mendownload salinan file project. Statistik yang dikumpulkan developer Construct menunjukkan bahwa 65% penyimpanan dilakukan dengan File System Access API, yang menunjukkan bahwa inilah yang paling ingin digunakan oleh sebagian besar pelanggan.
Untuk menyimpan, cuplikan berikut menampilkan kode produksi asli untuk mendapatkan FileSystemFileHandle dari metode showSaveFilePicker(), yang kemudian berfungsi untuk menyimpan data aktual. Construct memanfaatkan parameter opsi id. Kolom id dapat ditentukan untuk menyarankan direktori tempat alat pilih file terbuka. Dengan menentukan id, browser dapat mengingat direktori yang berbeda untuk ID berbeda, yang berfungsi untuk memulai dialog secara konsisten di direktori yang sama, bergantung pada ID-nya. Misalnya, file level dapat terbuka di Documents/levels/, sedangkan file tekstur dapat terbuka di Images/textures/. Parameter types adalah array jenis file yang didukung dengan visual pengguna yang dilokalkan description dan objek accept yang memberi tahu sistem operasi agar awalnya hanya menerima file .c3p dengan jenis 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;
}
Tim Konstruksi melihat bahwa bekerja dengan file pada sistem file pengguna sangat intuitif. Cara kerjanya mirip dengan aplikasi desktop tradisional, dan mudah diintegrasikan dengan software lain. Misalnya, software pencadangan yang dapat membuat cadangan file pengguna, atau untuk mengirimkan pekerjaan ke tempat lain dengan mudah, atau mengedit file dengan alat eksternal. Mereka juga menggunakan File System Access API untuk berbagai kasus penggunaan lainnya, seperti memilih folder cadangan atau mengimpor aset seperti animasi.
Bekerja dengan file dan folder yang besar
Beberapa pelanggan Construct mengerjakan project yang sangat besar, dalam ratusan megabyte. Menyimpan pekerjaan sebanyak itu ke satu file akan sangat lambat, apalagi menguploadnya ke layanan cloud. File System Access API memungkinkan pengguna super menggunakan folder lokal dengan semua asetnya dalam file terpisah. Hal ini memungkinkan penyimpanan yang sangat cepat, karena hanya file yang diubah yang perlu diperbarui.
Lanjutkan dari konten terakhir yang dibuka
Baik tuas file dan direktori dapat diserialisasi ke IndexedDB, memungkinkan Construct untuk memberikan daftar proyek terbaru yang disimpan di seluruh sesi, sehingga pengguna dapat mengakses file atau folder yang sama lagi, yang sangat memudahkan pengguna. Faktanya, sekitar 30% dari semua project yang dibuka di Construct dibuka dengan cara ini. Screenshot berikut menunjukkan dua project terbaru, tetris.c3p dan columns.c3p, dan, di jendela DevTools, objek FileSystemFileHandle yang sesuai diserialisasi di tabel IndexedDB.
Integrasi tarik lalu lepas
File System Access API juga terintegrasi dengan Drag and Drop API, sehingga pengguna dapat menarik lalu melepas file .c3p ke aplikasi. Kemudian, konstruksi dapat melalui metode getAsFileSystemHandle() pada objek DataTransferItem mendapatkan FileSystemFileHandle, yang berarti file yang dibuka dengan cara ini dapat diedit dan disimpan dengan segera, tanpa harus melalui dialog penyimpanan file terpisah.
Build NW.js yang dihentikan
Sebelumnya, tim memiliki build Construct NW.js yang memerlukan pemeliharaan dan update secara terpisah untuk mengakses file lokal. Setelah Chromium menambahkan dukungan untuk File System Access API di versi 84, developer Construct menerapkan API tersebut pada tahun 2020, dan sebagai produk sampingan, dapat menghentikan build NW.js dan menggunakan browser secara eksklusif di semua platform. Hal ini menyederhanakan pengembangan dan menghindari kebutuhan untuk menggabungkan mesin browser dengan aplikasi.
Kesimpulan
Construct memanfaatkan tiga metode pemilih showOpenFilePicker(), showSaveFilePicker(), dan showOpenDirectoryPicker() secara berurutan untuk kepentingan pengguna yang telah belajar bergantung pada cara menggunakan Construct ini. Sebagai manfaat tambahan, Construct juga menggunakan File Handling API, yang memungkinkan Construct 3 mendaftarkan dirinya sebagai pengendali file (default) dari file .c3p. Ini berarti bahwa pengguna dapat melakukan doubleclick atau mengklik kanan dan membuka dengan Construct 3 file game mereka langsung dari file explorer sistem operasinya. Bertaruh sepenuhnya di web, Construct menggunakan banyak API browser modern lainnya—seperti WebGL, Audio Web, Web Worker, WebAssembly, WebRTC untuk game multiplayer, Akses Font Lokal, WebCodecs untuk produk animasi barunya, dan masih banyak lagi. Tujuan mereka adalah memanfaatkan platform web sepenuhnya dan menunjukkan bagaimana produk-produk hebat dapat dibangun di atasnya, jadi pastikan untuk mencoba tur terpandu mereka dan membuat game Anda sendiri.