Roblox هو بطبيعته عبر المنصات، حيث يمكن للاعبين اكتشاف والانضمام إلى الألعاب على هواتفهم أو أجهزة التابلت، ثم متابعة اللعب من حيث توقفوا على أجهزة الكمبيوتر أو وحدات التحكم. لدعم مجموعة متزايدة من المنصات، يجب عليك بناء واجهات مستخدم تتكيف بسلاسة مع نوع الإدخال (اللمس، وحدة التحكم، الماوس/لوحة المفاتيح)، وحجم الشاشة، واتجاه الجهاز. يمكن أن تساعدك هذه الدليل، ودليل التصميم التكيفي، والموارد المرتبطة في تصميم لعبة حقيقية عبر المنصات تكون متوافقة، ومتاحة، وممتعة على جميع المنصات.
لاستكشاف لعبة جاهزة تعرض مفاهيم التصميم عبر المنصات التالية، تحقق من عرض التفاعلية.
الإدخال
يجب أن تدعم اللعبة المصممة بعناية جميع أنواع الإدخال الأساسية، بما في ذلك الماوس ولوحة المفاتيح، واللمس، ووحدات التحكم.
الإجراءات عبر المنصات
ادعم جميع أنواع الإدخال الأساسية (الماوس/لوحة المفاتيح، اللمس، ووحدات التحكم) باستخدام نظام إجراءات الإدخال.
لتبسيط الإدخالات عبر المنصات، توفر Roblox نظام إجراءات الإدخال لتعريف الإجراءات مثل "القفز"، "الركض"، أو "إطلاق النار" وإعداد الارتباطات لمتعدد إدخالات الأجهزة لدفع تلك الإجراءات. لا تحتاج إلى التفكير في جميع الجوانب التقنية لإدخالات الأجهزة ومتى تستمع إلى مشغلات الإدخال المحددة؛ عليك ببساطة تعريف أي الإدخالات تؤدي أي الإجراءات.
كشف نوع الإدخال
تأكد من أن عناصر واجهة المستخدم تستجيب وتتكيف مع نوع الإدخال الأساسي للاعب كما هو موضح في كشف نوع الإدخال. كما يجب أن تأخذ في الاعتبار التلميحات المساعدة لمساعدة اللاعبين على فهم التغييرات المحددة في الإدخال.
في تطوير عبر المنصات، من المهم أن تحدد وتستجيب لنوع الإدخال الأساسي الذي يستخدمه اللاعب، عادةً لضمان أن عناصر واجهة المستخدم مثل الأزرار والقوائم على الشاشة تعمل بشكل أنيق وتدعم التفاعل عبر الأجهزة.
على سبيل المثال، يفترض الجهاز المدعوم باللمس أن اللمس هو الإدخال الافتراضي وأن أزرار اللمس قد تظهر للإجراءات، ولكن قد يختار اللاعب توصيل وحدة تحكم بلوتوث. في هذه الحالة، يبقى اللمس إدخالًا صالحًا، ولكن يمكنك افتراض أن اللاعب يريد التبديل إلى وحدة التحكم المتصلة كنوع الإدخال الأساسي وربما استخدام اللمس كإدخال احتياطي لواجهة المستخدم على الشاشة.
إذا كنت تستخدم نظام إجراءات الإدخال، فإن خاصية PreferredBinding تكمل كشف الإدخال الأساسي: تمامًا كما أن PreferredInput تقارير نوع الإدخال الأساسي الحالي للاعب، فإن PreferredBinding تقارير InputBinding المحدد الذي يتطابق مع جهاز اللاعب الحالي. يتم تحديث كلاهما تلقائيًا عندما يقوم اللاعب بالتبديل بين الأجهزة، لذا يمكنك دفع واجهة مستخدم مدركة للجهاز دون كتابة منطق تبديل الأجهزة بنفسك.
التلميحات المساعدة
استنادًا إلى نوع الإدخال الأساسي، يُوصى بأن تتضمن تلميحات واجهة المستخدم المساعدة كلما كان ذلك ممكنًا. على سبيل المثال، عند اختيار الأدوات للتجهيز، اعرض تلميحات محددة للإدخال مثل 1–5 عندما يستخدم اللاعب لوحة مفاتيح، أو تلميحات زناد وحدة التحكم عندما يستخدم اللاعب وحدة تحكم.
للحصول على تلميحات مساعدة بدون كود تتحدث تلقائيًا عند تبديل اللاعب للأجهزة، استخدم InputActionLabel وأشر إلى أي InputAction لعرض الإدخال الصحيح لكل منصة. انظر عرض الارتباطات للحصول على التفاصيل الكاملة.
للحصول على تحكم أكثر دقة، أو إذا كنت بحاجة إلى تخصيص عرض التلميحات بما يتجاوز ما يقدمه InputActionLabel، يمكنك استخدام طرق UserInputService أدناه لجمع الصور والنصوص الخاصة بالمنصة يدويًا:
تعتبر طرق 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 TVs للاعبين على وحدات التحكم، لذا يُوصى بأن تستكشف تكييف حجم الشاشة كوسيلة لتكييف تخطيطات واجهة المستخدم عبر وجهات نظر مختلفة.
تكييف حجم الشاشة
قم بتكييف واجهة المستخدم مع أحجام العرض المختلفة من خلال التحقق والاستماع للتغييرات في حجم عرض الشاشة.
مع وجود مجموعة متنوعة من أحجام الشاشات الممكنة المتاحة على منصة Roblox، فإن محاولة توقع حجم الشاشة بالبكسل غالبًا ما تؤدي إلى سوء التفسير. لمساعدتك في تحديد حجم شاشة اللاعب لتكييف حجم/موضع عناصر واجهة المستخدم، توفر Roblox خاصية ViewportDisplaySize للقراءة فقط والتي تمثل حجم العرض المصنف داخليًا للعرض.
| ViewportDisplaySize | الملخص |
|---|---|
| Small | معظم الأجهزة اللوحية/المحمولة/اليدوية |
| Medium | معظم أجهزة الكمبيوتر المحمولة والشاشات |
| Large | معظم أجهزة التلفاز أو الأكبر |
للحصول على تخصيص أكثر طبيعية، يمكنك استخدام محرر الأنماط لتكوين استعلامات الأنماط لكل من قيم ViewportDisplaySize و PreferredInput. باستخدام محددات داخلية مثل @ViewportDisplaySizeSmall أو @PreferredInputTouch، يمكن لواجهة المستخدم الخاصة بك تلقائيًا تبديل الرموز لأحجام النصوص، وأبعاد الحاويات، وقياسات أخرى مع تغير بيئة جهاز اللاعب أو طريقة الإدخال الأساسية.
حاويات التخطيط
استخدم التخطيطات لتنظيم مكونات واجهة المستخدم الفردية وتأكد من أن الحاويات تتكيف بشكل استجابة مع العناصر الفرعية داخلها.
لتسهيل تنظيم واجهة المستخدم، يجب عليك استخدام مكونات التخطيط لتنظيم الأطفال. عند استخدام حاويات التخطيط، تأكد من أن الأطفال قابلين للقراءة، ومتاحين، وغير مزدحمين. أحد مكونات التخطيط الشائعة هو UIListLayout، الذي يضع GuiObjects الشقيقة في صفوف أو أعمدة ويتكيف وفقًا لذلك كلما قمت بإضافة أو إزالة كائن شقيق.
يجب عليك أيضًا مراعاة توزيع وتحديد موضع العناصر داخل حاويات التخطيط للحصول على أفضل تجربة مستخدم. يعد دمج المرونة في تخطيط القائمة وسيلة قوية لـ ملء/توزيع متساوي أو محاذاة/تمديد العناصر عبر خطها، أو مرونة العناصر المحددة عبر مساحة متغيرة.
الوصول
تأكد من أن جميع النصوص قابلة للقراءة على جميع الشاشات. كما تأكد من أن جميع واجهات المستخدم تحتوي على تباين كافٍ وأن لا شيء يعتمد فقط على اللون لتمييز إجراء أو نتيجة.
حتى مع حجم عناصر واجهة المستخدم بشكل صحيح عبر جميع أحجام شاشات الأجهزة، يجب أن يلبي اللعبة بشكل عام معايير الوصول للاعبين ذوي ضعف البصر أو عمى الألوان. يمكن أن يؤثر حجم النص بشكل كبير على قابلية قراءة واجهة المستخدم المعتمدة على النص، لذا يجب عليك تضمين قيود حجم النص لضمان عدم تحول النص إلى غير قابل للقراءة (صغير جدًا) أو بصريًا كبير جدًا على الشاشات الأكبر مثل شاشات 4K TVs.
للحصول على المزيد من النصائح حول الوصول، انظر إرشادات الوصول.
نصائح وحيل نهائية
بينما تعمل نحو لعبة كاملة عبر المنصات، ضع في اعتبارك النصائح والحيل التالية:
- محاكاة الأجهزة ضرورية لتصميم لعبة مثالية على Roblox. استخدم محاكي الأجهزة المدمج ومحاكي وحدة التحكم لمحاكاة أجهزة ووحدات تحكم مختلفة مباشرة في الاستوديو.
- تتيح لك أنماط واجهة المستخدم في Roblox، المشابهة لـ CSS، إعلان وتطبيق تغييرات عالمية على خصائص مثيلات واجهة المستخدم. جنبًا إلى جنب مع محرر الأنماط المدمج، يمكنك إعداد واجهة مستخدم كاملة وسهلة التعديل.
- بمجرد أن تصبح لعبتك فعالة عبر المنصات، استكشف الميزات الأصلية مثل ردود الفعل اللمسية على الأجهزة المحمولة ووحدات التحكم، وإيماءات اللمس مثل TouchSwipe و TouchPinch، أو وظائف مقياس التسارع والجيروسكوب على الأجهزة AccelerometerEnabled و GyroscopeEnabled.