Ka baadh boqolaal xirfadood oo diyaarsan oo loogu talagalay Claude, Cursor, iyo waxyaabo kale.
واجهة المستخدم في الألعاب هي الجزء الأصعب في تطوير الألعاب المستقلة (ولا أحد يتحدث عن ذلك)
يرسل معظم مطوري الألعاب المستقلة نموذجًا أوليًا قابلاً للعمل للعبة في أسبوعين. ثم يقضون الأشهر الثلاثة التالية عالقين في واجهة المستخدم. أزرار تبدو كفن برمجي. تراكبات لوحة المعلومات التي تتعارض مع الكاميرا. شبكات جرد مبنية بـ position: absolute وصلوات. مهارات الذكاء الاصطناعي لواجهة المستخدم في الألعاب على Vibe Skills تولد أنظمة قوائم متماسكة ولوحات معلومات وتراكبات للألعاب المتصفح في جلسة واحدة - حتى تتمكن من شحن اللعبة، وليس شاشة الإعدادات.
يتناول هذا الدليل سبب تحديد واجهة المستخدم للاحتفاظ باللاعبين، والأسطح الستة لواجهة المستخدم التي تحتاجها كل لعبة، ومهارات واجهة المستخدم للألعاب بالذكاء الاصطناعي المتوفرة على Vibe Skills، وسير عمل نهاية الأسبوع لشحن مجموعة أدوات واجهة مستخدم كاملة.
Ka baadh boqolaal xirfadood oo diyaarsan oo loogu talagalay Claude, Cursor, iyo waxyaabo kale.
لماذا تحدد واجهة المستخدم في الألعاب الاحتفاظ باللاعبين
يحكم اللاعبون على لعبتك في أول 90 ثانية، ويقضى معظم تلك الثواني داخل واجهة المستخدم. القائمة الرئيسية، الإعدادات، تلميحات التحكم، لوحة المعلومات الأولى التي يرونها عند بدء اللعبة. إذا كانت واجهة المستخدم تبدو متداعية، فلن تحظى طريقة اللعب بفرصة أبدًا.
بعض الأرقام التي تستحق الاحتفاظ بها في ذهنك:
- 38% من اللاعبين يتركون لعبة متصفح في الجلسة الأولى إذا بدت القائمة الرئيسية معطلة أو غير مصممة (بيانات اختبار اللعب من itch.io، 2025).
- قائمة Hollow Knight الرئيسية تتكون من 4 أزرار، مرسومة يدويًا، وتعمل بسرعة 60 إطارًا في الثانية - وهي أحد الأسباب الأكثر ذكرًا لبقاء اللاعبين خلال أول 30 دقيقة قاسية.
- شاشة الإيقاف المؤقت في Celeste تستخدم 3 أحجام خطوط ولونين. هذا هو نظام واجهة المستخدم بأكمله. التحفظ يقرأ كجودة.
- الألعاب ذات الميزانيات الكبيرة تنفق 15-20% من ميزانية الإنتاج بأكملها على واجهة المستخدم/تجربة المستخدم. ينفق المطورون المستقلون عادة 0%.
هذه الفجوة هي بالضبط ما تم بناؤه لملء مهارات الذكاء الاصطناعي.
Ka baadh boqolaal xirfadood oo diyaarsan oo loogu talagalay Claude, Cursor, iyo waxyaabo kale.
الأسطح الستة لواجهة المستخدم التي تحتاجها كل لعبة
قبل أن تنشئ أي شيء، اعرف ما الذي تنشئه. تحتاج كل لعبة متصفح - منصة ثنائية الأبعاد، مطلق نار ثلاثي الأبعاد، نقر خامل، محاكاة مشي - إلى نفس الأسطح الستة لواجهة المستخدم. مهارة ذكاء اصطناعي جيدة تشحنها جميعًا في نظام أسلوب متماسك واحد.
| السطح | الغرض | أخطاء شائعة | ما تبدو عليه "الجودة" |
|---|---|---|---|
| القائمة الرئيسية | الانطباع الأول. تحدد الاتجاه الفني. | خطوط المتصفح الافتراضية، النص في الوسط، لا توجد حالات تمرير | 3-5 أزرار كحد أقصى، خطوط مخصصة، رسوم متحركة دقيقة عند التمرير، حلقة خلفية |
| تراكب لوحة المعلومات (HUD) | معلومات داخل اللعبة: الصحة، النقاط، الذخيرة، المؤقت | أرقام عائمة في زوايا عشوائية، لا توجد تجميع، تتعارض مع الكاميرا | مثبتة في الزوايا، شبه شفافة، مجمعة حسب نوع البيانات، تتلاشى عند عدم النشاط |
| الجرد / تجهيز المعدات | شاشة إدارة العناصر | شبكة 16 عمودًا، لا يوجد ندرة للعناصر، تلميحات أدوات تحجب الشاشة | شبكة 4-8 أعمدة، ندرة ملونة، تلميح أدوات على الجانب، سحب وإفلات أو نقر |
| الإعدادات / الخيارات | الصوت، التحكم، الرسومات | قائمة واحدة طويلة قابلة للتمرير من المفاتيح | علامات تبويب (صوت / فيديو / تحكم)، أشرطة تمرير بدلاً من المفاتيح، "تطبيق" + "إعادة تعيين إلى الافتراضي" |
| قائمة الإيقاف المؤقت | مقاطعة أثناء اللعب | نافذة منبثقة تخفي اللعبة بأكملها | تراكب بكثافة 60%، 4-5 خيارات، "استئناف" محدد تلقائيًا للوحة المفاتيح |
| شاشة النهاية | الفوز، الخسارة، أو ملخص الجولة | "انتهت اللعبة" باللون الأحمر Arial، لا يوجد زر إعادة تشغيل | ملخص الإحصائيات، دعوة كبيرة لاتخاذ إجراء "العب مرة أخرى"، "القائمة الرئيسية" ثانوية |
تبدو اللعبة ذات 6 أسطح لواجهة مستخدم مصقولة وكأنها مكتملة. تبدو اللعبة ذات 6 أسطح لواجهة مستخدم غير مصقولة وكأنها مشروع مدرسي، بغض النظر عن مدى جودة طريقة اللعب.
الجزء الأصعب هو الحفاظ على تماسك الـ 6 جميعًا - نفس عائلة الخطوط، نفس نصف قطر الأزرار، نفس سلوك التمرير، نفس لوحة الألوان. هذا هو المكان الذي تكسب فيه مهارات الذكاء الاصطناعي مقابلها.
5 مهارات لواجهة المستخدم للألعاب بالذكاء الاصطناعي على Vibe Skills
فئة الألعاب ثلاثية الأبعاد على Vibe Skills تضم أكثر من 30 مهارة تغطي الألعاب القابلة للعب بالكامل وأنظمة واجهة المستخدم التي يتم شحنها معها. إليك المهارات الخمس الأكثر تثبيتًا والتي تركز على واجهة المستخدم.
| المهارة | أفضل لـ | المحركات | الناتج |
|---|---|---|---|
| مولد مجموعة أدوات واجهة مستخدم ألعاب المتصفح | واجهة مستخدم كاملة مكونة من 6 أسطح في نمط متماسك واحد | Three.js، Phaser، vanilla JS | نظام تراكب HTML/CSS + حزم صور |
| نظام تراكب لوحة المعلومات (HUD) | لوحة معلومات داخل اللعبة فقط (صحة، نقاط، خريطة مصغرة، مؤقت) | Three.js، Phaser، Unity WebGL، Godot HTML5 | تراكب مع موضع CSS أو صور canvas |
| حزمة شاشة الإيقاف المؤقت + الإعدادات | الإيقاف المؤقت، الإعدادات، إعادة تعيين الأزرار | أي محرك ألعاب قائم على الويب | مكونات React/HTML منبثقة |
| نظام الجرد + تلميحات الغنائم | شبكات العناصر، السحب والإفلات، ألوان الندرة، تلميحات الأدوات | Three.js، Phaser، Unity WebGL | مكتبة مكونات + قوالب بطاقات العناصر |
| مزيج القائمة الرئيسية + شاشة النهاية | الانطباعات الأولى والأخيرة | أي | قائمة متحركة مع Lottie + شاشة إحصائيات نهاية اللعبة |
جميع المهارات الخمس تشحن مع ملف رموز تصميم مشترك (ألوان، خطوط، مسافات، تخفيف) حتى تبدو الأسطح وكأنها جاءت من نفس المصمم. معظم مجموعات واجهة المستخدم المستقلة تفشل في هذا الاختبار - تستخدم القائمة خطًا واحدًا، وتستخدم لوحة المعلومات خطًا آخر، ويلاحظ اللاعبون ذلك على الفور.
تصفح مهارات الألعاب ثلاثية الأبعاد على Vibe Skills →
بناء مجموعة أدوات واجهة مستخدم كاملة للعبة في عطلة نهاية الأسبوع
هذا هو سير العمل الفعلي الذي يستخدمه مطورو الألعاب المستقلون الذين يشحنون ألعاب المتصفحات على itch.io و Newgrounds. الوقت الإجمالي: حوالي 12 ساعة عمل على مدار عطلة نهاية الأسبوع.
الخطوة 1: اختر مهارة واجهة مستخدم على Vibe Skills
افتح فئة الألعاب ثلاثية الأبعاد وقم بتثبيت مهارة مولد مجموعة أدوات واجهة مستخدم ألعاب المتصفح. إنها الوحيدة التي تشحن جميع الأسطح الستة في نظام رموز متماسك واحد. إذا كانت لعبتك تحتوي بالفعل على قوائم عاملة وتحتاج فقط إلى لوحة معلومات، فقم بتثبيت مهارة تراكب لوحة المعلومات المستقلة بدلاً من ذلك.
الخطوة 2: حدد "جو" لعبتك بثلاث كلمات
قبل التوليد، اكتب 3 كلمات تصف نغمة لعبتك. أمثلة: "نيون، وحشي، سريع" (مطلق نار موجة سينث)، "ناعم، مائي، بطيء" (لعبة صيد)، "ضخم، قديم، بكسل" (مترويدفانيا). تستخدم المهارة هذه كمدخلات للوحة الألوان، واختيار الطباعة، وتخفيف الرسوم المتحركة. لا تتخطى هذا - المدخلات العامة تنتج واجهة مستخدم عامة.
الخطوة 3: قم بتوليد رموز التصميم أولاً
تنتج المهارة ملف tokens.css أو تكوين Tailwind مع لوحتك، ومكدس الخطوط، ونصف قطر الأزرار، ومقياس المسافات، وتوقيت الرسوم المتحركة. راجع هذا قبل توليد أي واجهة مستخدم فعلية. إذا بدت الرموز خاطئة هنا، فسيبدو كل سطح خاطئًا. قم بالتعديل حتى تحبها.
الخطوة 4: قم بتوليد جميع الأسطح الستة في دفعة واحدة
مع الرموز المعتمدة، قم بتشغيل توليد الـ 6 أسطح بالكامل. الناتج هو مجلد من ملفات HTML/CSS (أو مكونات React، اعتمادًا على محركك) بالإضافة إلى حزمة صور SVG للأيقونات. بالنسبة لـ Three.js أو Phaser، استخدم نهج تراكب HTML (عناصر DOM مكدسة فوق canvas مع pointer-events: none على الغلاف). بالنسبة لـ Unity WebGL أو Godot HTML5، استخدم المتغير المستند إلى canvas الذي تشحنه المهارة.
الخطوة 5: قم بربطها بحلقة لعبتك
قم بتوصيل لوحة المعلومات بحالة لعبتك (قيمة الصحة، النقاط، المؤقت). تتضمن معظم المهارات محول GameUIState صغير يعرض واجهة برمجة تطبيقات مثل setHealth(0.7) حتى لا تضطر إلى لمس متغيرات CSS يدويًا. قم بربط أحداث الإيقاف المؤقت والإعدادات والنهاية بمعالج الإدخال الحالي الخاص بك.
الخطوة 6: اختبر اللعب مع 3 غرباء وقم بمراجعتها
سيخبرك الأصدقاء أن واجهة المستخدم رائعة. سيخبرك الغرباء بالحقيقة. انشر نسخة تجريبية على itch.io، واطلب من 3 أشخاص عشوائيين اللعب لمدة 5 دقائق، وشاهد التسجيل. ستظهر أخطاء واجهة المستخدم المهمة في أول 60 ثانية. قم بإصلاحها، وقم بتوليد السطح المتأثر مرة أخرى، وقم بالشحن.
الوقت الإجمالي: الخطوة 1-3 (حوالي ساعة واحدة) + الخطوة 4 (حوالي 30 دقيقة) + الخطوة 5 (حوالي 6-8 ساعات تكامل) + الخطوة 6 (حوالي 3 ساعات دورات اختبار اللعب) = عطلة نهاية الأسبوع.
سيتقاضى مصمم واجهة مستخدم مستقل 3000 دولار - 8000 دولار لنفس النطاق وسيستغرق 4-6 أسابيع. تبدأ الاشتراك في Vibe Skills من 39 دولارًا شهريًا وتمنحك عمليات توليد غير محدودة - حتى تتمكن من التكرار بقدر ما تريد حتى تبدو واجهة المستخدم صحيحة.
قم بتثبيت مهارة واجهة مستخدم للألعاب على Vibe Skills →
أسئلة متكررة
هل يجب علي بناء واجهة مستخدم لعبتي كتراكب HTML/CSS أم مباشرة على canvas؟
بالنسبة لمعظم ألعاب المتصفح، فإن تراكب HTML/CSS فوق canvas الخاص بـ Three.js أو Phaser أسرع في البناء، وأسهل في جعله متاحًا، ويعرض النص بوضوح في أي دقة. استخدم واجهة مستخدم قائمة على canvas فقط عندما تحتاج إلى اتساق فني دقيق بالبكسل (لعبة فن بكسل صارمة) أو عندما تتداخل أحداث DOM مع الإدخال. تشحن المهارات على Vibe Skills كلا المتغيرين.
هل ستعمل واجهة المستخدم على الهاتف المحمول، أم أحتاج إلى إصدار منفصل للهاتف المحمول؟
تقوم مجموعة أدوات واجهة مستخدم ألعاب المتصفح على Vibe Skills بإنشاء تخطيطات متجاوبة تعمل على أجهزة اللمس فورًا - أهداف نقر أكبر، وتبديل تراكبات التحكم للهاتف المحمول (D-pad وأزرار الإجراء)، وقائمة إيقاف مؤقت أولية للهاتف المحمول. لا تحتاج إلى إصدار منفصل، ولكنك تحتاج إلى الاختبار على هاتف حقيقي. أدوات مطوري المتصفح تكذب بشأن أداء اللمس.
ما مدى سهولة الوصول إلى واجهة مستخدم الألعاب بشكل واقعي؟
يمكن لألعاب المتصفح أن تحقق WCAG AA بسهولة للقوائم والإعدادات ولوحات المعلومات - التنقل باستخدام لوحة المفاتيح، وحلقات التركيز، وتباين الألوان 4.5:1، وتسميات قارئ الشاشة للنقاط والصحة. يجعل نهج تراكب HTML كل هذا مجانيًا تقريبًا. تشحن المهارات على Vibe Skills ترميزًا متاحًا بشكل افتراضي. اللعب الفعلي أصعب في جعله متاحًا، ولكن لا ينبغي أن تكون واجهة المستخدم هي العائق.
هل تعمل نفس مجموعة أدوات واجهة المستخدم لإصدارات Unity WebGL و Godot HTML5؟
نعم، في الغالب. كلاهما Unity WebGL و Godot HTML5 يقومان بالعرض على canvas، ويمكنك وضع تراكب DOM فوقه. تتضمن المهارات محولات لكلتا المحركين حتى تتحدث واجهة المستخدم مع حالة لعبتك. تتطلب الميزات الخاصة بـ Unity (مثل نظام الأحداث المدمج) جسرًا رفيعًا - تشحن المهارة كودًا نموذجيًا لهذا الجسر.
كيف أحافظ على اتساق القائمة ولوحة المعلومات والجرد بصريًا؟
هذا هو السبب رقم 1 الذي يجعل واجهة المستخدم في الألعاب المستقلة تبدو هاوية - 6 أسطح مصممة بشكل منفصل. الحل هو رموز التصميم المشتركة: ملف واحد يحدد الألوان والخطوط والمسافات والتخفيف. يستورد كل سطح من هذا الملف. تقوم المهارات على Vibe Skills بذلك تلقائيًا - قم بتوليد الرموز مرة واحدة، وقم بتوليد جميع الأسطح الستة من تلك الرموز، وانتهى الأمر.
هل يمكنني تخصيص واجهة المستخدم التي تم إنشاؤها دون كسر المهارة؟
نعم. تشحن المهارات ملفات HTML و CSS و (اختياريًا) مكونات React قابلة للتحرير. أنت تمتلك الملفات. يقوم معظم المطورين بتعديل الألوان، وتبديل شعار، واستبدال الأيقونات، وتغيير شكل زر أو اثنين - هذا كل شيء. إذا كنت بحاجة إلى تغيير نمط كبير، قم بإعادة التوليد من رموز محدثة بدلاً من إعادة كتابة الأسطح يدويًا.
ماذا لو كانت لعبتي تحتوي بالفعل على واجهة مستخدم نصف مبنية - هل يجب أن أتخلص منها؟
لا. قم بتثبيت مهارة تراكب لوحة المعلومات أو حزمة الإيقاف المؤقت + الإعدادات المستقلة واستبدل سطحًا واحدًا في كل مرة. يقوم معظم المطورين المستقلين بترقية القائمة الرئيسية أولاً (أعلى رؤية)، ثم لوحة المعلومات (الأكثر استخدامًا)، ثم الإعدادات والإيقاف المؤقت (الأقل استخدامًا ولكن الأكثر تعطلاً). ستشعر بقفزة الجودة بعد شحن السطح الأول.
شحن واجهة المستخدم، ثم شحن اللعبة
واجهة المستخدم في الألعاب هي القاتل الصامت للمشاريع المستقلة. يمكن أن تكون طريقة اللعب رائعة، ولكن إذا بدت القائمة وكأنها سمة WordPress افتراضية، فإن اللاعبين يبتعدون في 90 ثانية. واجهة المستخدم المصقولة - رموز متماسكة، لوحة معلومات مثبتة، إعدادات نظيفة، شاشة نهاية مرضية - هي ما يجعل تنزيلًا لمدة 4 ساعات من itch.io يبدو كمنتج حقيقي.
تجاوز إعادة تصميم واجهة المستخدم التي تستغرق 4 أسابيع. قم بتوليد مجموعة كاملة من 6 أسطح في عطلة نهاية الأسبوع، وقم بربطها، وعد إلى جعل اللعبة ممتعة.
تصفح مهارات واجهة المستخدم للألعاب على Vibe Skills →
توقف عن بناء واجهة مستخدم الألعاب من الصفر. قم بتثبيت مهارة مجموعة أدوات واجهة المستخدم على Vibe Skills وقم بشحن القائمة ولوحة المعلومات والجرد والإعدادات والإيقاف المؤقت وشاشة النهاية في جلسة واحدة.