تسلسل هرمي لمعلومات شاشة العرض (HUD) على الجوال: ماذا نعرض في القتال والردهة والنوافذ المنبثقة

إخفاقات شاشة العرض (HUD) نادرًا ما تكون «نسينا شريط الصحة»—بل هي عناصر كثيرة بنفس الأولوية على شاشة واحدة: تبويبات الردهة أثناء القتال، أو متجر قابل للنقر فوق مشهد سينمائي، أو شاشة عرض سفلية لا تزال تلتقط اللمسات عندما تكون نافذة منبثقة مفتوحة. غالبًا ما تكون نماذج التصميم إطارًا واحدًا ولا تشير أبدًا إلى «إخفاء العملة في القتال»—تحتاج إلى مواصفة حالة × طبقة ليتمكن فريق الهندسة من ضبط الرؤية وحجب الإدخال وترتيب الرسم.

يستخدم ما يلي Unity UGUI (Prefab، Canvas.sortingOrder، raycasts للرسوميات) كمصطلحات أساسية. في Godot: CanvasLayer layer + Control mouse_filter؛ في Cocos: ترتيب رسم العُقد + BlockInputEvents / حاجبات ملء الشاشة—نفس المعايير والجداول. تفاصيل المنطقة الآمنة والنص العائم وترتيب Canvas: المنطقة الآمنة، أرقام الضرر العائمة. الأجهزة، جميع اللغات، وبنيات Release: قائمة التحقق قبل الإطلاق العناصر 1 و2 و5.

معايير الفشل (أي واحد = لم يجتز): أثناء النوافذ المنبثقة / المشاهد السينمائية / تدفقات الدفع، شاشة العرض السفلية لا تزال تفاعلية (إلا إذا نصّت المواصفة على «نصف الشاشة لا يزال قابلًا للتشغيل»)؛ في القتال، عرض ترويجي غير قتالي لا يمكن إغلاقه يحجب منطقة اللعب؛ المعلومة نفسها معروضة مرتين (مثل عملات الشريط العلوي بالإضافة إلى واجهة عملات كبيرة في القتال) دون ملاحظة من المنتج؛ عناصر التحكم من الحالة السابقة لا تزال موجودة (مرئية أو لا تزال تحجب الـ raycast)؛ مع لغات متعددة في لغات الاختبار، تخطيط القتال المصغّر لا يزال يقتطع النصوص الطويلة (DE/ES، إلخ).

---

عرّف الحالات أولًا، ثم عناصر التحكم

حالة اللعبة (أمثلة)	هدف شاشة العرض	عادةً يُعرض	عادةً يُخفى / يُخفَّض
الردهة / الرئيسية	التنقل + الموارد + الأحداث	العملة العلوية، التبويبات السفلية، مدخل الأحداث	مهارات القتال، مؤشر التصويب
القتال / داخل المستوى	الإجراءات + معلومات البقاء	الصحة، المهارات، الإيقاف المؤقت	تبويبات الردهة، لافتات الأحداث ملء الشاشة
سينمائي / CG	لا إدخال أو تخطٍّ فقط	زر التخطي	جميع شاشة العرض تقريبًا (أو التخطي فقط)
نافذة منبثقة (متجر، إعدادات)	التركيز على الحوار	عناصر التحكم داخل النافذة	شاشة العرض السفلية raycasts معطّلة أو الطبقة كاملة مخفية
الدفع / الامتثال	إتمام التدفق	الشروط، التأكيد	طبقات العرض الترويجي داخل اللعبة

اتفق على تعداد الحالات مع التصميم + الهندسة (مثل GameUIState.Lobby | Combat | Cinematic | Modal). جذور واجهة المستخدم تشترك في آلة الحالة (مجموعات Prefab في Unity / فروع المشهد في Godot / Prefabs في Cocos)—تجنّب SetActive / visible المتناثرة في كل سكربت زر.

---

الطبقات وترتيب الفرز (مواصفة محايدة تجاه المحرك)

وثّق من الأسفل إلى الأعلى (رقم أعلى = في المقدمة):

الطبقة	المحتوى	الإدخال
L0	خلفية ملء الشاشة / تسرب واجهة المشهد	لا شيء
L1	شاشة عرض القتال (الصحة، عنصر نائب لعصا التحكم)	نعم
L2	النص العائم / التلميحات في القتال	بدون raycasts (أرقام الضرر العائمة)
L3	إشعار النظام / الشريط المتحرك	عادةً لا شيء
L4	نافذة منبثقة / حوار ملء الشاشة	نعم؛ يحجب لمسات L1–L3
L5	انقطاع الشبكة، تحديث إجباري	نعم؛ يحجب الكل

في Unity: sortingOrder / عدة Canvases؛ في Godot: CanvasLayer layer؛ في Cocos: ترتيب الأشقاء تحت Canvas واحد أو Canvas متعدد الطبقات + قناع. عند فتح نافذة منبثقة، ارفع L4 وعطّل raycasts الخاصة بـ L1 / mouse_filter / BlockInput—وليس فقط «مرسومة في الأعلى لكن اللمسات تمر عبرها».

---

أولوية المعلومات (مثال القتال)

إذا كان القتال يستطيع الاحتفاظ فقط بـ N كتل مقروءة على الشاشات الصغيرة، فالحدود الافتراضية:

الأولوية	الكتلة	استراتيجية التخفيض
P0	الصحة / المتعلقة بشرط الفشل	لا تُخفَ
P0	الإيقاف المؤقت / الخروج من القتال	لا تُخفَ
P1	المهارات / الإجراءات الأساسية	الدمج إلى أزرار أقل
P2	نص هدف قصير	أيقونة + تفاصيل بالضغط المطوّل
P3	العملة، مدخل الأحداث	مخفية في القتال افتراضيًا أو في قائمة الإيقاف المؤقت
P3	مدخل الدردشة	الطي إلى أيقونة

يجب أن تبقى التخفيضات مقروءة في لغات الاختبار متعددة اللغات (DE/ES، إلخ)—وليس اختبارات تصغير بالإنجليزية فقط.

---

القبول (5 خطوات)

1. اسرد الحالات — من التدفق الرئيسي، عدّد الانتقالات (دخول المستوى، فتح المتجر، CG، إعادة الاتصال).
2. لقطة شاشة لكل حالة — Play في المحرر وRelease على الجهاز لكل منهما (عناصر ما قبل الإطلاق 1 و5)؛ تحقق من أن العُقد بـ SetActive(false) / visible=false لا تزال تحجب الإدخال.
3. فحص سريع للنافذة المنبثقة — مع فتح المتجر / الإعدادات / الدفع، اللمسات على أزرار شاشة العرض السابقة يجب ألا تفعل شيئًا (raycast شفاف ملء الشاشة أو قناع BlockInput).

4. تقاطع مع المنطقة الآمنة — عناصر تحكم P0 في القتال داخل الحافة الآمنة (المنطقة الآمنة).
5. أودع الأصول بنسخ مُصدَّرة — جدول الحالات يقود الرؤية (Unity ScriptableObject / Godot Resource / إعدادات Cocos)—وليس إخفاءات مؤقتة في المشهد فقط.

---

ما الذي يجب أن يضيفه التصميم

المُخرَج	الغرض
إطارات سلكية لكل حالة (على الأقل الردهة / القتال / النافذة المنبثقة)	تضبط الهندسة الرؤية
قائمة «قد يُخفى» في القتال على النموذج	تجنّب رسم كل عنصر في إطار واحد
مواصفة النافذة المنبثقة: خلفية معتمة، هل يُسمح باللمس العابر؟	تحدد سياسة raycast
ترتيب z لطبقة العرض الترويجي / الأحداث	التوافق مع L4/L5

لا يحتاج المصممون إلى كتابة آلة الحالة—الجداول + التعليقات تقلل التخمين.

---

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

العَرَض	السبب المحتمل	الإجراء	المسؤول
لا يزال يمكن النقر على القتال بعد الحوار	raycasts السفلية مفعّلة	عطّل raycast الرسوميات على طبقة النافذة / قناع ملء الشاشة	الهندسة
حدث ملء الشاشة في القتال	لا يوجد جدول حالات	أخفِ P3 في القتال؛ موافقة التصميم	الهندسة + التصميم
بقاء شاشة العرض بعد المشهد السينمائي	لا يوجد خطاف لحالة Cinematic	آلة الحالة تخفي شاشة العرض بشكل موحد	الهندسة
عرضان للعملة	شريط الردهة غير مُطفأ في القتال	أخفِ الشريط العلوي في القتال أو ادمج مصدر البيانات	الهندسة + التصميم
لغة طويلة تُقتطع في تخطيط القتال المصغّر	DE/ES لم تُختبر	مسار تجاوز اللغة	التصميم + الهندسة

---

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

هل نستخدم Canvas اثنين للردهة والقتال؟
لا بأس—أو Canvas واحد مع مجموعات. المهم هو رؤية الحالة + raycasts، وليس عدد الـ Canvas.

متجر بنصف الشاشة—هل هذا نافذة منبثقة؟
نعم. حدّد في المواصفة ما إذا كان السفلي قابلًا للنقر وما إذا كان منطق القتال يتوقف مؤقتًا.

هل يتعارض ذلك مع مبدأ «الأقل أكثر» في تجربة المستخدم؟
جدول التسلسل الهرمي هو قاعدة منتج، وليس جماليات؛ يمكن إعادة فتح P3 للأحداث عبر أعلام آلة الحالة.

أشرطة فوق الرؤوس في الفضاء العالمي في 3D؟
إنها معلومات قتال، تُدار مع L1؛ قواعد فرز الفضاء العالمي تتوافق مع أرقام الضرر العائمة والمنطقة الآمنة.