إنشاء دحرجة

Roll It هي تجربة Chrome تعيد ابتكار لعبة كلاسيكية على الممرات الخشبية باستخدام المتصفّح فقط على هاتفك والكمبيوتر. يتيح لك المتصفّح على هاتفك توجيه الكرة ورميها بنقرة من معصمك، بينما يعرض المتصفّح على جهاز الكمبيوتر الرسومات في الوقت الفعلي للعبة Roll It باستخدام WebGL وCanvas. يتواصل الجهازان عبر Websockets. ليس هناك أي تطبيقات. لم يتم تنزيل أي محتوى. ما مِن رموز مميّزة. ما عليك سوى استخدام متصفّح حديث.

بتوجيه من Google Creative Lab، طوّرت شركة Legwork تجربة المستخدم والواجهات وبيئة اللعبة، ثم تعاونت مع شريك التطوير Mode Set لإنشاء لعبة Roll It. خلال فترة المشروع، واجهنا عددًا من التحديات الفريدة. توضِّح هذه المقالة بعض التقنيات التي استخدمناها والخدع التي اكتشفناها والدروس التي تعلمناها أثناء تطوير لعبة Roll It.

سير العمل في التصميم الثلاثي الأبعاد

كان من بين الصعوبات التي واجهناها في البداية تحديد أفضل طريقة لتحويل النماذج الثلاثية الأبعاد من برنامجنا إلى تنسيق ملف متوافق مع الويب. بعد إنشاء مواد العرض داخل Cinema 4D، تم تبسيط النماذج وتحويلها إلى شبكات من المضلّعات ذات عدد قليل من الأضلاع. تم منح كل شبكة علامات اختيار مضلّعات معيّنة للتمييز بين أجزاء الجسم من أجل التلوين وإضافة الملمس. بعد ذلك، تمكّنا من التصدير كملف Collada 1.5 (‎.dae) واستيراده إلى Blender، وهو برنامج ثلاثي الأبعاد مفتوح المصدر، لإنشاء ملفات متوافقة مع three.js. بعد التأكّد من استيراد النماذج بشكل صحيح، صدّرنا الشبكة كملف JSON وتم تطبيق الإضاءة باستخدام الرمز. في ما يلي نظرة أكثر تفصيلاً على الخطوات التي اتّخذناها:

أنشئ تصميمًا للكائن داخل C4D. تأكَّد من أنّ اتجاهات عناصر الشبكة الخارجية موجّهة للخارج.
أنشئ نموذجًا للكائن داخل C4D. تأكَّد من أنّ اتجاهات عناصر الشبكة الخارجية موجّهة للخارج.
باستخدام أداة اختيار المضلّعات، أنشئ علامات اختيار للمناطق المحدّدة التي تريد إضافة نسيج إليها. طبِّق المواد على كل علامة من علامات الاختيار.
استخدِم أداة اختيار المضلّعات لإنشاء علامات اختيار للمناطق المحدّدة التي تريد إضافة نسيج إليها. طبِّق المواد على كل علامة من علامات الاختيار.
صدِّر الشبكة كملف ‎.dae بتنسيق COLLADA 1 .5.
صدِّر الشبكة كملف ‎.dae بتنسيق COLLADA 1 .5.
تأكَّد من وضع علامة في المربّع بجانب "تصدير الشكل الهندسي ثنائي الأبعاد". إنّ تصدير المثلثات متوافق بشكل عام على نطاق أوسع في البيئات الثلاثية الأبعاد من جانب الرمز، ولكنّه يتضمن عيوبًا مثل مضاعفة عدد المضلّعات. وكلما زاد عدد المضلّعات، زادت كثافة النموذج على معالج الكمبيوتر. لذا، يجب إبقاء العلامة في هذا المربّع إذا لاحظت بطء الأداء.
تأكَّد من وضع علامة في المربّع بجانب "تصدير الأشكال الهندسية ثنائية الأبعاد". إنّ تصدير المثلثات متوافق بشكل عام على نطاق أوسع في البيئات الثلاثية الأبعاد من جانب الرمز، ولكنّه يتضمن عيوبًا مثل مضاعفة عدد المضلّعات. وكلما زاد عدد المضلّعات، زادت كثافة النموذج على معالج الكمبيوتر. لذا، يجب إبقاء العلامة في هذا المربّع إذا لاحظت بطء الأداء.
استورِد ملف Collada إلى Blender.
استورِد ملف Collada إلى Blender.
بعد الاستيراد إلى Blender، ستلاحظ أنّ موادك وعلامات الاختيار قد تم نقلها أيضًا.
بعد الاستيراد إلى Blender، ستلاحظ أنّ موادك وعلامات الاختيار قد تم نقلها أيضًا.
اختَر الجسم، واضبط مواده على ما تفضّله.
اختَر الجسم، واضبط مواده على النحو الذي تفضّله.
تصدير الملف كملف three.js
تصدير الملف كملف three.js لتوافق webGL

كتابة الرمز البرمجي

تم تطوير تطبيق Roll It باستخدام مكتبات مفتوحة المصدر ويتم تشغيله بشكل أصلي في المتصفّحات الحديثة. باستخدام تقنيات مثل WebGL وWebSockets، تقترب الويب من توفير تجارب ألعاب ووسائط متعددة بجودة أجهزة الألعاب. لقد شهدت سهولة وراحة إنشاء هذه التجارب قفزات إلى الأمام مع توفّر أدوات أكثر حداثة لتطوير HTML.

بيئة التطوير

تم كتابة معظم الرموز البرمجية الأصلية لتطبيق Roll It باستخدام CoffeeScript، وهي لغة نظيفة وموجزة يتم تحويلها إلى JavaScript منظَّمة ومدقَّقة. تُعدّ CoffeeScript رائعة لتطوير البرامج المستندة إلى الكائنات باستخدام نموذج اكتساب السمات الرائع ومعالجة النطاق بشكل أنظف. تمّت كتابة CSS باستخدام إطار عمل SASS، ما يمنح المطوّر عددًا من الأدوات الرائعة لتحسين جداول التنسيق الخاصة بالمشروع وإدارتها. إنّ إضافة هذه الأنظمة إلى عملية التصميم تستغرق بعض الوقت، ولكنّ النتيجة تستحقّ ذلك بالتأكيد، خاصةً في المشاريع الكبيرة مثل Roll It. لقد أعددنا خادم Ruby on Rails لتجميع مواد العرض تلقائيًا أثناء التطوير، ما جعل جميع خطوات التجميع هذه شفافة.

بالإضافة إلى توفير بيئة ترميز سلسة ومريحة، عملنا على تحسين مواد العرض يدويًا لتقليل الطلبات من أجل تحميل الموقع الإلكتروني بشكل أسرع. أجرينا ضغطًا على كل صورة باستخدام برنامجَي ضغط هما ImageOptim وImageAlpha. يُحسِّن كل برنامج الصور بطريقته الخاصة، أي بدون فقدان الجودة وفقدان الجودة على التوالي. وباستخدام مجموعة الإعدادات المناسبة، يمكنهم تقليل حجم ملف الصورة بشكل كبير. لا يؤدي ذلك إلى توفير عرض النطاق عند تحميل الصور الخارجية فحسب، بل يؤدي أيضًا إلى ترجمة صورك إلى سلاسل مشفّرة أصغر بكثير وفقًا لقاعدة 64 من أجل تضمينها في HTML وCSS وJavaScript. في ما يتعلّق بترميز base64، أدرجنا أيضًا ملفات خطوط Open Sans بتنسيقَي WOFF وSVG مباشرةً في CSS باستخدام هذه التقنية، ما أدّى إلى تقليل إجمالي الطلبات.

المشهد الثلاثي الأبعاد المزوّد بتأثيرات فيزيائية

THREE.js هي مكتبة JavaScript ثلاثية الأبعاد شائعة على الويب. ويجمع هذا الإصدار بين عمليات تحسين WebGL المستندة إلى الأجهزة والرياضيات الثلاثية الأبعاد من المستوى المنخفض التي تتيح للمستخدمين العاديين إنشاء مَشاهد ثلاثية الأبعاد تفاعلية جميلة ومُضاءة جيدًا بسهولة بدون الحاجة إلى كتابة مواد مظلّلة مخصّصة أو إجراء عمليات تحويل مصفوفات يدوية. Physijs هي حزمة برمجية خاصة بمكتبة THREE.js الرائجة للفيزياء بلغة C++ والتي تم تحويلها إلى JavaScript. لقد استفدنا من هذه المكتبة لمحاكاة كرة تتدحرج وتقفز وترتطم باتجاه وجهتها بتقنية ثلاثية الأبعاد.

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

تحسين الأداء

من المفترض أن تستفيد معظم مجموعات المتصفحات وبطاقات الفيديو الحديثة من ميزة "محو التمويه" المستندة إلى الأجهزة الأصلية في بيئة WebGL، ولكن قد لا تعمل بعض هذه المجموعات بشكل جيد. في حال عدم عمل ميزة "محو التمويه" بشكلٍ أصلي، ستكون أيّ حواف قاسية ومتناقضة في مشهد THREE.js خشنة وقبيحة (على الأقل في نظرنا).

لحسن الحظ، هناك حلّ: من خلال مقتطف رمز، يمكننا رصد ما إذا كانت المنصة ستتيح استخدام ميزة تمويه الحواف بشكل تلقائي. إذا كان الأمر كذلك، يمكننا المتابعة. وإذا لم يكن الأمر كذلك، هناك سلسلة من أدوات الإضاءة في مرحلة ما بعد المعالجة التي تأتي مع THREE.js ويمكن أن تساعدنا. ويشمل ذلك فلتر FXAA لإزالة التمويه. من خلال إعادة رسم المشهد المعروض في كل إطار باستخدام هذا المخطِّط، نحصل بشكل عام على مظهر أكثر سلاسة للخطوط والحواف. يمكنك الاطّلاع على العرض التوضيحي أدناه:

// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;

عناصر التحكّم في الألعاب المستندة إلى مقياس التسارع

تعتمد لعبة Roll It بشكل كبير على إيماءة لف الكرة التي ينفّذها اللاعب باستخدام الهاتف. يمكن للأجهزة الجوّالة الوصول إلى أداة التسارع داخل المتصفّح منذ بعض الوقت، ولكننا في المجال بدأنا للتو في استكشاف ميزة التعرّف على الإيماءات المستندة إلى الحركة على الويب. نحن محدودون إلى حدٍ ما بالبيانات التي يوفّرها مقياس التسارع في الهاتف، ولكن من خلال القليل من الإبداع، يمكننا تقديم بعض التجارب الجديدة الرائعة.

يبدأ رصد إشارة "التدوير" الرئيسية في تطبيق Roll It من خلال تتبُّع آخر 10 تعديلات على مقياس التسارع تأتي من حدث deviceorientation للنافذة. من خلال طرح قيمة الميل السابقة من قيمة الميل الحالية، نحفظ فرق الزاوية بين الأحداث. بعد ذلك، من خلال تجميع قيم التغيُّر في الزاوية العشرة الأخيرة باستمرار، يمكننا رصد الالتفاف المستمر أثناء تحرك الهاتف في الفضاء. عندما يتجاوز الهاتف حدًا معيّنًا لتغيير الزاوية الشاملة، نبدأ عملية اللف. بعد ذلك، من خلال العثور على أكبر تغيير فردي في الميل في هذه العملية، يمكننا تقدير سرعة الكرة. في لعبة Roll It، يتم توحيد هذه السرعة باستخدام الطوابع الزمنية التي نرفقها بكل تحديث للمقياس التسارعي. يساعد ذلك في تخفيف السرعة المتغيرة التي يتم بها بث تعديلات مقياس التسارع إلى المتصفّح على الأجهزة المختلفة.

اتصالات WebSocket

بعد أن يُدحِر اللاعب الكرة باستخدام هاتفه، يتم إرسال رسالة من الهاتف إلى الكمبيوتر المحمول تطلب منه إطلاق الكرة. يتم إرسال رسالة "الطرح" هذه من خلال كائن بيانات JSON من خلال اتصال WebSocket بين الجهازَين. تكون بيانات JSON صغيرة، وتتألف بشكل أساسي من نوع الرسالة وسرعة الرمي واتجاه التصويب.

{
  "type": "device:ball-thrown",
  "speed": 0.5,
  "aim": 0.1
}

تتم جميع عمليات التواصل بين الكمبيوتر المحمول والهاتف من خلال رسائل JSON صغيرة مثل هذه. في كل مرة تعدّل فيها اللعبة حالتها على الكمبيوتر المكتبي، أو يميل المستخدم الجهاز أو ينقر على زر على الهاتف، يتم إرسال رسالة WebSocket بين الجهازَين. وللحفاظ على بساطة هذا التواصل وسهولة إدارته، يتم بث رسائل WebSockets باستخدام نقطة خروج واحدة من أيّ من المتصفّحين. في المقابل، تتوفّر نقطة دخول واحدة في المتصفّح المستلِم، مع عنصر WebSocket واحد يعالج جميع الرسائل الواردة والصادرة على كلا الطرفَين. عند تلقّي رسالة WebSocket، تتم إعادة بث بيانات JSON داخل تطبيق JavaScript باستخدام طريقة trigger() في jQuery. في هذه المرحلة، تتصرف البيانات الواردة تمامًا مثل أي حدث مخصّص آخر لنموذج DOM، ويمكن لأي عنصر آخر في التطبيق معالجتها واستخدامها.

var websocket = new WebSocket(serverIPAddress);

// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
  if (e.data) {
    var obj = JSON.parse(e.data);
    $(document).trigger(data.type, obj);
  }
};

// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
  websocket.send(JSON.stringify(obj));
};

يتم إنشاء خوادم WebSocket في لعبة Roll It أثناء التشغيل عند مزامنة جهازَين باستخدام رمز اللعبة. تم إنشاء الخلفية لتطبيق Roll It على منصّتَي Google Compute Engine وApp Engine باستخدام Go.

شاشات القوائم التي يمكن إمالتها

بالإضافة إلى رسائل WebSocket المستندة إلى الأحداث المستخدَمة أثناء اللعب، يتم التحكّم في القوائم في Roll It من خلال إمالة الهاتف والنقر على زر لتأكيد اختيار. يتطلب ذلك نقل بيانات الميل بشكل أكثر اتساقًا من الهاتف إلى الكمبيوتر المحمول. لتقليل عرض النطاق وتجنُّب إرسال معلومات غير ضرورية، لا يتم إرسال هذه الرسائل إلا إذا تغيّر ميل الجهاز بأكثر من بضع درجات. ما مِن فائدة من إرسال بيانات الميل إذا كان الهاتف مسطّحًا على طاولة. يتم أيضًا الحد من معدل الإرسال، فلا يتم إرسال أكثر من 15 رسالة WebSockets في الثانية في لعبة Roll It، حتى إذا كان يتم إمالة الجهاز بشكل نشط.

بعد رصد قيم الميل على الكمبيوتر، يتم تجميعها بمرور الوقت باستخدام requestAnimationFrame للحفاظ على الشعور بالسلاسة. النتيجة النهائية هي قائمة دوّارة وكرة تدور للمساعدة في الإشارة إلى اختيار المستخدم. عندما يرسل الهاتف بيانات الميل، يتم تعديل عناصر DOM هذه في الوقت الفعلي من خلال إعادة احتساب عملية تحويل CSS داخل حلقة requestAnimationFrame. يتم تدوير حاوية القائمة ببساطة، ولكن يبدو أنّ الكرة تدور على الأرض. لتحقيق هذا التأثير، نطبّق بعض قواعد الجبر الثلاثي الأساسية لربط الإحداثي x للكرة بدورانها. المعادلة البسيطة هي: عدد الدورات = x / (القطر * π)

الخاتمة

إنّ ميزة Roll It هي علامة على العصر. بين مشاريع المصدر المفتوح التي ساهمت في تطويرها وقوة المعالجة للأجهزة على مكاتبنا وفي جيوبنا وحالة الويب كمنصة، نعيش حاليًا فترة مثيرة ومليئة بالتغييرات للاتصال بشبكة الويب المفتوحة. قبل بضع سنوات فقط، كانت الكثير من هذه التكنولوجيا متوفّرة فقط في الأنظمة المملوكة، ولم تكن متاحة للاستخدام والتوزيع بحرية. في الوقت الحالي، يمكن تحقيق تجارب معقّدة بأقل مجهود وباستخدام المزيد من الخيال، وذلك من خلال إنشاء ومشاركة أجزاء جديدة من اللغز كل يوم. ماذا تنتظر؟ أنشئ شيئًا رائعًا وشارِكه مع العالم.

شعار Roll it