איך עורך המשחקים Construct 3 משתמש ב-File System Access API כדי לאפשר למשתמשים לשמור את המשחקים שלהם

File System Access API מאפשר יכולות קריאה, כתיבה וניהול קבצים. איך Construct 3 משתמש ב-API הזה

Thomas Steiner

Ashley Gullen

מבוא

(המאמר הזה זמין גם כסרטון).

Construct 3 הוא עורך משחקים שפותח על ידי האחים תומס ואשלי גולן. בגרסה השלישית הנוכחית של עורך המשחקים שלהם, השניים '[המריצו] על הדפדפן כמערכת ההפעלה החדשה' אחרי שהם פיתחו אותו קודם ל-Windows ול-NW.js. כדי לקבל רושם של כמה משחקים שפותחו בעזרת העורך, תוכלו לחקור את חלון הראווה או לעבוד באמצעות הסיור המודרך. בזכות היכולות המיוחדות של האינטרנט, אפשר גם פשוט ללחוץ על אחת מהדוגמאות בקטע 'קבלת השראה' ולהתחיל לערוך אותה באופן מיידי.

File System Access API ב-Construct 3

ב-Construct יש אפשרות לשמור קבצים מקומיים באמצעות File System Access API, וגם לשמור בענן (Google Drive,‏ OneDrive,‏ Dropbox) ולהוריד עותק של קובץ הפרויקט. נתונים סטטיסטיים שהמפתחים של Construct אספו מראים ש-65% מהשמירות מתבצעות באמצעות File System Access API, מה שמוכיח שזו הדרך שבה רוב הלקוחות רוצים להשתמש.

לצורך שמירה, קטע הקוד הבא מציג את קוד הייצור המקורי לקבלת FileSystemFileHandle מ-method 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;
}

צוות ה-Build גילה שהעבודה עם קבצים במערכת הקבצים של המשתמש הייתה מאוד אינטואיטיבית. היא פועלת באופן דומה לאפליקציות מסורתיות למחשב, ומשתלבת בצורה נוחה עם תוכנות אחרות. לדוגמה, תוכנת גיבוי שיכולה ליצור גיבויים של קבצים של משתמשים, או לשלוח בקלות עבודות למקומות אחרים או לערוך קבצים באמצעות כלים חיצוניים. הם משתמשים ב-File System Access API גם בתרחישי שימוש אחרים, כמו בחירת תיקיית גיבוי או ייבוא נכסים כמו אנימציות.

עבודה עם קבצים ותיקיות גדולים

חלק מהלקוחות של ConBuild עובדים עם פרויקטים גדולים מאוד, בטווח של מאות מגה-בייט. שמירת כמות עבודה גדולה כל כך בקובץ יחיד היא תהליך איטי מאוד, שלא לדבר על העלאה לשירות בענן. באמצעות File System Access API, משתמשים מתקדמים יכולים לעבוד עם תיקייה מקומית שבה כל הנכסים שלהם נמצאים בקבצים נפרדים. כך ניתן לשמור קבצים במהירות רבה מאוד, כי צריך לעדכן רק את הקבצים שהשתנו.

המשך מהמקום שבו הפסקתם

אפשר לסדר בסדרת נתונים (serialize) גם את הלחצנים של הקבצים וגם את הלחצנים של הספריות ב-IndexedDB, וכך לאפשר ל-Construct לספק רשימה של פרויקטים מהזמן האחרון שנשמרת בין סשנים, כדי שמשתמשים יוכלו לגשת שוב לאותו קובץ או לאותה תיקייה. זה מאוד נוח למשתמש. למעשה, כ-30% מכל הפרויקטים שנפתחים ב-Construct נפתחים כך. בצילום המסך הבא מוצגים שני פרויקטים מהזמן האחרון, tetris.c3p ו-columns.c3p, ובחלון של כלי הפיתוח, האובייקטים המתאימים מסוג FileSystemFileHandle שעברו סריאליזציה לטבלת IndexedDB.

שילוב באמצעות גרירה ושחרור

File System Access API משתלב גם עם Drag and Drop API, כך שהמשתמש יכול לגרור ולשחרר קובצי .c3p לאפליקציה. לאחר מכן, באמצעות השיטה getAsFileSystemHandle() באובייקט DataTransferItem, Construct יכול לקבל FileSystemFileHandle. כלומר, קבצים שנפתחים באופן הזה אפשר לערוך ולשמור באופן מיידי, בלי לעבור דרך תיבת דו-שיח נפרדת לשמירת קובץ.

גרסת build של NW.js שהוצאה משימוש

בעבר, לצוות היה build מסוג NW.js של Construct שנדרשים תחזוקה ועדכון בנפרד כדי לגשת לקבצים מקומיים. אחרי ש-Chromium הוסיף תמיכה ב-File System Access API בגרסה 84, מפתחי Construct הטמיעו את ה-API בשנת 2020. כתוצאה מכך, הם יכלו להפסיק את השימוש ב-NW.js build ולהשתמש בדפדפן באופן בלעדי בכל הפלטפורמות. כך הפיתוח פשוט יותר ואין צורך לחבר את מנוע הדפדפן לאפליקציה.

מסקנות

ל-Build יש שימוש נרחב בשלוש שיטות הבורר showOpenFilePicker(), showSaveFilePicker() ו-showOpenDirectoryPicker(), בהתאמה, לתועלת המשתמשים שלמדו להסתמך על דרך העבודה הזו עם build. יתרון נוסף הוא ש-Construct משתמש גם ב-File Handling API, שמאפשר ל-Construct 3 לרשום את עצמו כרכיב טיפול בקובץ (ברירת המחדל) של קובצי .c3p. פירוש הדבר הוא שהמשתמש יכול ללחוץ לחיצה ימנית או ללחוץ על doubleclick, ולפתוח את קובצי המשחק שלו באמצעות Construct 3 ישירות מהסייר של הקבצים של מערכת ההפעלה. ב-Construct מתמקדים באינטרנט, ולכן הם משתמשים בהרבה ממשקי API מודרניים אחרים של דפדפנים – כמו WebGL,‏ Web Audio,‏ Web Workers,‏ WebAssembly,‏ WebRTC למשחקים מרובי משתתפים,‏ Local Font Access,‏ WebCodecs למוצר האנימציה החדש שלהם ועוד. המטרה שלהם תמיד הייתה לנצל את פלטפורמת האינטרנט במלואה ולהראות איך אפשר ליצור מוצרים מעולים על בסיסה. לכן, כדאי לנסות את הסיור המודרך שלהם וליצור משחקים משלכם.