تحسين اللعبة لتشغيلها على Facebook.com

The Web Games on Facebook and Facebook Gameroom platforms are no longer available for new submissions. This documentation is intended solely for developers with existing games. To learn more, read our blog post.

يوفر فيسبوك العديد من الميزات المصممة لكي تظهر لعبتك بشكل رائع ومتألق في متصفحات اللاعبين، مما يتيح لك التعامل بشكل جيد مع مجموعة كبيرة من أحجام النوافذ، وتمكين اللاعبين واللعبة من استخدام ميزات فيسبوك أثناء ممارسة اللعب، وقبول التفاعلات من فيسبوك دون تعطيل اللعبة.

تحسين التصميم

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

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

لتمكين التصميم المرن، يلزمك أولاً تكوين إعدادات التطبيق في لوحة التحكم في التطبيق. انتقل إلى صفحة الإعدادات الخاصة بالتطبيق وحدّد مكان قسم "التطبيق على فيسبوك"، الذي يبدو مثل الصورة التالية.

إعدادات التصميم المرن الموجودة داخل لوحة معلومات التطبيق.

العرض الثابت

سيؤدي تعيين العرض الثابت على No إلى تعيين عرض إطار iframe الذي يحتوي على لعبتك على 100%. ستتم محاذاة المحتوى في هذه الحالة إلى اليمين وسيتم تغيير حجم إطار iframe ليملأ الصفحة إذا قام اللاعبون بتغيير عرض نوافذ المتصفح لديهم.

سيؤدي تعيين العرض الثابت على Yes إلى إجبار إطار iframe على استخدام عرض بدقة 760 بيكسل. بشكل افتراضي، يشتمل عنصر <body> لإطار iframe في أغلب المتصفحات على margin:8px، ولذلك ستحصل على دقة 744 بيكسل للمحتوى ما لم تتجاوز ذلك.

الارتفاع الثابت

سيؤدي تعيين الارتفاع الثابت على No إلى تعيين ارتفاع إطار iframe الذي يحتوي على تطبيقك على 100%. إذا تم تغيير حجم نافذة المتصفح، فسيتغير حجم إطار iframe أيضًا، ويظهر شريط تمرير إذا كان المحتوى يتجاوز الارتفاع المتوفر.

سيؤدي تعيين الارتفاع الثابت على Yes إلى إجبار إطار iframe على استخدام قيمة ارتفاع تحددها أنت بالبيكسل كإعداد إضافي على لوحة معلومات التطبيق.

التصميم المرن

بمجرد تمكين العرض والارتفاع المرنين عن طريق تعيين الإعدادات الثابتة على No، يلزمك حينئذ تطوير تطبيقك لدعم الأبعاد المتغيرة وكذلك تغيير الحجم الديناميكي حتى يمكن للمشاهد تغيير حجم المتصفح لديه في أي وقت.

يجب أن يتم ضبط حجم التطبيق بحيث يستخدم مساحة الشاشة المتوفرة بالكامل، وإذا لزم الأمر، الاستجابة إلى حدث JavaScript window.onresize لتعديل التخطيط ديناميكيًا. في معظم الحالات، يمكن أن تتعامل تنسيقات HTML وCSS مع تخطيط ديناميكي من دون الحاجة إلى لغة JavaScript، ولكن إذا قمت بتحديد أحجام العناصر بوحدات مطلقة، فقد يتعين عليك تشغيل الرمز أثناء حدث window.onresize. لمنع إعادة التصميم المتقطع أو المفرط، يُنصح بالقيام فقط بتشغيل معالج تغيير الحجم من 30 إلى 60 مرة في الثانية، أو عندما يتجاوز تغيير الحجم حدًا ما.

مثال على HTML

بالنسبة إلى تطبيق HTML، قم بتعيين عرض وارتفاع العنصر الأصلي للتطبيق على 100%. إذا احتجت إلى إعادة توجيه أي من عناصر واجهة المستخدم داخل تطبيقك بتنسيق HTML، فيمكنك القيام بذلك عبر الحدث window.onresize كما هو الحال مع أي صفحة عادية بتنسيق HTML.

يوضح نموذج الرمز التالي عنصر <div> HTML، ويقوم بتعيين لون الخلفية على اللون الأزرق، ويملأ أبعاد المتصفح المتوفرة. سيستجيب للحدث window.onresize ويعرض أبعاد <div> الحالية إذا تم تغيير حجم المتصفح.

<html>
  <head>
    <title>Fluid Layout HTML Example</title>
  </head>
  <body style="margin:0; padding:0; border:0; background-color:#000000">
    <div id="allContent" style="background-color: #0000FF; height:100%">
      <div id="output" style="color: #FFFFFF;" />
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript">
      FB.init({appId : 'APP ID',});
      function echoSize() {
        document.getElementById('output').innerHTML ="HTML Content Width: " + window.innerWidth +" Height: " + window.innerHeight;
        console.log(window.innerWidth + ' x ' + window.innerHeight);
      }
      echoSize();
      window.onresize = echoSize;
    </script>
  </body>
</html>

التعامل مع التصميمات المرنة في مُشغل Flash

إذا كنت تقوم بإنشاء تطبيق Flash، فسيتعين عليك تعيين الأبعاد الأولية للإشارة <object> لديك على 100% لكل من العرض والارتفاع. يتيح ذلك لعميل Flash ملء كامل المساحة المتوفرة. بعد ذلك، سيتعين على رمز ActionScript الاستجابة إلى الحدث Event.RESIZE لكائن stage والتعامل معه. يتم إرسال هذا الحدث كل مرة يقوم فيها اللاعب بتغيير حجم ملف swf؛ ويجب استخدامه لتصميم عناصر واجهة المستخدم تبعًا لذلك.

التعامل مع النوافذ المنبثقة لمربعات الحوار والقوائم في Flash أو المكونات الإضافية الأخرى

أثناء تشغيل اللعبة المستندة إلى Flash أو إلى مكون إضافي آخر، من الممكن أن يتفاعل اللاعب مع عناصر واجهة المستخدم التي تمثل جزءًا من فيسبوك، وهو ما سيتسبب أحيانًا في إخفاء اللعبة. سيحدث ذلك أحيانًا بسبب إجراء تتخذه اللعبة (مثل استدعاء مربع حوار تسجيل الدخول)، وفي أحيان أخرى سيحدث ذلك بسبب تفاعل اللاعب مع عناصر فيسبوك المحيطة باللعبة (مثل نافذة Messenger).

للتعامل بشكل جيد مع هذا الأمر، قد ترغب في إنشاء لقطة شاشة ديناميكية لتطبيقك، ثم استبدال عنصر <object> بهذه الصورة. سيتعين عليك إجراء هذا التبديل في غضون 200 ميللي ثانية. يتيح ذلك عرض مربعات الحوار بشكل صحيح، كما يؤدي إلى تحقيق تجربة مستخدم أكثر تشويقًا وإمتاعًا.

تتمثل أفضل طريقة للقيام بذلك في إنشاء وظيفة في رمز Flash لالتقاط لقطة شاشة، بتنسيق JPEG أو أي تنسيق مضغوط آخر لنمط الرسومات، ثم يقوم Base64 بترميز تلك السلسلة، ثم إيقاف اللعبة مؤقتًا. اعرض هذه الوظيفة (مع تسميتها ربما باسم مثل exportScreenshot) على لغة JavaScript حسبما يكون مناسبًا (في Flash، على سبيل المثال، ستستخدم الوظيفة flash.external.ExternalInterface.addCallback). اعرض أيضًا وظيفة تستأنف اللعبة بمجرد أن تستعيد التركيز.

بعد ذلك، وفي رمز JavaScript، اكتب وظيفة وحدة الاستجابة ليتم استدعاؤها عندما تفقد لعبتك التركيز أو تستعيده، وقم بتسجيلها في بيئة فيسبوك عن طريق تمريرها إلى FB.init() كالمعلمة hideFlashCallback. سيتم تمرير قاموس معلمات إلى وحدة الاستجابة بحيث يحتوي هذا القاموس على مفتاح اسمه state، والذي يتم تعيينه على opened إذا كان ينبغي عليك إخفاء لعبتك. في هذه الحالة، ينبغي على وحدة الاستجابة استدعاء الأسلوب exportScreenshot الخاص بتطبيق Flash، واستخدام بيانات الصورة المشفرة باستخدام Base64 لإنشاء عنوان URL للبيانات، وجعل ذلك src لعنصر img، كما ينبغي عليه نقل العنصر الذي يحتوي على تطبيقك خارج الشاشة باستخدام الأسلوب FB.Canvas.hideFlashElement في JS SDK، واستبداله بالعنصر img. إذا كان قاموس المعلمات الذي تم تمريره إلى وحدة الاستجابة لا يشتمل على state: "opened"، فمن ثمّ يجب استعادة تطبيق Flash على الشاشة مرة أخرى باستخدام FB.Canvas.showFlashElement بدلاً من ذلك.

يمكنك تصدير لقطة شاشة قمت بتعديلها عن طريق تصغيرها إلى 1/4 الحجم (والتي سيتم عرضها كصورة ضبابية) أو عن طريق تعتيم لونها، بحيث يبدو أنها قد تلاشت في الخلفية. سيوضح ذلك للاعب بشكل أكبر أن التركيز ليس على اللعبة، وإنما على عنصر واجهة المستخدم المنبثق.

تجنب عمليات إعادة التحميل عن طريق تعيين `urlhandler`

يقوم الأسلوب FB.Canvas.setUrlHandler() الخاص بمجموعة JavaScript SDK بتسجيل استدعاء يسمح للعبتك بالتعامل بشكل جيد مع المواقف التي ينقر فيها الشخص على رابط في مكان ما في فيسبوك، وهو ما سيتسبب عادةً في إعادة تحميل لعبتك. تشتمل الأمثلة على ما يلي:

كل أحداث المؤشر
الإشارات المرجعية
الطلبات الواردة من قائمة العلامات المرجعية المنسدلة
أحداث إشعارات الطلبات.

عندما ينقر الشخص على حدث مؤشر حول صديقه الذي يحقق إنجازًا في اللعبة، على سبيل المثال، سيتم افتراضيًا توجيه المتصفح إلى عنوان URL الخاص بذلك الإنجاز. يمكن للعبتك، بدلاً من ذلك، اختيار تسجيل استدعاء لعرض الإنجاز داخل التطبيق.

سيتم إجراء الاستدعاء باستخدام حقل يحتوي على مسار عنوان URL، ذي الصلة بعنوان URL لمنصة ألعاب الويب من فيسبوك للتطبيق؛ على سبيل المثال، إذا كان عنوان URL الذي سيتم تحميله هو

http://apps.facebook.com/yourgameXYZ/achievements/cheevo1.php
  ?fb_source=canvas_ticker
  &fb_ticker_mod=achievement
  &fb_action_types=games.achieves

فسيتم طلب الاستدعاء الخاص بك باستخدام معلمة تشبه القاموس

{ 
  path: "/achievements/cheevo1.php?fb_source=canvas_ticker&fb_ticker_mod= achievement&fb_action_types=games.achieves" 
}

لاحظ أن كل استدعاء إلى FB.Canvas.setUrlHandler() يحل محل الاستدعاء المُعين مسبقًا في حالة تعيين أحدها. إضافة إلى ذلك، سيتم إرسال الروابط التي تشير إلى لعبتك على فيسبوك (أي التي تبدأ بـ apps.facebook.com/your_app/ من أجل المعالجة المضمّنة.

معالجة WebGL في المتصفحات غير المدعومة

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

سيظهر للاعبين الذين يستخدمون متصفحًا لا يدعم WebGL الصفحة التالية عند محاولة الوصول إلى لعبتك. تعرض الصفحة روابط إلى WebGL متوافقة مع متصفحات الويب و(إذا كان متصفحك متوفرًا على Facebook Gameroom) رابط إلى عميل Gameroom.

إذا كنت لا تريد إعادة توجيه اللاعبين إلى هذه الصفحة، فيمكنك تعطيل خيار إعادة التوجيه عن طريق تعيين خيار تجاوز تجربة WebGL غير المدعومة على القيمة "نعم". إذا قمت بذلك، فيجب معالجة التجربة في المتصفحات التي لا تدعم WebGL في لعبتك.