ميزات تطوير لعبة للمتصفح

نحن نكتشف ذلك من خلال فريقنا التقني

بالنسبة للمشروع التعليمي لبنك روسيا ، قمنا بعمل لعبة ويب مدهشة "The Mystery of the Lost Piggy Bank " . تلفت انتباه تلاميذ المدارس إلى موضوع محو الأمية المالية ، وتقدم المصطلحات ، وتعلمهم كيفية إدارة الأموال بحكمة. لم تكن اللعبة محببة للأطفال فحسب ، بل أحبها أيضًا الكبار من مدن مختلفة في روسيا - فقد لعبها أكثر من 30 ألف شخص.



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



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



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



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

كيف تم اختيار المحرك

لدينا بالفعل خبرة في تطوير اللعبة ، لذلك تمت الإشارة على الفور إلى توجيهات اختيار المحرك:

• Phaser — /.
• Unity Web — .
• LibGDX, Godot, PlayCanvas.

سقطت الخيارات غير المعروفة لسبب واضح - كان لا بد من إتقانها ودراستها ، الأمر الذي كان مخيفًا بطريقة ما ، رغم أنه لا يبدو مستحيلًا. توقف خيار Unity لأن قيود المحرك والتصدير لم تسمح ، على سبيل المثال ، باستخدام الصوت في IE 11. وأيضًا لأن Javascript الذي تم تصديره من Unity كان كبيرًا جدًا ، و IE 11 أبطأ بكثير في التحليل وتنفيذ التعليمات البرمجية من تلك الحديثة المتصفحات.



وبالتالي ، تقرر استخدام نسخة جديدة من محرك Phaser (في وقت التطوير ، كان الإصدار Phaser 3.11). لقد اخترنا هذا المحرك أيضًا لأن كل المنطق والعرض عبارة عن برنامج ، مما يعني أنه يمكننا التحكم تمامًا في أي جانب من جوانب اللعبة المستقبلية في الكود.

كما كتبوا

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





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



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







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



تم أخذ حزمة التطوير بشكل نموذجي لمشروع مماثل - webpack ، webpack-dev-server ، babel ، babel / preset-typecript.

ما هي الصعوبات

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



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



تم اختبار العديد من الفرضيات النظرية والعملية ، والتي نشأ منها الحل النهائي. الحل هو كما يلي:

1. في شاشة تحميل اللعبة ، حيث يكون التقدم من 0 إلى 100٪ ، ينتهي التحميل الفعلي للموارد بنسبة 92٪.
2. بعد ذلك ، يتم إنشاء مشهد خارج الشاشة ، حيث يتم وضع رسوم متحركة ثقيلة وقليل من الفيزياء.
3. ثم ، في غضون 5 ثوان ، يتم قياس متوسط ​​وقت العرض لإطار واحد.
4. بعد ذلك يتم اتخاذ القرار بشأن أداء الجهاز والتقدم يصل إلى 100٪.

كان من المهم جدًا أن تكون اللعبة تعمل بكامل طاقتها في IE 11 ، مما تسبب أيضًا في حدوث إزعاج. اتضح أنه مع تشغيل أدوات المطور ، فإن تنفيذ Javascript البطيء بالفعل في هذا المتصفح قد تباطأ أكثر.



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

ميكانيكا اللعبة

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



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





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



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





كانت آليات التقاط المفاتيح من الصندوق مثيرة للاهتمام. بالنسبة للمفتاح الذي يجب التقاطه ، تم جعل منطقة الزناد أصغر من الرمز البصري للمفتاح ، كما تم تحويلها قليلاً إلى الجانب بشكل عشوائي. أدى ذلك إلى التأثير المطلوب "لن يتم تجميع المفتاح الخاص بي في المرة الأولى" - تحتاج أحيانًا إلى محاولة جمع المفتاح عدة مرات للوصول إلى منطقة تشغيله. خلاف ذلك ، كان الأمر سهلاً للغاية ، على الرغم من أنه في الإصدار النهائي ، تمت زيادة منطقة الزناد قليلاً لتقليل النسبة المئوية للمحاولات غير الناجحة.



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



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

الاستنتاجات والمشورة

حدد النوع في وقت مبكر جدًا.



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



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