Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

كيف تتعلم محرك فيشر لألعاب HTML5

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Ratnawati (you can also view the original English article)

Phaser هو إطار لعبة HTML5 مفتوح المصدر تم إنشاؤه بواسطة Photon Storm . تم تصميمه لإنشاء ألعاب يتم تشغيلها على متصفحات الويب لأجهزة سطح المكتب وأجهزة الجوّال. تم تصميمه لإنشاء ألعاب يتم تشغيلها على متصفحات الويب لأجهزة سطح المكتب وأجهزة الجوّال. تم التركيز بشكل كبير على الأداء داخل متصفحات الويب للجوال ، وهي منطقة متنامية ومهمة من ألعاب الويب. إذا كان الجهاز قادرًا ،فإنه يستخدم تقنية WebGL للرندرة ، ولكن بخلاف ذلك يتم إرجاعه إلى Canvas بسهولة. في هذا المقال ، سأغطي الموارد لتعلم Phaser ، بالإضافة إلى إظهار ما يمكن أن يفعله وبعض التفكير الذي دخل في تصميمه.

header

مجرد إطار آخر لألعاب HTML5؟!

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

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

لقد كنا معجبين رائعين ب Flixel وتمتعنا بالنجاح مع ألعابنا الخاصة ومع أدوات Flixel Power الخاصة بنا. لقد كانت ضجه حقيقية رؤية مطورين آخرين يستخدمونها للمساعدة في إطلاق ألعابهم ، وكان هذا ما أردنا تكراره في HTML5.

flixel-power-toosls

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

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

منذ إصدار Phaser 1.0 ، كانت التحديثات منتظمة وشاملة ، مع العديد من المميزات والإصلاحات الجديدة. نحن نعمل على التحويل  من dev إلى master في خلال ما يقرب من شهر واحد - يمكنك عرض التغيير الكامل من خلال GitHub. ومن المثير للاهتمام أننا نشهد الآن طلبًا على الألعاب التي تعمل داخل WebView ، لذا سوف نضمن أن Phaser يعمل بشكل جيد في هذه البيئة بدءًا من عام 2014.

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

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


ما هي المنصات التي يمكنني استهدافها باستخدام Phaser؟

متصفحات سطح المكتب

Phaser هي مكتبة JavaScript مصممة للتشغيل على جميع متصفحات سطح المكتب الرئيسية.  يتضمن ذلك Internet Explorer 9 والإصدارات الأحدث ، و Firefox ، و Chrome ، و Safari.  قبل IE9 لم يكن يدعم canvas ، لذلك إذا كنت بحاجة إلى إطار قادر على التعامل مع عرض DOM ، فلن تكون Phaser مناسبة. ومع ذلك ، أصبح الطلب على هذه الأنواع من الألعاب قريب من الحد الأدنى ؛ إذا كان هناك أي شيء ، فهو يؤدي إلى تغيير الاتجاه الآخر (نحو WebGL).

متصفحات الجوال 

على الجوال ، يعمل Phaser على iOS5 وما فوق داخل Mobile Safari. على نظام التشغيل Android ، يتم تشغيله في الإصدار 2.2 والإصدارات الأحدث في كل من stock browser وفي Chrome. Chrome الآن هو متصفح Android القياسي ، مع الإصدارات الحديثة التي تدعم WebGL ، ولكن لا يمكننا تجاهل الملايين من أجهزة Android القديمة التي لا تزال قيد الاستخدام.

connect_me_factory

فايرفوكس OS ، تايزن ، و كيندل

بفضل Mozilla ، تلقينا مجموعة من أجهزة اختبار FFOS ، وبدأنا نضمن أن Phaser يعمل جيدًا عليها. حتى الآن ، تبدو الأمور جيدة ، وسنقوم بإنتاج أدلة نشر في العام الجديد.

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

التطبيقات الأصلية و EXEs سطح المكتب

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

ومع ذلك ، مع تطوير الأغلفة مثل CocoonJS و Ejecta ، نرى مطورين يستخدمون Phaser لفهم ألعابهم ويطلقونها كتطبيقات محلية. لذا ، فبدءًا من عام 2014 ، سنبدأ في إضافة دعم لـ CocoonJS مباشرة إلى المركز الأساسي ، بالإضافة إلى دعم أغلفة أجهزة سطح المكتب مثل node-webkit.

okai

الميزات الرئيسية

سوف نسلط الضوء على عدد قليل من ما نعتبره أهم ميزات فيزر من وجهة نظر المطور:

أنها مجرد سكريبت

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

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

ولكن أود أن تيبيسكريبت!

رائع ، لأن لدينا ملف تعريف TypeScript أيضًا.  يوجد بالفعل دليل لاستخدام Phaser مع TypeScript .

phaser-typescript

الأصول سهلة التحميل

فيزر لديه رصيداً مدمج محمل التي يمكن التعامل معها:

  • الصور
  • أوراق العفريت (ثابتة الحجم الإطارات)
  • مادة اﻷطالس (بما في ذلك تنسيقات باكر الملمس وتجزئة JSON، الصفيف JSON، فلاش CS6/نسخة وزرزور XML)
  • ملفات صوتية
  • ملفات البيانات (XML، JSON، نص عادي)
  • ملفات JavaScript (بحيث يمكنك يمكن جزء-تحميل ألعاب أو شبيبة على أساس الموارد الخاصة بك)
  • تيليمابس (CSV وتجانب تعيين تنسيقات)
  • الخطوط النقطية

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

التقديم: WebGL وقماش

وداخلياً، فيزر يستخدم Pixi.js للتقديم. بيكسي هو مكتبة تقديم بسرعة كبيرة، وأن يركز على قماش و WebGL. هي مكتبة نواصل الإسهام للمساعدة في دفع الأمور إلى الأمام.

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

phaser-shaders

الصوت: الصوت والصوت وراثي الويب

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

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

peterrabbit

الإدخال: ماوس اللمس المتعدد ولوحة المفاتيح والمؤشر،

عندما دعم سطح المكتب والجوال وهناك عدد متنوع على نحو متزايد من خيارات الإدخال المحتملة. فيزر يدعم لوحة المفاتيح، والماوس، اللمس، مسبوينتير (الآن المؤشر تحت IE11)، ومزيج منها. على سبيل المثال، على أجهزة Windows سطح يمكنك مبادلة بين استخدام الماوس وتعمل باللمس، أو في الواقع استخدام كلاهما معا.

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

wolfblood

الفيزياء وفتيات مراهقات، والجسيمات

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

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

phaser-particles

المساعد 

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

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


الشروع في العمل

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

تحميل فيزر

يتم تخزين Project Phaser على GitHub على عنوان URL https://github.com/photonstorm/phaser .  هناك فرعين رئيسيين: السيد هو أحدث إصدار إصدار ثابت ، في حين أن ديف هو المكان المناسب لتخزين الإصدار قيد التطوير. بمجرد الانتهاء من إصدار جديد، ندفع من ديف للماجستير وثم يتم تحديث ديف للتحضير للإصدار التالي. إلا إذا كنت تعرف تحتاج الفرع dev، يجب أن تبدأ دائماً مع ماجستير.

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

الوظائف ذات الصلة

gravity-smash

دليل للبدء

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

تجدر الإشارة إلى أن الدليل تنقسم إلى الأقسام التالية:

يوجد أيضاً نفس الدليل لـ TypeScript .

جعل لعبتك الأولى

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

phaser-starter-tutorial

أمثلة على ألعاب Phasre

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

phaser-examples

وثائق API 

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

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

JSHint

منذ إصدار Phaser 1.1.3 ، تم تشغيل الإطار بأكمله باستخدام JSHint قبل الإصدار.  نحن نقدم ملف التكوين لدينا في مستودع Phaser.

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


الخطوة التالية

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

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

tildeath

HTML5 لعبة المنتدى المشروعات الإنمائية

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

لذلك من المنطقي إذا استخدمنا ذلك كمقر رسمي لـ Phaser ، وسوف تجد العديد من أصدقاء المطورين الوديين لتبادل الأفكار أو الأسئلة.  هذا المنتدى هو المقر الرئيسي للعديد من المكتبات الأخرى بما في ذلك Pixi.js والإطار 3D Babylon.js. هناك أيضا منطقة لعبة Showcase لإظهار ما قمت به. تمثل المنتديات الزائرة كل يوم مصدر إلهام بالنسبة لي ، ويسرني جدًا معرفة ما يمكن لمطوري ألعاب HTML5 تحقيقه اليوم.

html5gamedevs

النشرة الإخبارية

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

المساهمة

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

وتظهر لنا الألعاب الخاصة بك!

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

أخيرًا ، نأمل أن تكون لديك متعة في صنع لعبتك الخاصة.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.