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

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

תומאס סטיינר
תומאס סטיינר
אשלי גולן
אשלי גולן

מבוא

(המאמר הזה זמין גם בצורת סרטון.)

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

האפליקציה של Construct 3 שבה מוצג המשתמש שעורך אחד מהפרויקטים לתחילת העבודה.

ממשק API לגישה למערכת קבצים ב-Construct 3

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

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

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

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

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

אני רוצה להמשיך מהמקום שבו הפסקת

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

דף הפתיחה של Construct 3 עם שני פרויקטים אחרונים, tetris.c3p ו-column.c3p. בחלק התחתון של כלי הפיתוח, שמוצגים בהם שני האובייקטים התואמים של FileSystemFileHandle בסדרה של IndexedDB.

שילוב גרירה ושחרור

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

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

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

מסקנות

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