Studio / ROBLOX
نسب البطاقة في Roblox Studio: إعداد UIAspectRatioConstraint
حافظ على شكل العنصر المقصود دون ربط أيقونة مربعة بوصف طويل. اختر الهدف واضبط نسبة العرض إلى الارتفاع وافحص المساحة الضيقة والتخطيط والترجمة.
حدد ما الذي يتمدد فعلاً #
ابدأ بعنصر واحد، مثل صورة عنصر مربعة تصبح عريضة عند تغيير حجم اللوحة. افحص هل تتغير هيئة منطقة الصورة أم تتحرك بقية عناصر البطاقة فقط. هاتان مهمتان مختلفتان. الحفاظ على النسب يعني ثبات علاقة العرض بالارتفاع، لا عدد البكسلات نفسه على كل جهاز.
اكتب توقعاً: «تبقى منطقة الأيقونة مربعة عندما يتغير الحاوي». يمكن فحص ذلك ولا يعد بإصلاح القائمة كلها. يستخدم المقال بطاقة تدريبية مقترحة؛ لم نقس ألعاباً منشورة أو أبعاداً فعلية في Studio.
اختر العنصر الذي يحتاج نسبة ثابتة #
قسّم ItemCard في التمرين إلى IconArea وTitle وDescription. قد تحتاج الأيقونة مربعاً، بينما يحتاج النص عدة سطور. وضع قيد مربع على البطاقة كلها يصنع مسألة تصميم أخرى: يبقى على الوصف الطويل أن يناسب تلك الهيئة.
ابدأ بمهمة IconArea وحدها. هذه أسماء المثال، ولا تنشئ Roblox البنية تلقائياً. أنشئ Frame منفصلاً أو استخدم GuiObject مناسباً في النموذج. إذا احتوى ImageLabel، افحص موضعه بصورة منفصلة؛ الحاوي الخارجي المربع لا يشرح إعدادات كل الصور التابعة له.
أضف القيد تحت الهدف #
اعثر على العنصر الدقيق في Explorer وأضف UIAspectRatioConstraint كابن له. تحدد وثائق Roblox كائن GuiObject الأب باعتباره هدف القيد. اختر القيد نفسه ثم ابحث عن AspectRatio.
قبل المتابعة، راجع التسلسل: ItemCard ثم IconArea ثم UIAspectRatioConstraint عند تقييد IconArea. القيد مباشرة تحت ItemCard يتعلق بالبطاقة كاملة. يسهل الخلط مع عنصر مشابه الاسم في لوحة أخرى؛ لذلك افحص الأب وليس اسم الخاصية فقط.
افتح الصورة بالحجم الكامل ↗اضبط النسبة واقرأها بصورة صحيحة #
يمثل AspectRatio العرض مقسوماً على الارتفاع. استخدم 1 للمربع، و2 عندما يكون العرض ضعف الارتفاع، و0.5 عندما يكون العرض نصفه. تُدخل نسبة رقمية، لا النص «1:1» ولا عدد بكسلات.
ابدأ بنسبة واحدة ولا تغيّرها مع كل حجم شاشة إذا كان ينبغي ثبات الشكل. استخدم مورداً مربعاً خاصاً بك للصورة المربعة وراقب التمدد. يشرح رسمنا ذي المستطيلات الثلاثة النسب؛ ليس صورة لواجهة مقيسة.
افتح الصورة بالحجم الكامل ↗افصل الشكل عن الحجم المطلق #
المربعان 120×120 و180×180 مختلفان حجماً، لكن نسبة كليهما 1. المستطيل 240×120 نسبته 2، و120×240 نسبته 0.5. هذه أمثلة حسابية مختارة وليست قياسات المشروع. تفيد عندما تتوقع مربعاً لكن تقارن العرض وحده.
إذا صح الشكل وكانت البطاقة كبيرة، فلا تستخدم نسبة عشوائية لتصغيرها. افحص أولاً حجم الحاوي وأدوات حدود الحجم. يعالج UISizeConstraint وUIAspectRatioConstraint مسائل مرتبطة ومختلفة: حدود الحجم والنسب. افحص النتيجة المشتركة في تخطيطك.
| أبعاد التدريب | نسبة العرض إلى الارتفاع |
|---|---|
| 120 × 120 | 1 |
| 180 × 180 | 1 |
| 240 × 120 | 2 |
| 120 × 240 | 0.5 |
كرر مع حاوٍ ضيق وآخر عريض #
احتفظ بالعنصر والنص نفسيهما وقارن مساحتين متاحتين: ضيقة وعريضة. سجّل حجم الأب والعرض والارتفاع المشاهدين للهدف والنسبة المضبوطة. تفيد إرشادات Device Simulator المنفصلة في مقارنة شاشات الأجهزة. لا تغيّر ملف الجهاز ومحتوى البطاقة معاً.
افحص الموضع أيضاً: قد تبقى الأيقونة مربعة لكنها تغطي الخروج أو تتجاوز المساحة المتاحة. لا تناقض هذه الملاحظة الحساب، بل تكشف مشكلة تخطيط أخرى. بعد الإصلاح، كرر زوج الأحجام والعنصر نفسيهما.
راعِ التخطيط والقيود الأخرى #
إذا شارك العنصر في UIListLayout، فلا يفسر حجمه إعداد القائمة وحده. تحذر الوثائق من أن UIAspectRatioConstraint يتجاوز تحكم التخطيط بالحجم. سجّل التخطيط والقيود الأخرى قبل تغيير عدة خصائص في وقت واحد.
للبحث عن السبب، قارن عنصراً تدريبياً منفصلاً بالعنصر داخل قائمتك. استخدم نموذجاً آخر، واحفظ البنية الأصلية، وسجّل إعداداً واحداً تغير. لا تحذف تخطيط القائمة الفعلية لمجرد أن صورة منفردة تبدو صحيحة. الشكل خارج القائمة لا يختبر الموضع داخلها.
افحص الاسم الطويل والترجمة منفصلين #
جرّب عنواناً قصيراً ثم عبارة طويلة قد تظهر فعلاً في الواجهة. افحص العنوان والوصف وإتاحة الإجراء. النسبة لا تختار حجم الخط ولا تضمن ملاءمة كل ترجمة. تعالج Roblox قيود حجم النص والتحجيم التلقائي بصورة منفصلة عن النسب.
عند نقص المساحة، قرر ما يحتاجه اللاعب: الوصف الكامل، أو عدة أسطر، أو لوحة تفاصيل أخرى. لا تجعل النص غير مقروء لمجرد الحفاظ على مربع خارجي. في بنية التمرين، المربع يخص الأيقونة، فتُناقش هيئة الصورة ومساحة النص منفصلتين.
افحص الإجراء وليس الصورة فقط #
افتح البطاقة واختر عنصراً وأغلق اللوحة بطريقة التحكم المقصودة. كرر بعد تغيير الحجم. هندسة مرئية صحيحة لا تثبت معالج الزر أو حالة الاختيار أو مسار اللمس. هذه فحوص سلوك الواجهة.
حالة خيالية: صارت الأيقونة مربعة، لكن النص المجاور يغطي الخروج ويمنع تفعيله. سجّل النتيجتين: النسبة أُصلحت ومسار الخروج يحتاج فحصاً. لا تعلن جاهزية البطاقة كلها من صورة واحدة. لا ينشئ المثال منطق اختيار أو إغلاق فعلياً.
احتفظ بسجل نتائج واضح #
سجّل هدف القيد والأب وAspectRatio والمساحة المتاحة ومحتوى البطاقة والتخطيط الموجود. أضف التوقع والملاحظة لكل ترتيب. إذا كان الفحص مخططاً فقط، اذكر ذلك؛ الرسم والحساب ليسا تشغيل Studio.
جاهزية تمريننا تعني الشكل المقصود مع نص مقروء وإجراء متاح في الشروط المختارة. لا يضمن ذلك حجماً فعلياً متماثلاً أو كل الأجهزة والترجمات. تشرح الرسوم الأصلية النسبة والتسلسل، لا قياسات ألعاب حقيقية.
| الفحص | ما يُسجل |
|---|---|
| هدف القيد | العنصر الدقيق والأب |
| التخطيط | القائمة والقيود الأخرى |
| الترجمة الطويلة | النص نفسه في حجمين |
| الإجراء | مسار الاختيار والخروج |
المصادر الأصلية
Roblox Creator Hub — Size modifiers and constraintsRoblox Creator Hub — UIAspectRatioConstraint
