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

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

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

---

---

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

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

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

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

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

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

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

---

---

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







var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};

var gamePiece;
var game = new Phaser.Game(config);

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}




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

---

---

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

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

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

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

هل يمكنك شراء تلفزيون غير ذكي

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

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

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

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

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

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

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

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

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

scene: {
preload: preload,
create: create,
update: update
}

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

كيفية الحصول على المزيد من ذاكرة الوصول العشوائي على الكمبيوتر المحمول

function update(){
}

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

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

var gamePiece;
var keyInputs;

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}

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

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

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

function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}

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

function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}

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

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

obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}

obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}

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

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

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

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

this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});

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

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

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

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

شحن الهاتف ولكن لا يتم تشغيله

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

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

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

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

اقرأ التالي مواضيع ذات صلة

• برمجة
• جافا سكريبت
• HTML5
• تطوير اللعبة

نبذة عن الكاتب جينيفر سيتون(21 مقالة منشورة)

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

المزيد من Jennifer Seaton

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك