البدء السريع للألعاب الفورية

إنشاء عميل لعبتك

الآن وبعد الانتهاء من إعداد تطبيقك، يجب عليك البدء في إنشاء عميل لعبتك. يحتاج عميل لعبتك توفير ملف index.html في الدليل الجذر. ابدأ التشغيل من خلال استيراد مجموعة SDK الألعاب الفورية عن طريق إضافة هذا السطر.

<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>

تعتمد مجموعة SDK التي نستخدمها بقوة على الوعود لضمان تشغيل الوظائف بشكل غير متزامن. لن تتمكّن من التفاعل مع واجهة مستخدم التحميل إلا بعد حل FBInstant.initializeAsync().

FBInstant.initializeAsync()
  .then(function()
  // Start loading game assets here
);

ولن يقوم عميل اللعبة الذي نستخدمه بتنزيل الحزمة (ملف بتنسيق .zip) مرة واحدة على الفور. ولكن بدلاً من ذلك سيبحث في الجذر عن التكوين (fbapp-config.json) والملف الرئيسي (index.html). وسيبدأ بعد ذلك في تنفيذ المنطق الذي يحتوي عليه الملف الرئيسي، ثم سيبدأ في تنزيل الأصول من هناك. وبوصفك مطوِّرًا، يتوفر لك التحكم بشكل كامل في ترتيب ووقت تحميل الأصول.

وبمجرد البدء في تنزيل الأصول الضرورية المطلوبة لبدء تشغيل اللعبة، يجب عليك إبلاغ مجموعة SDK بمدى تقدم عملية التحميل حتى نتمكّن من عرض حلقة التحميل على ال��اعبين.

var images = ['sprite1', 'sprite2', ...];
for (var i=0; i < images.length; i++) {
  var assetName = images[i];  
  var progress = ((i+1)/images.length) * 100;  
  game.load.image(assetName);

  // Informs the SDK of loading progress
  FBInstant.setLoadingProgress(progress);
}

// Once all assets are loaded, tells the SDK 
// to end loading view and start the game
FBInstant.startGameAsync()
  .then(function() {
  // Retrieving context and player information can only be done
  // once startGameAsync() resolves
  var contextId = FBInstant.context.getID();
  var contextType = FBInstant.context.getType();

  var playerName = FBInstant.player.getName();
  var playerPic = FBInstant.player.getPhoto();
  var playerId = FBInstant.player.getID();

  // Once startGameAsync() resolves it also means the loading view has 
  // been removed and the user can see the game viewport

  game.start();
});

لمزيد من المعلومات حول الأساليب initializeAsync() وsetLoadingProgress() وstartGameAsync()، يرجى الرجوع إلى مرجع مجموعة SDK.

يتم استضافة محتوى الألعاب الفورية على البنية الأساسية لفيسبوك، ولذلك فلست في حاجة إلى استضافة محتوى اللعبة على خدمات تابعة لك أو لجهة خارجية. بمجرد أن تكون اللعبة جاهزة للاختبار، قم بتجميع كل ملفات اللعبة في ملف واحد بتنسيق ‎.zip.

ملاحظة: يجب أن يكون الملف index.html موجودًا في جذر هذا الأرشيف وليس في أي مجلدات فرعية.

لتحميل ملف بتنسيق ‎.zip:

1. من لوحة معلومات التطبيق، انقر على علامة التبويب استضافة الويب
2. حدد الألعاب الفورية من القائمة المنسدلة، ثم انقر على +تحميل الإصدار من أجل تحميل ملف بتنسيق ‎.zip إلى خدمة الاستضافة في فيسبوك.
3. واختر ملفًا بتنسيق ‎.zip وأضف تفاصيل حول التغييرات التي تم إجراؤها على الإصدار، ثم انقر على تحميل
4. ويجب ألا يستغرق هذا الإجراء سوى بضع ثوان لمعالجة ملف بتنسيق ‎.zip. وعندما تتغير الحالة إلى جاهز، انقر على "★" لإرسال الإصدار إلى مرحلة الإنتاج.

يمكنك الآن اختبار الإصدار على جهازك المحمول. سيتم عرض الإصدار المنشور عليك في قائمة الألعاب داخل Messenger ضمن القسم قيد التطوير.

لتسريع عملية التطوير، يمكنك تحميل الإصدار من سطر الأوامر باستخدام واجهة Graph API أو اختباره مباشرة من خادم التطوير الذي تستخدمه. تعرف على المزيد عن اختبار لعبتك الفورية ونشرها ومشاركتها.

السياق يعني التغبير عن أية بيئة تتم ممارسة اللعبة بها. وغالبًا يحدد السياق أمورًا، مثل مجموعة أو منشور على فيسبوك.

يعرض المثال التالي كيفية إرسال تحديث سياق وكيفية ظهوره في محادثة على Messenger.

الخطوة 1: تحديد القوالب في ملف التكوين

من أجل أن تتمكّن من تحديد تحديثاتك المخصصة، يجب عليك إنشاء ملف تكوين باسم fbapp-config.json ووضعه في جذر حزمتك حيث يوجد الملف index.html.

لمزيد من المعلومات حول عمليات التكوين المدعومة، يرجى الرجوع إلى قسم التكوين المستند إلى الحزمة. لأغراض هذا العرض التوضيحي، يجب أن تكون محتويات الملف كما يلي:

{
  "instant_games": {
    "platform_version": "RICH_GAMEPLAY",
    "custom_update_templates": {
      "play_turn": {
        "example": "Edgar played their move"
      }
    }
  }
}

الخطوة 2: إرسال تحديث مخصص باستخدام updateAsync

بمجرد الانتهاء من تحديد عناصر قالبك في ملف التكوين، يمكنك استخدامه لملء الحقل الإلزامي template في FBInstant.updateAsync. فيما يلي كيفية استخدام الاستدعاء في لعبة X-O لإخبار المنافس بأنه حان دوره الآن.

// This will post a custom update. If the game is played in a messenger
// chat thread, this will post a message into the thread with the specified
// image and text message. And when people launch the game from this
// message, those game sessions will be able to access the specified blob
// of data through FBInstant.getEntryPointData().
FBInstant.updateAsync({
  action: 'CUSTOM',
  cta: 'Play',
  image: base64Picture,
  text: {
    default: 'Edgar played their move',
    localizations: {
      en_US: 'Edgar played their move',
      es_LA: '\u00A1Edgar jug\u00F3 su jugada!'
    }
  }
  template: 'play_turn',
  data: { myReplayData: '...' },
  strategy: 'IMMEDIATE',
  notification: 'NO_PUSH'
}).then(function() {
  // Closes the game after the update is posted.
  FBInstant.quit();
});

وإليك شكل الرسالة:

لمزيد من المعلومات عن تحديثات السياق المخصصة، يرجى الرجوع إلى مرجع مجموعة SDK الألعاب الفورية.

للحصول على أفضل الممارسات بما في ذلك وقت مراسلة اللاعبين الآخرين ووقت إرسال الإشعارات لهم والمحتوى الذي يمكن تضمينه في تلك التحديثات، يرجى الرجوع إلى دليل أفضل الممارسات المتوفر لدينا.

ملاحظة: لا يتم إرسال تحديثات السياق خارج Messenger. قد يكون من المفيد بالنسبة إليك تصميم تجربتك باستخدام الأسلوب context.getType() واكتشاف THREAD. ويمكنك التبديل إلى سياق أكثر ملاءمة باستخدام context.switchAsync أو context.chooseAsync أو context.createAsync.