الشروع في العمل مع Phaser لتطوير الألعاب

Phaser هو إطار عمل لإنشاء ألعاب فيديو ثنائية الأبعاد. يستخدم HTML5 Canvas لعرض اللعبة وجافا سكريبت لتشغيل اللعبة. تتمثل فائدة استخدام Phaser على Vanilla JavaScript في أنه يحتوي على مكتبة واسعة تكمل الكثير من فيزياء ألعاب الفيديو مما يسمح لك بالتركيز على تصميم اللعبة نفسها.

يقلل Phaser من وقت التطوير ويسهل سير العمل. دعنا نتعلم كيفية إنشاء لعبة أساسية باستخدام Phaser.

لماذا تطوير مع فيزر؟

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

في التحميل المسبق ، يتم تحميل أصول اللعبة وإتاحتها للعبة.

إنشاء يهيئ اللعبة وجميع عناصر اللعبة التي تبدأ. يتم تشغيل كل من هذه الوظائف مرة واحدة عند بدء اللعبة.

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

قم بإعداد نظامك لتطوير الألعاب باستخدام Phaser

على الرغم من أن Phaser يعمل على HTML و JavaScript ، إلا أن الألعاب تعمل في الواقع من جانب الخادم ، وليس من جانب العميل. هذا يعني أنك ستحتاج إلى تشغيل اللعبة

مضيفك المحلي. يتيح تشغيل جانب خادم اللعبة وصول لعبتك إلى ملفات وأصول إضافية خارج البرنامج. أوصي باستخدام XAMPP لإعداد مضيف محلي إذا لم يكن لديك بالفعل إعداد واحد.

ما هو 127.0 0.1 ، المضيف المحلي ، أو عنوان الاسترجاع؟

لقد رأيت "مضيف محلي" على جهاز الكمبيوتر الخاص بك ، ولكن ما هو؟ ماذا يعني العنوان 127.0.0.1؟ هل تم اختراقك؟

الكود أدناه سوف يجعلك تعمل. يضع بيئة لعب أساسية.

للتشغيل ، ستتطلب اللعبة صورة PNG تسمى "gamePiece" محفوظة في مجلد "img" على مضيفك المحلي. للتبسيط ، يستخدم هذا المثال مربع برتقالي بحجم 60xgame de60 بكسل. يجب أن تبدو لعبتك كما يلي:

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

شرح كود الإعداد

حتى الآن ، لا تفعل اللعبة أي شيء. لكننا قمنا بالفعل بتغطية الكثير من الأرض! لنلقِ نظرة أكثر تعمقًا على الكود.

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

الكثير من التعليمات البرمجية حتى الآن تهيئ بيئة اللعبة ، والتي هي المتغير التكوين المخازن. في مثالنا ، نقوم بإعداد لعبة فيزر بخلفية زرقاء (CCFFFF في رمز اللون السداسي) تبلغ 600 بكسل × 600 بكسل. في الوقت الحالي ، تم تعيين فيزياء اللعبة ممر، لكن فيزر يقدم فيزياء مختلفة.

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

متعلق ب: أفضل 6 أجهزة كمبيوتر محمولة للبرمجة والترميز

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

تمت إضافة صورة gamePiece إلى اللعبة في وظيفة الإنشاء. يشير السطر 29 إلى أننا نضيف لعبة الصورة على شكل كائن 270 بكسل يسارًا و 450 بكسل لأسفل من الزاوية اليسرى العلوية لمنطقة لعبتنا.

جعل قطعة لعبتنا تتحرك

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

إضافة وظيفة التحديث

مشهد جديد في التكوين:

مشهد: {
التحميل المسبق: التحميل المسبق ،
إنشاء: إنشاء ،
التحديث: التحديث
}

بعد ذلك ، أضف وظيفة تحديث أسفل وظيفة الإنشاء:

تحديث الوظيفة () {
}

الحصول على المدخلات الرئيسية

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

لعبة فار
فار مفتاح المدخلات ؛

يجب تهيئة متغير keyInput عند إنشاء اللعبة في دالة الإنشاء.

وظيفة إنشاء () {
gamePiece = this.physics.add.sprite (270 ، 450 ، "gamePiece") ؛
keyInputs = this.input.keyboard.createCursorKeys () ،
}

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

تحديث الوظيفة () {
إذا (keyInputs.left.isDown) {
gamePiece.x = gamePiece.x - 2 ؛
}
إذا (keyInputs.right.isDown) {
gamePiece.x = gamePiece.x + 2 ؛
}
إذا (keyInputs.up.isDown) {
gamePiece.y = gamePiece.y - 2 ؛
}
إذا (keyInputs.down.isDown) {
gamePiece.y = gamePiece.y + 2 ؛
}
}

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

إضافة عقبات إلى اللعبة

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

وظيفة التحميل المسبق () {
this.load.image ('gamePiece'، 'img / gamePiece.png') ؛
this.load.image ('عقبة 1'، 'img / troublele1.png')؛
this.load.image ('عقبة 2'، 'img / troublele2.png')؛
}

بعد ذلك ، يجب تهيئة كل كائن عقبة في وظيفة الإنشاء ، تمامًا مثل لوحة اللعبة.

وظيفة إنشاء () {
gamePiece = this.physics.add.sprite (270 ، 450 ، "gamePiece") ؛
keyInputs = this.input.keyboard.createCursorKeys () ،
عقبة 1 = this.physics.add.sprite (200، 0، 'عقبة 1') ؛
عقبة 2 = this.physics.add.sprite (0، 200، 'عقبة 2') ؛
}

جعل العقبات تتحرك

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

عقبة 1.y = عقبة 1.y + 4 ؛
إذا (عقبة 1.y> 600) {
عقبة 1.y = 0 ؛
عقبة 1.x = فيزر. رياضيات. بين (0 ، 600) ؛
}
عقبة 2.x = عقبة 2.x + 4 ؛
إذا (عقبة 2.x> 600) {
عقبة 2.x = 0 ؛
عقبة 2.y = فيزر. رياضيات. بين (0 ، 600) ؛
}

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

كشف الاصطدامات

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

تحتوي مكتبة فيزياء فيزر على كاشف مصادم. كل ما علينا فعله هو بدء تشغيله في دالة الإنشاء.

this.physics.add.collider (gamePiece ، العقبة 1 ، الوظيفة (gamePiece ، العقبة 1) {
gamePiece.destroy () ؛
عقبة. تدمير () ؛
عقبة 2.destroy () ،
});
this.physics.add.collider (gamePiece ، العقبة 2 ، الوظيفة (gamePiece ، العقبة 2) {
gamePiece.destroy () ؛
عقبة. تدمير () ؛
عقبة 2.destroy () ،
});

تتطلب طريقة المصادم ثلاث معلمات. تحدد المعلمتان الأوليان الكائنات التي تتصادم. أعلاه ، لدينا مصادمان مثبتان. يكتشف الأول عندما تصطدم قطعة اللعبة بالعائق 1 ويبحث المصادم الثاني عن تصادمات بين لوحة اللعبة والعائق 2.

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

جرب تطوير اللعبة مع Phaser

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

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

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

كيفية استخدام Chrome DevTools لاستكشاف مشكلات موقع الويب وإصلاحها

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

عن المؤلف