كيفية استخدام محرِّر الألعاب Construct 3 لواجهة برمجة التطبيقات File System Access API للسماح للمستخدمين بحفظ ألعابهم

توفّر واجهة برمجة التطبيقات File System Access API إمكانات القراءة والكتابة وإدارة الملفات. تعرَّف على كيفية استخدام Construct 3 لواجهة برمجة التطبيقات هذه.

مقدمة

(تتوفر هذه المقالة أيضًا في شكل فيديو).

Construct 3 هو محرِّر ألعاب أنشأه الأخوان توماس وأشلي غولين. في الإصدار الثالث الحالي من محرّر الألعاب، أصبح "[bet]" هو نظام التشغيل الجديد"" بعد إصداره لنظام التشغيل Windows وNW.js من قبل. يمكنك الحصول على انطباع عن بعض الألعاب التي تم تطويرها من خلال المحرّر عن طريق استكشاف عرضها أو العمل من خلال الجولة الإرشادية. بفضل الإمكانات الهائلة للويب، يمكنك أيضًا النقر على أيّ من أمثلة"الحصول على الإلهام" والبدء في التعديل على الفور.

تطبيق Construct 3 يعرض المستخدم وهو يعدّل أحد المشاريع المبتدئة.

واجهة برمجة التطبيقات File System Access API في Construct 3

توفّر ميزة "إنشاء" خيار الحفظ في الملفات على الجهاز باستخدام File System Access API، بالإضافة إلى ميزة الحفظ في السحابة الإلكترونية (Google Drive وOneDrive وDropbox) وتنزيل نسخة من ملف المشروع. تُظهر الإحصاءات التي جمعها مطوّرو Construct أنّ ‎65% من عمليات الحفظ تتم باستخدام واجهة برمجة التطبيقات File System Access API، ما يشير إلى أنّها الواجهة التي يريد معظم العملاء استخدامها.

لحفظ البيانات، يعرض المقتطف التالي الرمز البرمجي الأصلي للحصول على FileSystemFileHandle من الطريقة showSaveFilePicker()، والتي تُستخدَم بعد ذلك لحفظ البيانات الفعلية. يستخدم Construct مَعلمة الخيارات id. يمكن تحديد الحقل id لاقتراح الدليل الذي يتم فتح أداة اختيار الملفات فيه. من خلال تحديد id، يمكن للمتصفح تذكُّر أدلة مختلفة للمعرّفات المختلفة، ما يؤدي إلى بدء مربّع الحوار بشكلٍ متسق في الدليل نفسه استنادًا إلى المعرّف. على سبيل المثال، يمكن فتح ملفات المستوى في Documents/levels/، بينما يمكن فتح ملفات الزخرفة في Images/textures/. المَعلمة types هي مصفوفة من أنواع الملفات المتوافقة مع عنصر description مرئي مترجم للمستخدم وعنصر accept يطلب من نظام التشغيل في البداية قبول ملفات .c3p فقط من النوع 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 بهذه الطريقة. تعرض لقطة الشاشة التالية مشروعَين حديثَين، tetris.c3p وcolumns.c3p، وفي نافذة "أدوات المطوّر"، عناصر FileSystemFileHandle المقابلة التي تم تسلسلها في جدول IndexedDB.

الصفحة الرئيسية في Construct 3 تتضمّن مشروعَين حديثَين، هما tetris.c3p وcolumns.c3p. في أسفل الصفحة، تعرِض أدوات المطوّر عنصرَي FileSystemFileHandle المعنيّين بتنسيق تسلسلي إلى IndexedDB.

دمج السحب والإفلات

تتكامل واجهة برمجة التطبيقات File System Access API أيضًا مع واجهة Drag and Drop API، ما يتيح للمستخدم سحب ملفات .c3p وإفلاتها في التطبيق. يمكن بعد ذلك لـ Construct الحصول على FileSystemFileHandle من خلال الطريقة getAsFileSystemHandle() في عنصر DataTransferItem، ما يعني أنّه يمكن تعديل الملفات التي يتم فتحها بهذه الطريقة وحفظها على الفور، بدون الحاجة إلى الانتقال إلى مربّع حوار منفصل لحفظ الملفات.

إصدار NW.js المتوقّف

في السابق، كان لدى الفريق إصدار NW.js من Construct كان يحتاج إلى الصيانة والتحديث بشكل منفصل للوصول إلى الملفات المحلية. بعد أن أضاف Chromium واجهة برمجة التطبيقات File System Access API في الإصدار 84، نفّذ مطوّرو Construct واجهة برمجة التطبيقات في عام 2020، ونتيجةً لذلك، تم إيقاف إصدار NW.js نهائيًا واستخدام المتصفّح حصريًا على جميع المنصات. ويؤدي ذلك إلى تبسيط عملية التطوير وتجنُّب الحاجة إلى تجميع محرّك المتصفّح مع التطبيق.

الاستنتاجات

يستخدم Construct بشكل كبير طرق الاختيار الثلاث showOpenFilePicker() وshowSaveFilePicker() وshowOpenDirectoryPicker() على التوالي، وذلك لفائدة المستخدمين الذين تعلموا الاعتماد على طريقة العمل هذه مع Construct. كميزة إضافية، يستخدم Construct أيضًا File Handling API، ما يسمح لـ Construct 3 بتسجيل نفسه كمعالج ملفات (تلقائي) لملفات .c3p. وهذا يعني أنّه يمكن للمستخدم النقر مرّتين أو النقر بزر الماوس الأيمن وفتح ملفات اللعبة باستخدام Construct 3 مباشرةً من مستكشف الملفات في نظام التشغيل. تعتمد Construct على الويب بالكامل، لذا فهي تستخدم الكثير من واجهات برمجة التطبيقات الحديثة للمتصفّحات، مثل WebGL وWeb Audio وWeb Workers وWebAssembly وWebRTC للألعاب المتعدّدة اللاعبين وLocal Font Access وWebCodecs لمنتجها الجديد للرسوم المتحركة وغير ذلك. وهدفهم دائمًا هو الاستفادة بشكل كامل من منصة الويب وتوضيح كيفية إنشاء منتجات رائعة فوقها، لذا احرص على تجربة جولتهم الإرشادية وإنشاء ألعابك الخاصة.