منطقة الأمان في واجهة اللعبة وضمان جودة الأجهزة: ترتيب التنقيح وإصلاحات الـ Prefab

أكثر تقارير شيوعًا: تبدو Game view سليمة، لكن على هاتف طويل يجلس الـ HUD تحت النوتش، أو تبدو الأزرار قابلة للنقر لكن الضغطات تخطئ. منطقة الأمان ليست «تحريك الـ Anchor»—بل هي سياسة Canvas الجذرية، وخلفية full-bleed مقابل محتوى مُزاح للداخل، وما إذا كان safeArea وقت التشغيل يطابق القناة.

تصنيفات الأعطال، ترتيب تنقيح Unity UGUI، قواعد إصلاح Prefab، وتحذيرات القنوات/الألعاب المصغّرة. علامات منطقة الأمان في بند تسليم التصميم 7 مُلخّصة تحت «ما يجب أن يوفره التصميم»؛ نطاق الأجهزة في بند ما قبل الإطلاق 1 مُوسّع هنا—وليس تكرارًا لـ قائمة المحرك + MCP Raycast / أول Play.

Godot / Cocos: اربطها بـ DisplayServer.get_display_safe_area() / عناصر SafeArea في المحرك؛ نفس ترتيب الخطوات في Unity أدناه.

معايير الفشل (أي واحد منها = لم يُجتَز): واجهة أساسية قابلة للقراءة أو أزرار مطلوبة تحت حجب النظام (النوتش، مؤشر الصفحة الرئيسية، الزوايا المستديرة)؛ إزاحة بصرية واضحة مقابل إزاحة النقر؛ Editor بنسبة 16:9 فقط دون نسبة الهدف على الجهاز؛ اختلاف سلوك منطقة الأمان بين Dev و Release دون مواصفة.

---

صنّف أولًا: قطع، أم إزاحة، أم خلفية فقط

العَرَض	المشتبه به أولًا	إجراء هندسي
قطع بصري (نص/أيقونات في النوتش)	المحتوى غير مُزاح للداخل؛ الجذر مُعامَل كشاشة كاملة	افحص safeArea مقابل مستطيلات المحتوى
إزاحة النقر (يبدو صحيحًا، لكن يخطئ)	وضع تحجيم Canvas، عدة Canvases، عدم تطابق الكاميرا	EventSystem raycast + Canvas renderMode
الخلفية مقطوعة، الأزرار سليمة	خلفية full-bleed بحكم التصميم، والمحتوى مُزاح للداخل	ليس فشلًا إذا سمحت المواصفة
خطأ بعد التدوير	لا مستمع لتغيّر الاتجاه / safeArea	أعد حساب الإزاحة عند التدوير
بناء قناة واحدة فقط	SDK يغيّر safeArea أو الدقة	اختبر ذلك البناء؛ لا تعتمد على Android العام فقط

---

Unity UGUI: ترتيب التنقيح الموصى به (6 خطوات)

1. ثبّت إعادة الإنتاج

سجّل الجهاز، نظام التشغيل، Dev/Release، الاتجاه، دقة Game view. بند ما قبل الإطلاق 5: شغّل الـ HUD الرئيسي على Dev و Release.

2. سجّل safeArea ودقة المرجع

بعد تحميل الواجهة الرئيسية، سجّل:

• Screen.width / Screen.height
• Screen.safeArea
• Display.cutouts (Android 11+ إن استُخدم)

اقرأ: safeArea أصغر من الشاشة → الإزاحة للداخل مطلوبة. في Editor غالبًا safeArea يساوي الشاشة الكاملة → ليس بديلًا عن الجهاز.

3. جذر Canvas و Canvas Scaler

فحص	خطأ شائع	اتجاه الإصلاح
Render Mode الجذري	خلط Screen Space / Camera UI → إزاحة ray	وضع واحد للواجهة
Canvas Scaler	دقة المرجع ≠ خط الأساس الطولي للمشروع	طابق قائمة المحرك بند 1
Match width/height	النسب الطويلة تُحجَّم خطأً؛ عناصر الحافة تنزلق	اتفق على Match مع التصميم/الإنتاج؛ أصلح Prefab لا Scene فقط
ترتيب Canvases المتعددة	الضغطات تذهب لطبقة خاطئة	وحّد sortingOrder وأهداف raycast

4. الطبقات: خلفية full-bleed مقابل محتوى آمن

تسلسل Prefab المقترح:

Canvas
├── Background_FullBleed   (anchor كامل، قد يدخل النوتش، بلا إدخال)
└── SafeRoot               (مكوّن Safe Area أو حشو مدفوع بـ safeArea)
    ├── HUD_Content
    └── Popups

استخدم Safe Area في Unity (أو كود المشروع الذي يضبط offsetMin/Max من Screen.safeArea). لا تمدّد الأزرار التفاعلية على الشاشة كاملة دون إزاحة للداخل.

تصديرات AI Studio بطبقة مسطحة واحدة: راجع nine-slice / إعادة تصدير مُهيكلة و canvas → Prefab.

5. فحص النقر على الجهاز

3–5 أزرار حرجة في المسار الرئيسي؛ قارن المركز البصري بالإصبع. الإزاحة في نافذة منبثقة واحدة فقط → افحص Canvas متداخلًا أو Scaler مزدوجًا.

6. ثبّت Prefab في المستودع

معايير الاجتياز تعيش في Prefab مُصدَّر بإصدار، لا في تجاوزات Scene اختبارية (بند ما قبل الإطلاق 6). بعد تغييرات Anchor، شغّل فحص فيض اللغات على لغات الضغط.

---

القناة / اللعبة المصغّرة (هندسيًا)

السيناريو	ملاحظة
تطبيق أصلي	Screen.safeArea + أجهزة حقيقية
بعض الألعاب المصغّرة / التطبيقات السريعة	safeArea / systemInfo للحاوية ≠ محاكاة Editor
Android cutouts	cutout مقابل safeArea قد يختلفان
PC / deck	safeArea غالبًا شاشة كاملة

النمط: ISafeAreaProvider (أو ما يعادله)؛ حقن لكل منصة—تجنّب #if في Prefabs الـ HUD.

---

توجيه الإصلاح

العَرَض	السبب المحتمل	الإجراء	المالك
قطع على الجهاز، Editor سليم	لا SafeRoot / لا مشغّل safeArea	طبّق Prefab + Safe Area؛ أعد الاختبار على الجهاز	الهندسة
الخلفية سليمة، الأزرار مقطوعة	الأزرار تحت طبقة الفيض	انقلها إلى SafeRoot؛ أعد تصدير الطبقات من AI Studio	الهندسة + التصميم
إزاحة النقر	Canvases متعددة / كاميرا UI / Scaler متداخل	ادمج Canvas أو وحّد كاميرا raycast	الهندسة
انزلاق عند تغيّر الدقة	Anchors ثابتة فقط	أصلح Anchors؛ بند المحرك 6	الهندسة
التصميم بلا إطار آمن	بند التسليم 7 مفقود	يضيف التصميم مراجع النوتش/الصفحة الرئيسية؛ أعد التصدير	التصميم
تصدير AI Studio مسطح	BG + HUD غير مفصولين	فصل في المكان ثم أعد التصدير	الهندسة + التصميم

---

ما يوفره التصميم (ثانويًا)

التسليم	الاستخدام الهندسي
الدقة المستهدفة + المرجع الآمن (نوتش / شريط الصفحة الرئيسية)	Reference Resolution وتوقعات الإزاحة
طبقات full-bleed و HUD مُسمّاة	Prefab Background_* / SafeRoot
تبويبات الحافة داخل الآمن أو فيض مقصود	استراتيجية Anchor

لا يحتاج المصممون لكتابة سكربتات—العلامات الواضحة تقلل تخمين بكسلات الإزاحة.

---

الأسئلة الشائعة

هل تكفي دقة iPhone في Game view؟
فحص Dev فقط؛ الإطلاق يتطلب الأجهزة المستهدفة (بند ما قبل الإطلاق 1). غالبًا safeArea في Editor يختلف.

مكوّن Safe Area أم إزاحة يدوية؟
خيار الفريق؛ اليدوي يجب أن يُحدَّث عند تغيّر safeArea/الاتجاه—تجنّب منطق مكرر.

إصلاح القطع بـ Canvas Scaler وحده؟
Scaler يحجّم؛ الإزاحة منفصلة. القطع هو مستطيل المحتوى؛ Scaler هو تحجيم عام.

هل يمكن لـ MCP/Cursor المساعدة؟
جيد لإعادة تسمية Prefab، وإرفاق Safe Area، وفحص Play—الأرقام ما زالت من سجلات الجهاز. قائمة المحرك + MCP.

منطقة الأمان مع فيض اللغات؟
أصلح تخطيط SafeRoot أولًا، ثم لغات الضغط—الإزاحة تقلّص العرض.

VberAI Studio مقابل Google AI Studio؟
لا. راجع المقارنة.