File System Access API memungkinkan kemampuan baca, tulis, dan pengelolaan file. Pelajari cara Construct 3 menggunakan API ini.
Pengantar
(Artikel ini juga tersedia dalam bentuk video.)
Construct 3 adalah editor game yang dikembangkan oleh dua bersaudara Thomas dan Ashley Gullen. Untuk iterasi ketiga editor game mereka saat ini, keduanya sepenuhnya "[bertaruh] pada browser sebagai sistem operasi baru" setelah mem-build untuk Windows dan NW.js sebelumnya. Anda bisa mendapatkan kesan tentang beberapa game yang dikembangkan bersama editor dengan menjelajahi daftarnya 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 API ini adalah yang ingin digunakan oleh sebagian besar pelanggan.
Untuk menyimpan, cuplikan berikut menunjukkan kode produksi asli untuk mendapatkan FileSystemFileHandle dari metode showSaveFilePicker(), yang kemudian berfungsi untuk menyimpan data sebenarnya. Konstruksi menggunakan parameter opsi id. Kolom id dapat ditentukan untuk menyarankan direktori tempat pemilih file dibuka. Dengan menentukan id, browser dapat mengingat direktori yang berbeda untuk ID yang berbeda, yang berfungsi untuk memulai dialog secara konsisten di direktori yang sama, bergantung pada ID. Misalnya, file level dapat dibuka di Documents/levels/, sedangkan file tekstur dapat dibuka di Images/textures/. Parameter types adalah array jenis file yang didukung dengan description visual pengguna yang dilokalkan dan objek accept yang memberi tahu sistem operasi untuk 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 Construct mendapati bahwa bekerja dengan file di sistem file pengguna sangat intuitif. Cara kerjanya mirip dengan aplikasi desktop tradisional, dan terintegrasi dengan mudah dengan software lain. Misalnya, mencadangkan software yang dapat membuat cadangan file pengguna, atau untuk mengirim pekerjaan ke tempat lain dengan mudah, atau mengedit file dengan alat eksternal. Aplikasi ini 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 berukuran besar
Beberapa pelanggan Construct menangani project yang sangat besar, dalam ratusan megabyte. Menyimpan pekerjaan dalam jumlah besar ke satu file akan sangat lambat, apalagi menguploadnya ke layanan cloud. File System Access API memungkinkan pengguna tingkat lanjut menggunakan folder lokal dengan semua aset mereka dalam file terpisah. Hal ini memungkinkan penyimpanan yang sangat cepat, karena hanya file yang diubah yang perlu diperbarui.
Lanjutkan dari konten terakhir yang dibuka
ID file dan direktori dapat diserialisasi ke IndexedDB, sehingga Construct dapat memberikan daftar project terbaru yang dipertahankan 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 menampilkan dua project terbaru, tetris.c3p dan columns.c3p, dan, di jendela DevTools, objek FileSystemFileHandle yang sesuai yang diserialisasi dalam 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 untuk mendapatkan FileSystemFileHandle, yang berarti file yang dibuka dengan cara ini dapat langsung diedit dan disimpan, tanpa harus melalui dialog simpan file terpisah.
Build NW.js yang tidak digunakan lagi
Sebelumnya, tim memiliki build Construct NW.js yang perlu memelihara dan mengupdate secara terpisah untuk mengakses file lokal. Setelah Chromium menambahkan dukungan untuk File System Access API di versi 84, developer Construct menerapkan API pada tahun 2020, dan sebagai produk sampingan, mereka dapat menghentikan build NW.js dan menggunakan browser secara eksklusif di semua platform. Hal ini menyederhanakan pengembangan dan menghindari kebutuhan untuk memaketkan mesin browser dengan aplikasi.
Kesimpulan
Construct banyak menggunakan tiga metode pemilih showOpenFilePicker(), showSaveFilePicker(), dan showOpenDirectoryPicker() untuk kepentingan pengguna yang telah belajar bergantung pada cara kerja ini dengan Construct. Sebagai manfaat tambahan, Construct juga menggunakan File Handling API, yang memungkinkan Construct 3 mendaftarkan dirinya sebagai pengendali file (default) dari file .c3p. Ini berarti pengguna dapat mengklik dua kali atau mengklik kanan dan membuka file game mereka dengan Construct 3 langsung dari file explorer sistem operasi mereka. Dengan sepenuhnya mengandalkan web, Construct menggunakan banyak API browser modern lainnya—seperti WebGL, Web Audio, Web Workers, WebAssembly, WebRTC untuk game multipemain, Local Font Access, WebCodecs untuk produk animasi baru, dan banyak lagi. Tujuan mereka selalu memanfaatkan platform web secara maksimal dan menunjukkan bagaimana produk yang bagus dapat dibuat di atasnya. Jadi, pastikan untuk mencoba tur terpandu mereka dan membuat game Anda sendiri.