Roblox هو بطبيعته عبر المنصات، حيث يمكن للاعبين اكتشاف والانضمام إلى الألعاب على هواتفهم أو أجهزتهم اللوحية، ثم الاستمرار فيما كانوا يقومون به لاحقاً على جهاز الكمبيوتر أو وحدة التحكم. لدعم مجموعة متوسعة من المنصات، يجب عليك بناء واجهات مستخدم تتكيف بسلاسة مع نوع الإدخال (اللمس، جهاز التحكم، الماوس/لوحة المفاتيح)، حجم الشاشة، وتوجه الجهاز. يمكن أن يساعدك هذا الدليل، ودليل التصميم المتكيف، والموارد المرتبطة في تصميم لعبة عبر المنصات الحقيقية التي تكون متوافقة ومتاحة وممتعة على جميع المنصات.
لاستكشاف لعبة معدة مسبقًا تعرض مفاهيم التصميم عبر المنصات التالية، تحقق من عرض التفاعلية.
الإدخال
يجب أن تدعم اللعبة المصممة بعناية جميع أنواع الإدخال الرئيسية، بما في ذلك الماوس ولوحة المفاتيح، اللمس، وأجهزة التحكم.
الإجراءات عبر المنصات
قم بدعم جميع أنواع الإدخال الرئيسية (الماوس/لوحة المفاتيح، اللمس، وأجهزة التحكم) باستخدام نظام إجراءات الإدخال.
لتبسيط الإدخالات عبر المنصات، توفر Roblox نظام إجراءات الإدخال لتعريف الإجراءات مثل "القفز"، "الركض"، أو "إطلاق النار" وإعداد الربط لمتعدد المدخلات والأجهزة لدفع تلك الإجراءات. ليس عليك التفكير في جميع الجوانب التقنية لمداخل الأجهزة ومتى يجب الاستماع لإشارات الإدخال المحددة؛ ما عليك سوى تحديد أي المدخلات تقوم بأي إجراءات.
كشف نوع الإدخال
تأكد من أن عناصر واجهة المستخدم تستجيب وتتكيف مع نوع الإدخال الرئيسي للاعب كما هو موضح في كشف نوع الإدخال. ضع في اعتبارك أيضًا التلميحات المساعدة لمساعدة اللاعبين على فهم تغييرات الإدخال المحددة.
في تطوير عبر المنصات، من المهم أن تحدد وتستجيب لنوع الإدخال الرئيسي الذي يستخدمه اللاعب، عادةً لضمان عمل عناصر واجهة المستخدم مثل الأزرار والقوائم على الشاشة بشكل أنيق ودعم التفاعل عبر الأجهزة.
على سبيل المثال، يفترض أن الجهاز المدعوم باللمس يعتبر اللمس هو المدخل الافتراضي وأن أزرار اللمس قد تظهر للإجراءات، ولكن قد يختار اللاعب توصيل جهاز تحكم بلوتوث. في هذه الحالة، يبقى اللمس مدخلاً صالحًا، ولكن يمكنك الافتراض أن اللاعب يرغب في التحويل إلى جهاز التحكم المتصل كنوع الإدخال الرئيسي واستخدام اللمس كمدخل احتياطي لواجهة المستخدم الموجودة على الشاشة.
التلميحات المساعدة
استنادًا إلى نوع الإدخال الرئيسي، يُوصى بتضمين تلميحات واجهة المستخدم المساعدة كلما أمكن ذلك. على سبيل المثال، عند اختيار الأدوات للتجهيز، عرض تلميحات إدخال محددة مثل 1–5 عندما يستخدم اللاعب لوحة المفاتيح، أو تلميحات زر جهاز التحكم عندما يستخدم اللاعب جهاز تحكم.
تعتبر طرق GetImageForKeyCode() وGetStringForKeyCode() مفيدة في جمع صورة أو سلسلة محددة بالنظام الأساسي لاستخدامها في تلميح واجهة المستخدم، مثل الأمثلة التالية:
| رمز المفتاح | صورة Xbox | صورة PlayStation | سلسلة |
|---|---|---|---|
| Enum.KeyCode.ButtonA |  |  | ButtonA |
| Enum.KeyCode.ButtonX |  |  | ButtonX |
| Enum.KeyCode.One | غير متاح | غير متاح | 1 |
| Enum.KeyCode.Five | غير متاح | غير متاح | 5 |
واجهة المستخدم
تعتبر واجهة المستخدم المصممة بشكل جيد أمرًا ضروريًا للاعبين على جميع المنصات للتفاعل مع لعبتك.
الموضع والحجم
تأكد من أن جميع عناصر واجهة المستخدم مرئية على جميع أحجام الشاشات والتوجهات.
تأكد من أن جميع الأزرار/التحكمات قابلة للتفاعل وأنها غير محجوبة أو مغطاة بواسطة قصاصات الجهاز أو عناصر واجهة Roblox.
يجب أن تكون جميع عناصر واجهة المستخدم تم وضعها وتمتد بشكل مناسب لضمان الرؤية والتفاعل عبر أحجام الشاشات المتعددة. يعد وضع عناصر واجهة المستخدم باستخدام Scale نهجًا شائعًا لأنه يعتمد على نسبة مئوية من X وY الشاشة، وليس قيمة بكسل (يمكن أن تختلف البكسلات بشكل تعسفي من حيث العدد والكثافة عبر الأجهزة). يمكنك أيضًا استخدام AnchorPoint لتعيين نقطة الأصل الموضعية. على سبيل المثال، يتم وضع حاوية واجهة المستخدم التي تحمل عدادات الجواهر/العملات في الصورة التالية عند مقياس X قدره 1 (يمين) وY قدره 0 (أعلى) مع نقطة ربط في الزاوية العليا اليمنى.
ينصح أيضًا باستخدام Scale لــ حجم عناصر واجهة المستخدم، مثل جعل حاوية واجهة المستخدم تمتد بنسبة 75% من العرض على كل شاشة. ومع ذلك، فإن 75% ستظهر بحجم ضخم على شاشات 4K للاعبين في وحدات التحكم، لذا يُنصح باستكشاف تكييف حجم الشاشة كطريقة لتكييف تخطيطات واجهة المستخدم عبر وجهات النظر المختلفة.
تكييف حجم الشاشة
قم بتكييف واجهة المستخدم لتناسب أحجام العرض المختلفة من خلال فحص والاستماع للتغييرات في حجم عرض الشاشة.
مع تنوع أحجام الشاشات الممكنة المتاحة على منصة Roblox، فإن محاولة التنبؤ بحجم الشاشة بالبكسلات غالبًا ما تؤدي إلى سوء الفهم. لمساعدتك في تحديد حجم شاشة اللاعب لتكييف حجم/موضع عناصر واجهة المستخدم، توفر Roblox خاصية ViewportDisplaySize للقراءة فقط، والتي تمثل حجم العرض المعالج داخليًا للعرض.
| ViewportDisplaySize | ملخص |
|---|---|
| Small | معظم الأجهزة اللوحية/المحمولة/اليدوية |
| Medium | معظم أجهزة الكمبيوتر المحمولة والشاشات |
| Large | معظم أجهزة التلفاز أو الأجهزة الأكبر |
لتحقيق تخصيص أصلي أكثر، يمكنك استخدام محرر الأنماط لتكوين استعلامات الأنماط لكل من قيم ViewportDisplaySize وPreferredInput. يسمح استخدام محددات داخلية مثل @ViewportDisplaySizeSmall أو @PreferredInputTouch لواجهة المستخدم الخاصة بك بمبادلة الرموز تلقائيًا لأحجام النصوص، وأبعاد الحاويات، وقياسات أخرى مع تغيّر بيئة جهاز اللاعب أو طريقة الإدخال الرئيسية.
حاويات التخطيط
استخدم التخطيطات لتنظيم مكونات واجهة المستخدم الفردية وضمان أن تتكيف الحاويات بشكل استجابة مع العناصر الفرعية داخلها.
لتسهيل تنظيم واجهة المستخدم، يجب عليك استخدام مكونات التخطيط لتنظيم الأطفال. عند استخدام حاويات التخطيط، تأكد من أن الأطفال مقروءون، متاحون، وغير مزدحمين. تعتبر مكون التخطيط شائعًا هو UIListLayout، الذي يضع كائنات GuiObjects المتجاورة في صفوف أو أعمدة ويتكيف وفقًا عند إضافة أو إزالة كائن مجاور.
يجب أن تأخذ أيضًا في اعتبارك توزيع العناصر والموضع النسبي للعناصر داخل حاويات التخطيط لأفضل تجربة مستخدم. يعد دمج flex في تخطيط القائمة وسيلة قوية لــ ملء/توزيع متساوي أو تراصف/تمديد العناصر عبر خطها، أو تخصص عناصر flex عبر مساحة متغيرة.
الوصول
تأكد من أن جميع النصوص قابلة للقراءة على جميع الشاشات. تأكد أيضًا من أن جميع واجهات المستخدم لديها تباين كاف ولا يعتمد شيء فقط على اللون لتمييز إجراء أو نتيجة.
حتى مع حجم عناصر واجهة المستخدم بشكل صحيح عبر جميع أحجام شاشات الأجهزة، يجب أن يلبي اللعبة المعايير للوصول للاعبين ذوي الإعاقة البصرية أو عمى الألوان. يمكن أن يؤثر حجم النص بشكل كبير على قابلية قراءة واجهة المستخدم المستندة إلى النص، لذلك يجب عليك تضمين قيد حجم النص لضمان عدم تحول النص إلى غير قابل للقراءة (صغير جدًا) أو بصريًا كبير جدًا على الشاشات الأكبر مثل شاشات 4K TVs.
للحصول على المزيد من النصائح حول الوصول، انظر هنا.
نصائح وحيل أخيرة
بينما تعمل نحو لعبة كاملة عبر المنصات، ضع في اعتبارك النصائح والحيل التالية:
- إن محاكاة الأجهزة ضرورية لتصميم لعبة مثالية على Roblox. استخدم محاكي الأجهزة المدمج ومحاكي وحدة التحكم لمحاكاة أجهزة مختلفة وأجهزة التحكم مباشرة في الاستوديو.
- توفر أدوات تصميم واجهة المستخدم في Roblox، المشابهة لـ CSS، إمكانية الإعلان وتطبيق تعديلات عالمية على خصائص مثيلات واجهة المستخدم. جنبًا إلى جنب مع محرر الأنماط المدمج، يمكنك إعداد واجهة مستخدم كاملة وسهلة التعديل.
- بمجرد أن تصبح لعبتك فعالة عبر المنصات، استكشف الميزات الأصلية مثل الاهتزاز اللمسي على الهاتف المحمول وأجهزة التحكم، والإيماءات اللمسية مثل TouchSwipe وTouchPinch، أو وظيفة مقياس التسارع والدوران على أجهزة AccelerometerEnabled وGyroscopeEnabled.