เครื่องมือแก้ไขเกม Construct 3 ใช้ File System Access API เพื่อให้ผู้ใช้บันทึกเกมได้อย่างไร

File System Access API ช่วยให้สามารถอ่าน เขียน และจัดการไฟล์ได้ ดูวิธีที่ Construct 3 ใช้ API นี้

Thomas Steiner

Ashley Gullen

บทนำ

(บทความนี้มีให้บริการในรูปแบบวิดีโอด้วย)

Construct 3 เป็นโปรแกรมแก้ไขเกมที่พัฒนาโดยพี่น้อง Thomas และ Ashley Gullen สำหรับการปรับปรุงแก้ไขครั้งที่สามจากตัวแก้ไขเกมของพวกเขา ทั้งคู่ได้"[เดิมพัน] เบราว์เซอร์ที่ใช้เป็นระบบปฏิบัติการใหม่" หลังจากสร้างสำหรับ Windows และ NW.js มาก่อน คุณสร้างความประทับใจให้กับเกมบางเกมที่พัฒนาโดยทีมบรรณาธิการได้โดยการสำรวจโชว์หรือดำเนินการผ่านทัวร์ชมพร้อมคำแนะนำ คุณสามารถคลิกผ่านตัวอย่าง"รับแรงบันดาลใจ" รายการใดก็ได้เพื่อเริ่มแก้ไขทันที ด้วยความอัจฉริยะของเว็บ

File System Access API ใน Construct 3

Construct มีตัวเลือกในการบันทึกไปยังไฟล์ในเครื่องด้วย File System Access API รวมถึงการบันทึกในระบบคลาวด์ (Google ไดรฟ์, OneDrive, Dropbox) และการดาวน์โหลดสำเนาไฟล์โปรเจ็กต์ สถิติที่นักพัฒนา Construct รวบรวมไว้แสดงให้เห็นว่าการบันทึก 65% ดำเนินการด้วย File System Access API ซึ่งแสดงให้เห็นว่า API นี้เป็นสิ่งที่ลูกค้าส่วนใหญ่ต้องการใช้

สําหรับการบันทึก ข้อมูลโค้ดต่อไปนี้แสดงโค้ดเวอร์ชันที่ใช้งานจริงเดิมสําหรับรับ FileSystemFileHandle จากเมธอด showSaveFilePicker() ซึ่งจะใช้ในการบันทึกข้อมูลจริง Construct ใช้พารามิเตอร์ตัวเลือก id ระบุช่อง id เพื่อแนะนำไดเรกทอรีที่เครื่องมือเลือกไฟล์จะเปิดขึ้น การระบุ id จะช่วยให้เบราว์เซอร์จดจำไดเรกทอรีต่างๆ สำหรับรหัสต่างๆ ได้ ซึ่งจะเป็นประโยชน์ในการเริ่มกล่องโต้ตอบอย่างสม่ำเสมอในไดเรกทอรีเดียวกันโดยขึ้นอยู่กับรหัส เช่น ไฟล์ระดับอาจเปิดใน Documents/levels/ ส่วนไฟล์พื้นผิวอาจเปิดใน Images/textures/ พารามิเตอร์ types คืออาร์เรย์ของประเภทไฟล์ที่รองรับซึ่งมี description ภาพของผู้ใช้ที่แปลแล้ว และออบเจ็กต์ accept ที่บอกระบบปฏิบัติการให้ยอมรับเฉพาะไฟล์ .c3p ที่มีประเภท 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;
}

ทีม Construct พบว่าการทำงานกับไฟล์ในระบบไฟล์ของผู้ใช้นั้นใช้งานง่ายมาก ซึ่งทำงานคล้ายกับแอปบนเดสก์ท็อปแบบดั้งเดิมและผสานรวมกับซอฟต์แวร์อื่นๆ ได้อย่างสะดวก เช่น ซอฟต์แวร์สำรองข้อมูลที่สามารถสำรองข้อมูลไฟล์ของผู้ใช้ หรือการส่งงานไปยังสถานที่อื่นอย่างง่ายดาย หรือแก้ไขไฟล์ด้วยเครื่องมือภายนอก นอกจากนี้ ยังใช้ File System Access API สำหรับกรณีการใช้งานอื่นๆ อีกมากมาย เช่น การเลือกโฟลเดอร์สํารองข้อมูล หรือการนําเข้าชิ้นงาน เช่น ภาพเคลื่อนไหว

การทำงานกับไฟล์และโฟลเดอร์ขนาดใหญ่

ลูกค้าบางรายของ Construct ทำงานกับโปรเจ็กต์ขนาดใหญ่มากซึ่งมีขนาดหลายร้อยเมกะไบต์ การบันทึกงานจำนวนมากลงในไฟล์เดียวจะช้ามาก ยังไม่นับการอัปโหลดไปยังบริการระบบคลาวด์ File System Access API ช่วยให้ผู้ใช้ขั้นสูงทำงานกับโฟลเดอร์ในเครื่องที่มีชิ้นงานทั้งหมดเป็นไฟล์แยกต่างหากได้ วิธีนี้ช่วยให้บันทึกได้อย่างรวดเร็ว เนื่องจากต้องอัปเดตเฉพาะไฟล์ที่มีการเปลี่ยนแปลงเท่านั้น

ดำเนินการต่อจากจุดที่คุณค้างไว้

ทั้งตัวแฮนเดิลไฟล์และไดเรกทอรีสามารถจัดรูปแบบเป็น IndexedDB ได้ ซึ่งจะช่วยให้ Construct แสดงรายการโปรเจ็กต์ล่าสุดที่เก็บไว้ตลอดเซสชันได้ ผู้ใช้จึงเข้าถึงไฟล์หรือโฟลเดอร์เดิมได้อีกครั้ง ซึ่งให้ความสะดวกอย่างยิ่งแก่ผู้ใช้ ในความเป็นจริง ประมาณ 30% ของทุกโปรเจ็กต์ที่เปิดใน Construct จะเปิดในลักษณะนี้ ภาพหน้าจอต่อไปนี้แสดงโปรเจ็กต์ล่าสุด 2 รายการ ได้แก่ tetris.c3p และ columns.c3p และในหน้าต่างเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ ออบเจ็กต์ FileSystemFileHandle ที่เกี่ยวข้องจะได้รับการแปลงเป็นอนุกรมในตาราง IndexedDB

การผสานรวมแบบลากและวาง

File System Access API ยังผสานรวมกับ Drag and Drop API ด้วย เพื่อให้ผู้ใช้ลากและวางไฟล์ .c3p ลงในแอปพลิเคชันได้ จากนั้น Construct จะได้รับ FileSystemFileHandle ผ่านเมธอด getAsFileSystemHandle() บนออบเจ็กต์ DataTransferItem ซึ่งหมายความว่าไฟล์ที่เปิดด้วยวิธีนี้จะแก้ไขและบันทึกได้ทันทีโดยไม่ต้องผ่านกล่องโต้ตอบการบันทึกไฟล์แยกต่างหาก

บิลด์ NW.js ที่เลิกใช้งานแล้ว

ก่อนหน้านี้ทีมมีบิลด์ NW.js ของโครงสร้างที่ต้องบำรุงรักษาและอัปเดตแยกกันเพื่อเข้าถึงไฟล์ในเครื่อง หลังจาก Chromium เพิ่มการรองรับ File System Access API ในเวอร์ชัน 84 นักพัฒนาซอฟต์แวร์ Construct ได้ติดตั้งใช้งาน API ดังกล่าวในปี 2020 และผลพลอยได้คือสามารถเลิกใช้งานบิลด์ NW.js และใช้เบราว์เซอร์ดังกล่าวได้เฉพาะในแพลตฟอร์มทั้งหมด วิธีนี้ช่วยให้การพัฒนาง่ายขึ้นและไม่ต้องรวมเครื่องมือเบราว์เซอร์ไว้ในแอป

บทสรุป

Construct ใช้ประโยชน์จากเครื่องมือเลือกทั้ง 3 เมธอด showOpenFilePicker(), showSaveFilePicker() และ showOpenDirectoryPicker() ตามลำดับเพื่อให้เกิดประโยชน์ต่อผู้ใช้ที่เรียนรู้วิธีใช้งาน Construct เช่นนี้ ข้อดีอีกอย่างหนึ่งคือ Construct จะใช้ File Handling API ซึ่งจะช่วยให้ Construct 3 ลงทะเบียนตัวเองเป็นตัวแฮนเดิลไฟล์ (ค่าเริ่มต้น) ของไฟล์ .c3p ได้ ซึ่งหมายความว่าผู้ใช้สามารถดับเบิลคลิกหรือคลิกขวาและเปิดไฟล์เกมด้วย Construct 3 ได้โดยตรงจากโปรแกรมสำรวจไฟล์ของระบบปฏิบัติการ เดิมพันบนเว็บ Construct จะใช้ API เบราว์เซอร์สมัยใหม่อื่นๆ จำนวนมาก เช่น WebGL, Web Audio, Web Workers, WebAssembly, WebRTC สำหรับเกมที่มีผู้เล่นหลายคน, การเข้าถึงแบบอักษรในเครื่อง, WebCodecs สำหรับผลิตภัณฑ์ภาพเคลื่อนไหวใหม่ และอื่นๆ อีกมากมาย โดยมีเป้าหมายมาโดยตลอดว่าให้ใช้แพลตฟอร์มเว็บให้เกิดประโยชน์สูงสุดและแสดงให้เห็นว่าควรสร้างผลิตภัณฑ์ที่ยอดเยี่ยมต่อยอดไปได้อย่างไร ดังนั้นอย่าลืมลองทัวร์ชมพร้อมคำแนะนำและสร้างเกมของคุณเอง