weixin minigame tutorial
1.0.0
يحتوي هذا المستودع
يتضمن العرض التوضيحي الحالي الوظائف التالية:
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
البنية الشاملة: تقريبًا مثل ألعاب الويب
تعتمد ألعاب Wechat Minigames على تقنيات الويب، واللغة الرئيسية المستخدمة هي Javascript. النظام مشابه للنظام الموجود على الويب: يمكن الوصول إلى عنصر اللوحة القماشية ويمكننا الاعتماد عليه في كل إطار. لدينا إمكانية الوصول إلى WebGL API، وبالتالي يمكننا استخدام GPU لإجراء العمليات الحسابية باستخدام Shaders (لغة GLSL).
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
لكن التنفيذ لديه بعض الاختلافات
ومع ذلك، يختلف تطبيق WebGL وCanvas API عن تطبيق الويب الأصلي الذي يمكنك العثور عليه في معظم متصفحات الويب. بيئة تشغيل اللعبة الصغيرة هي JavaScriptCore على iOS، وV8 على Android. جميعها عبارة عن بيئات تشغيل بدون كل من BOM وDOM. لا يوجد إعلان مستند عام ولا يوجد كائن نافذة. لذا، إذا كنت تريد استخدام DOM API لإنشاء عناصر مثل Canvas وImage، فسوف يؤدي ذلك إلى حدوث خطأ. المزيد عن وثائق Minigame الرسمية (الصينية).
يمكن أن تتكيف مكتبات الويب مع بيئة الألعاب الصغيرة
لسد الفجوة بين الويب والألعاب الصغيرة، كان فريق WeChat minigame يعمل على مكتبة خاصة، وهي weapp-adapter. الهدف هو جعل مكتبات الويب متوافقة مع Minigames. ومع ذلك، لا يزال التنفيذ الحالي للمكتبة غير كامل وغير مكتمل، وغالبًا ما تكون هناك حاجة إلى عمل إضافي لإصلاح كل مكتبة تابعة لجهة خارجية تنوي العمل معها.
لقد تم بالفعل نقل العديد من محركات ألعاب الويب (رسميًا وغير رسمي)
| محرك | ركز | حالة |
|---|---|---|
| الكاكاو | محرك ألعاب الويب الصيني ثنائي الأبعاد القائم على واجهة المستخدم | معتمد رسميًا |
| لايا | محرك ألعاب الويب الصيني ثنائي وثلاثي الأبعاد | معتمد رسميًا |
| البلشون الأبيض | محرك ألعاب الويب الصيني ثنائي الأبعاد القائم على واجهة المستخدم | معتمد رسميًا |
| الوحدة | محرك ألعاب ثلاثي الأبعاد/ثنائي الأبعاد، متوافق مع معايير الصناعة | غير معتمد حتى الآن |
| فيزر (الويب) | محرك ألعاب الويب ثنائي الأبعاد، وهو معيار صناعي في ألعاب الويب | العمل من خلال منفذ غير رسمي |
| ثريجس | محرك ويب ثلاثي الأبعاد، معيار الصناعة | العمل من خلال منفذ غير رسمي |
هل يمكنني بالفعل برمجة لعبة صغيرة خاصة بي؟ نعم، يمكنك بالفعل برمجة لعبة صغيرة خاصة بك! كل ما ستحتاجه، بدءًا من الوثائق وحتى أدوات المطورين، متاح للعامة.
هل يمكن الافراج عنه بعد؟ لا، لا يمكن نشره بعد، ولكن لا يزال بإمكانك معاينته على هاتفك. (المزيد حول عرض IDE التالي)
متى سيتم الافراج عنه؟ نحن لا نعرف حتى الآن.
أنماط رسومات الألعاب: ثنائية وثلاثية الأبعاد ممكنة.
بفضل الوصول إلى WebGL، يمكننا أيضًا عرض ألعاب ثلاثية الأبعاد، والتي سيتم تسريعها باستخدام GPU.
الأداء: نظام أفضل قليلاً من ألعاب الويب
لا يزال النظام شابًا وفي مرحلة الاختبار التجريبي، ولكن يمكننا أن نرى بالفعل أن الأداء مشابه جدًا لما تستطيع ألعاب الويب تقديمه. القاعدة الأساسية الجيدة، في الوقت الحالي، هي عدم توقع أكثر مما يمكن أن تفعله لعبة الويب، من حيث القيود.
ولا يزال الحجم هو العائق الرئيسي.
أحد أكبر القيود المفروضة على الألعاب الصغيرة يأتي من حجمها. يسمح Wechat حاليًا بحزم تصل إلى 4 ميجا بايت فقط من الألعاب. من المحتمل أن تتمكن لعبتك من تنزيل أصول إضافية من خادم خارجي، لكن ضع في الاعتبار أنه يجب جلبها في كل مرة تبدأ فيها اللعبة. لذلك، يجب أن تكون الألعاب خفيفة إلى حد ما من حيث الأصول، ويجب أن تستخدم الألعاب ثلاثية الأبعاد كائنات ثلاثية الأبعاد منخفضة البولي وأنسجة منخفضة الجودة.
الويب → تحويل الألعاب الصغيرة: يعتمد بشكل كبير على قاعدة التعليمات البرمجية الأساسية
من الممكن تحويل ألعاب الويب إلى ألعاب صغيرة. ومع ذلك، وفقًا للمكتبات المحددة ومحرك اللعبة المستخدم، قد تستغرق العملية من أيام إلى أشهر من التطوير. يلزم إجراء تدقيق مسبق للكود المصدري للعبة لتقدير مقدار الوقت الذي سيستغرقه التعديل المعين.
Minigame → تحويل الويب: إنه سريع!
إذا كنت تستخدم إطارًا قياسيًا لألعاب الويب لتطوير الألعاب الصغيرة، مثل Phaser، فسيكون الكود الخاص بك في الغالب متوافقًا مع الويب بالفعل، لذلك سيعمل على المتصفح دون الكثير من التغيير والتبديل.
أدوات IDE وتصحيح الأخطاء هي نفس التطبيقات المصغرة. ومع ذلك، فهي باللغة الصينية بحتة. تجربة تصحيح الأخطاء بشكل عام جيدة جدًا، على الرغم من أنها قد تكون عربات التي تجرها الدواب إلى حد ما بسبب حداثتها.
تمت ترجمة الواجهة بأكملها إلى اللغة الإنجليزية هنا من أجل الوضوح.
إحدى نقاط الاهتمام الأساسية للألعاب الصغيرة هي الوصول السلس إلى الميزات الاجتماعية المضمنة داخل منصة WeChat، والتي تزيد من معدلات الحيوية والمشاركة. وفيما يلي عرض للآليات الرئيسية وكيفية استخدامها.
الحصول على معلومات المستخدم الحالية
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
معلومات شخصية أخرى يمكنك الحصول عليها:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html?t=201832
احصل على قائمة بيانات الأصدقاء الذين لعبوا اللعبة
wx.getFriendCloudStorage()
احصل على قائمة بيانات المجموعة التي لعبت اللعبة
wx.getGroupCloudStorage()
العاب صغيرة
مكتبة العاب فيزر
موقع فيزر
Phaser: قم بإنشاء البرنامج التعليمي الأول للعبة
أمثلة على الفيزر
لا تثق في المعاينة، اختبرها دائمًا على أجهزة حقيقية.
هذا مثال على جزء من التعليمات البرمجية يعمل على محاكي، ولكن ليس على جهاز حقيقي:
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
الحد من استخدام مكتبات الطرف الثالث، حيث غالبًا ما تكون هناك حاجة إلى عمل إضافي
المكتبات مثل lodash لا تعمل خارج الصندوق. غالبًا ما تحتاج إلى الدخول إلى الكود المصدري وتعديل الجزء اعتمادًا على واجهات برمجة تطبيقات DOM/BOM لتحقيق تحميلها فعليًا. في Lodash، يمكنك حل المشكلة عن طريق إضافة الوحدات المحددة واحدة تلو الأخرى، وليس المكتبة بأكملها دفعة واحدة. لكن الأمر ليس بهذه السهولة دائمًا!
npm install --save lodash.forEach
NOT
npm install --save lodash
قم بتقطيع التعليمات البرمجية الخاصة بك إلى ملفات أصغر لتسهيل عملية التصحيح
يعمل نظام تصحيح أخطاء IDE الحالي بشكل مختلف عن نظرائه في Chrome وFirefox. أحد أكبر مصادر الإحباط التي واجهتها هو أن العديد من المشكلات ستؤدي في النهاية إلى ظهور رسالة خطأ غامضة وغير محددة، دون أي معلومات حول مصدر المشكلة، باستثناء الملف الذي فشلت فيه. لذلك يعد تقسيم التعليمات البرمجية الخاصة بك إلى أجزاء أصغر أمرًا مهمًا للغاية، حيث أن العثور على خطأ مطبعي في ملف مكون من ألف سطر، دون تلميح واحد ، أصعب بكثير من العثور على خطأ مطبعي في ملف مكون من 50 سطرًا.
