بناء لعبة متصفح متعددة اللاعبين في الوقت الفعلي في أقل من يوم – الجزء 1/4 – مجتمع Dev ، مبنى متعدد اللاعبين | ألعاب مجانية للعب

ألعاب مجانية للعب

كما ترون ، هذا الفصل لديه ثلاث طرق فارغة. هذه تأتي مع phaser.فئة المشهد. كل من هذه الطرق لها وظيفة مختلفة كما هو موضح أدناه

بناء لعبة متصفح متعددة اللاعبين في الوقت الفعلي في أقل من يوم – الجزء 1/4

شاشة اللعبة

هل لعب مباريات. دوه! فكرت في بناء واحد بنفسك. همم.. يبدو أن الألعاب صعبة البناء بشكل فطري. مع وجود الكثير من القطع المتحركة (حرفيًا تمامًا) ، يبدو أن تطوير اللعبة يقتصر على Devs الذين غمروا أقدامهم في عمق المياه المقدسة للشبكات والرياضيات والرسومات وما شابه ذلك. ومع ذلك ، مع تطور الويب بسرعة كبيرة ومع جميع البروتوكولات والمكتبات الجديدة التي امتدت في السنوات الأخيرة ، أصبح من السهل الآن البدء في بناء ألعاب متعددة القائم على المتصفح. في هذه المقالة ، سننظر في التنفيذ خطوة بخطوة للعبة متعددة اللاعبين في الوقت الفعلي من غزاة الفضاء (آه ، الحنين إلى الماضي!) مع Phaser3 ووقت حقيقي باقتدار. لقد استضافت اللعبة النهائية في https: // Space-invaders-multiplayer.Herokuapp.com/ لكي تجربها. على طول الطريق ، سنفهم الهندسة المعمارية ، وتصميم النظام ، وبروتوكولات الشبكات وراء هذا ، وننظر أيضًا. يتم تقسيم سلسلة البرنامج التعليمي هذه إلى أربعة أجزاء:

  • الجزء 1: مقدمة لمفاهيم الألعاب ومكتبة Phaser
  • الجزء 2: تقييم بروتوكولات الشبكات لتطبيقات الوقت الحقيقي
  • الجزء 3: تنفيذ رمز جانب الخادم للحفاظ على جميع اللاعبين متزامنين
  • الجزء 4: الانتهاء من رمز جانب العميل لتقديم اللعبة

آخر شيء قبل أن نبدأ. تفترض هذه المقالة فهمًا أساسيًا لـ JavaScript و Express/Nodejs. سأحاول شرح كل شيء آخر قدر الإمكان ����‍����

دعنا نحصل على الألعاب!

الجزء 1 – مقدمة لمفاهيم الألعاب والطائرات

لنبدأ بالنظر إلى قواعد اللعبة لأنها لن تكون بالضبط هي نفسها الرجعية الكلاسيكية الأصلية.

قواعد اللعبة لغزاة الفضاء متعددة اللاعبين

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

مكونات لعبة متعددة اللاعبين في الوقت الفعلي

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

دعونا نلقي نظرة على كل من هذه.

1. أصول

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

أصول اللعبة

إذا كنت مهتمًا بجعل موضوع لعبتك Super Arcade ، فيمكنك متابعة هذا البرنامج التعليمي الفني من Glauber Kotaki لمعرفة كيف.

2. الفيزياء

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

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

3. الشبكات

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

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

الآن بعد أن أصبح لدينا فهم أفضل للمكونات الأساسية ، دعونا نستكشف كيف يمكننا تشغيل هذه العمل في لعبتنا.

باستخدام Phaser 3 لإضافة الأصول وتمكين الفيزياء

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

شعار Phaser3

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

هناك سلسلة تعليمية جيدة حقًا لـ Phaser التي أوصي بها إذا كانت هذه هي المرة الأولى التي تعمل فيها مع Phaser 3.

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

نمر بعد ذلك كائن التكوين لبدء لعبة جديدة.

قد يبدو هذا مربكًا بعض الشيء لأنك لم تر أي رمز حتى الآن. دعونا نفعل ذلك بعد ذلك.

البدء مع اللعبة

دعنا ننتقل مباشرة إلى شاشة اللعبة الآن. سنقلق بشأن إطلاق صفحات اللوحة المتصدرين لاحقًا. ستكون لعبتنا صفحة HTML مع قماش تم تقديمه عليها. هذه القماش ستعقد وتشغيل اللعبة الفعلية. لذلك ، دعنا ننشئ ملفًا ، نسميه فهرس.لغة البرمجة . للحفاظ على تنظيم الأشياء ، سنقوم بتخزين جميع ملفات HTML الخاصة بنا في مجلد يسمى Views وجميع ملفات JavaScript من جانب العميل في مجلد يسمى Public . لنبدأ طرق العرض/الفهرس.ملف HTML مع هيكل عظمي أساسي:

كما ترون ، كل ما نقوم به هنا هو رابط لملفات CSS و JS التي سنضيفها قريبًا ، ولكن الأهم من ذلك رابط Phaser JS Cdn. يمكنك نسخ CSS مباشرة من مشروع GitHub

بخلاف ذلك ، داخل جسم HTML ، لدينا div مع معرف من المونتيل اللعبة . هذا هو المكان الذي سنضيف فيه قماش اللعبة عبر JavaScript.

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

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

يستخدم Phaser مفهوم “المشاهد” لتنظيم محتوى اللعبة. يمكنك التفكير في مشهد على أنه ما يمكنك رؤيته بصريًا في أي وقت من الأوقات. أثناء لعب لعبة ، إذا تحولت اللعبة إلى خلفية مختلفة مع تفاعلات مختلفة بين كائنات اللعبة ، فمن المحتمل أن يكون مشهدًا منفصلاً عن ما كنت تشاهده من قبل.

في لعبتنا ، سيكون لدينا مشهد واحد (تم تحديده بواسطة Gamescene). مشهد في Phaser هو فصل يمتد.فئة المشهد. دعونا نحدد هذا لعبتنا. أضف الكود التالي أعلى كائن التكوين لأنه يشير إلى فئة Gamescene.

كما ترون ، هذا الفصل لديه ثلاث طرق فارغة. هذه تأتي مع phaser.فئة المشهد. كل من هذه الطرق لها وظيفة مختلفة كما هو موضح أدناه

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

تحميل الأصول وإنشاء الرسوم المتحركة

دعنا نمضي قدمًا ونحمل بعض الأصول الآن. حدد طريقة التحميل المسبق () على النحو التالي

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

أضفنا ثلاثة أنواع من الآلهة ، كلها باللون الأبيض وثلاثة ألوان أخرى. بصرف النظر عن هؤلاء ، أضفنا أيضًا أصولًا للسفينة ، الرصاصة ، وبالطبع الانفجار للعب عندما يموت اللاعب.

كما ترون ، قمنا بتحميل أصول Spritesheet في Phaser باستخدام هذا.حمولة.spriteshet () وأرسلها ثلاث معلمات:

  • المعرف
  • المسار إلى الملف الفعلي
  • أبعاد الملف (بالبكسل).

يمكننا أيضًا أن نسميها صورة ، ولكن بعد ذلك لن نتمكن من القيام بالرسوم المتحركة الرائعة معها كما سترى قريبًا.

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

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

في طريقة Create () ، سنحدد الرسوم المتحركة لهذا الانفجار:

لقد استخدمنا هذا phaser هذا.الرسوم المتحركة.إنشاء () طريقة لإنشاء الرسوم المتحركة. هذه الطريقة تأخذ في:

  • المفتاح الذي سنستخدمه لاحقًا لتشغيل هذه الرسوم المتحركة
  • الإطارات التي تولد الإطارات باستخدام معرف الأصل الذي نود تطبيق هذه الرسوم المتحركة
  • الإطار الذي يحدد السرعة التي نود أن نلعب هذه الرسوم المتحركة
  • كرر ذلك يحدد عدد المرات التي ستعمل فيها الرسوم المتحركة
  • يحدد HideOnComplete ما إذا كان يجب أن يزول الأصل الذي يتم الرسوم المتحركة بعد الانتهاء من الرسوم المتحركة

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

هذا كل شيء في الوقت الراهن. سنتعرف على الشبكات لتطبيقات الوقت الحقيقي في الجزء 2 – تقييم بروتوكولات الشبكات لتطبيقات الوقت الحقيقي

جميع المقالات في هذه السلسلة:

  • الجزء 1: مقدمة لمفاهيم الألعاب ومكتبة Phaser
  • الجزء 2: تقييم بروتوكولات الشبكات لتطبيقات الوقت الحقيقي
  • الجزء 3: تنفيذ رمز جانب الخادم للحفاظ على جميع اللاعبين متزامنين
  • الجزء 4: الانتهاء من رمز جانب العميل لتقديم اللعبة

يتوفر إصدار منفصل ذي صلة بهذا البرنامج التعليمي على Github إذا كنت ترغب في التحقق من ذلك.

يمكنك أيضًا متابعة مشروع GitHub للحصول على أحدث التطورات في هذا المشروع.

إذا كان لديك أي أسئلة ، فلا تتردد في التواصل معي على TwitterSrushtika. DMS مفتوحة 🙂

الفئة: مبنى متعدد اللاعبين

Chimeraland هي مجانية لمفتاح Open World Sandbox Survival MMORPG (لعبة لعب الأدوار متعددة اللاعبين على نطاق واسع) للكمبيوتر الشخصي (Windows) و Mobile (Android/iOS) التي تم تطويرها بواسطة Pixel Soft و Publiched بواسطة Level Infinite. تم تعيين اللعبة في عالم ما قبل التاريخ الأسطوري […]

شبابيكiPhone و iPad ذكري المظهر

Muck هي لعبة Roguelike المجانية* لاعب واحد و Roguelike المجاني للكمبيوتر الشخصي (Windows) من قبل المطور النرويجي الشهير والفنان و YouTuber Dani (الذي صنع أيضًا لعبة Crab Game و Karlson). Muck عبارة عن مزيج منخفض من البقاء (هـ).ز. […]

شبابيك

صندوق الرمل عبارة عن نظام ألعاب مجاني للتشغيل واللعب إلى الظهر ، ولامركزية ومجتمعية ، والعالم الظاهري للكمبيوتر (Windows و MAC) في التطوير النشط (Open Alpha) ومبني على ethereum blockchain (على غرار اللامركزية). يمكن للاعبين البناء والامتلاك والمشاركة و […]

شبابيك

Core هي مجموعة ألعاب مجانية للعب ومنصة صنع الألعاب على غرار Crayta و Roblox. Core بمعنى آخر ، هو مجموعة كبيرة من الألعاب المجانية للعب والعوالم لاستكشاف مصمم من قبل مجتمع عالمي من المطورين يمكنك بسهولة […]

شبابيك

Crayta هي منصة لصنع الألعاب التعاونية مجانية ومجموعة متعددة اللاعبين مبنية على Unreal Engine 4 للكمبيوتر الشخصي ، على غرار Core و Roblox. يمكن للاعبين القفز وإنشاء ألعاب معًا في السحابة ، بغض النظر عن تجربة البرمجة الخاصة بهم. من […]

شبابيك

Wild Terra Online عبارة عن MMORPG مجانيًا مع ميزات الرمل والبقاء على قيد الحياة ، في عالم خيالي من القرون الوسطى التي يسيطر عليها اللاعب تمامًا. لن تحتاج إلى إكمال سلسلة من المهام وقتل ألف ذئاب لإنشاء المعدات. كل شيء كثيرًا […]

شبابيكماك Linux

ARK: Survival Devolved (Mobile) هي لعبة البقاء على قيد الحياة مجانًا* على قيد الحياة من قبل Studio Wildcard for Mobile (Android ، iOS) ، في عالم ما قبل التاريخ حيث يتعين على اللاعبين ، الذين تقطعت بهم السبل في جزيرة ، أن يتجولوا الديناصورات وغيرها من الحيوانات ما قبل التاريخ ، والمخاطر الطبيعية ، […]

iPhone و iPad ذكري المظهر

Unturned هو مجاني للعب لعبة Sandbox Songbox Melee و Shooter Game للكمبيوتر الشخصي (Windows و Mac و Linux) في نوع البقاء على قيد الحياة MMO/متعددة اللاعبين (على الرغم من أنه يمكنك أيضًا اللعب بمفردك أو في Coop في PVE). بدلا من التركيز على […]

شبابيكماك Linux

Totemori هي لعبة مشاجرة متعددة اللاعبين ممتعة ومبتكرة مجانية. يتميز Totemori بلاعبين محليين مقابل تعدد اللاعبين لما يصل إلى 4 لاعبين. العب ضد أصدقائك أو تدرب ضد الروبوتات ، […]

شبابيكماك Linux

Galactic Junk League هي لعبة Crafter Arena تنافسية مجانية-وهي لعبة مطلق النار مختلط مع إمكانيات بناء السفن تقريبًا. بناء أي شيء. حارب أي شخص. في الفضاء. قم ببناء سفنك غير المرغوب فيها إلى أي أشكال وأحجام حرفيًا ومكافحة إبداعات […]

شبابيك

Creativerse هي لعبة MMO Sandbox من الجيل التالي من الجيل التالي عن المغامرة والاستكشاف والإبداع مع أصدقائك. وهو الآن مجاني للعب. أنت تقطعت بهم السبل في عالم شاسع وغامض محاط بالوحوش الشرسة و […]

شبابيك ماك

Gunscape هي مجموعة بناء FPS. إنها لعبة تتيح لك الذهاب إلى البرية مع إبداعك في صندوق رمل الحركة الضخ! يقوم Gunscape بذلك من خلال توفير أدوات سهلة الاستخدام استنادًا إلى واجهة بنية الحظر التي يعرفها الجميع بالفعل لإنشاء لاعب واحد […]

شبابيكماك Linux

TROVE مجاني للعب ، فوكسل MMORPG من فوكسسيل MMORPG من Trion Worlds للكمبيوتر الشخصي (Windows ، MAC) ، Xbox One ، PS4 و Nintendo Switch. يتميز Trove بعالم لا حصر. استكشف وخلق طريقك […]

شبابيكماكبلاي ستيشن 4أجهزة إكس بوكس ​​واحد يُحوّل

Roblox عبارة عن منصة فيديو متعددة اللاعبين على الإنترنت متعددة اللاعبين على الإنترنت (على غرار Core و Crayta) تتيح للمستخدمين تصميم ومشاركة ألعابهم ومستوياتهم ، ولعب جميع أنواع الألعاب التي أنشأها المستخدمون الآخرون ، من [ …]