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

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

Thomas Steiner

Twitter GitHub Glitch Mastodon หน้าแรก

แอชลีย์ กูลเลน

Twitter Mastodon

เกริ่นนำ

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

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

File System Access API ใน Construct 3

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

สำหรับการบันทึก ข้อมูลโค้ดต่อไปนี้จะแสดงโค้ดที่ใช้งานจริงดั้งเดิมสำหรับการรับ FileSystemFileHandle จากเมธอด showSaveFilePicker() ซึ่งจะทำหน้าที่บันทึกข้อมูลจริงต่อไป โครงสร้างใช้พารามิเตอร์ตัวเลือก 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 และในหน้าต่าง DevTools ออบเจ็กต์ FileSystemFileHandle ที่ตรงกันมีการเรียงลำดับในตาราง IndexedDB

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

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

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

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

บทสรุป

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