واجهة اللعبة Nine-Slice والألواح القابلة للتمدد: علامات Figma / PSD وضمان الجودة للقص في المحرك

عندما يتم تمديد لوح ليصبح أوسع، عادةً ما تعني زوايا ضبابية، أو تكرار نسيج المنتصف، أو زوايا بيضاوية أن nine-slice (9-slice / cap insets) لم يُحدَّد عند التسليم، أو أن المحرك يستخدم مقياس Simple على الصورة بأكملها. ضبط Image Type والحدود في Unity Editor قد ينقذ شاشة واحدة، لكن دفعة التصميم التالية تستبدلها—إذا لم تتطابق الحدود مع مقياس التصدير، تبدأ حلقات إعادة العمل.

تركز الأمثلة أدناه على Unity UGUI Image (Sliced / Tiled). Godot StyleBoxTexture وCocos sprite nine-slice يتبعان نفس الأفكار، بما في ذلك content padding. المراسي وSafe Area: قائمة تحقق المحرك + MCP البند 6. حشوة منطقة التمدد مع اللغات: تجاوز النص متعدد اللغات فحص التصميم 7.

قائمة تحقق تسليم التصميم البند 6 يتطلب مناطق nine-slice / تمدد واضحة. يغطي هذا المقال متى تقصّ، وعلامات Figma/PSD، وقبول ثلاثة محركات، ومسار لوحة الشاشة الكاملة، بالإضافة إلى جدول الإصلاح.

معايير الفشل (أي واحد = لم يُجتَز): فن الزاوية يتشوه عند التمدد؛ تكرار غير مقصود أو خطوط فاصلة في منطقة التمدد؛ نصف قطر الزاوية يتغير مع حجم اللوح؛ خلفية قابلة للتمدد تُمدَّد مع أيقونات/صور رمزية ثابتة؛ مقياس التصدير لا يتطابق مع بكسل حدود المحرك (فجوات 1px أو حواف ناعمة).

---

متى يكون nine-slice مطلوبًا مقابل التمدد الصلب المحظور

نوع الأصل	افعل	لا تفعل
خلفية حوار / لوح إعدادات	Nine-slice + content padding	صورة Simple واحدة بملء كامل
حاويات إدخال / أشرطة	Nine-slice أو غطاء يسار/يمين + تكرار المنتصف	ضغط الارتفاع بدون قواعد فنية
أزرار رئيسية (حجم ثابت)	صورة ثابتة أو nine-slice + حد أدنى للعرض	زر مستدير عريض لا نهائي كتمدد واحد
أيقونات، صور رمزية، إطارات مهارات	حجم ثابت، بدون nine-slice	دمجها مع خلفية اللوح في صورة تمدد واحدة
خلفية شاشة كاملة (بدون إطار صندوقي)	صورة كاملة أو استراتيجية تبليط في المواصفات	إعادة استخدام حدود اللوح على ملء كامل

القاعدة: إذا تغيّر العرض أو الارتفاع مع الدقة أو النص أو محتوى القائمة ويجب أن تحافظ الزوايا على شكلها → nine-slice أو ما يعادله في المحرك. عناصر التحكم ذات الحجم الثابت → صورة ثابتة + قيود التخطيط.

---

علامات تسليم Figma / PSD (قائمة تحقق)

#	فحص	معيار الاجتياز
1	طبقة التمدد منفصلة عن الديكور / الأيقونات / النص	خلفية اللوح تُعاد تصميمها + تُقص؛ الأيقونات لا تُقاس مع الخلفية
2	حد / cap inset بالبكسل (الأضلاع الأربعة)	يطابق @1x أو مقياس تصدير الفريق في ملاحظات التسليم
3	مقياس تصدير ثابت (@1x/@2x أو أساس 1080)	الهندسة لا تخمّن حساب الحدود
4	نصف قطر الزاوية خارج منطقة التمدد أو المواصفات تسمح بزوايا غير ممددة	لا اجتياز بـ “الزوايا تتحول إلى كبسولات”
5	منطقة التمدد صديقة للتبليط أو صلبة	تكرار المنتصف بدون انحراف واضح
6	أسماء دلالية	مثل Panel_Shop_9s، Input_Field_9s
7	متعدد الحالات (عادي / معطّل) نفس الحدود	الحشوات متطابقة؛ يتغير اللون/الجلد فقط
8	قص PSD أو ملاحظات تصدير Figma حشوة شفافة	لا تحسب الظل في الحدود إلا إذا نصّت المواصفات
9	التسليم مع البند 5 من التسليم حالات الأزرار	لا ترقع الحالات المفقودة بفن 9s خاطئ
10	إعادة تصميم الحدث تغيّر الفن فقط، الحدود دون تغيير	انظر مواصفات إعادة التصميم

Figma: ضع cap inset في وثائق المكوّن عند استخدام إطارات قابلة لتغيير الحجم أو إضافات القص. PSD: حاذِ القصاصات مع PSD إلى Unity في 5 دقائق.

---

ثلاثة محركات: المكوّنات والقبول

العنصر	Unity UGUI	Godot 4 Control	Cocos UI
المكوّن	Image → Sliced / Tiled	StyleBoxTexture (patch margin)	Sprite nine-slice / Sliced
مصدر الحدود	Sprite Editor Border (L/T/R/B px)	content_margin / patch	Cap insets (LTRB)
منطقة المحتوى	RectTransform + حشوة الأبناء	MarginContainer + Theme	Widget / حشوة التخطيط
فشل نموذجي	سوء استخدام Simple؛ حدود بمقياس خاطئ	عدم تطابق patch مع حجم النسيج	دوران الأطلس يكسر الحشوة
اجتياز	عند عرض 150% / 200%: زوايا حادة، منتصف نظيف	نفسه؛ معاينة Theme تطابق Play	نفسه؛ فحص الجهاز لقائمة طويلة

قبول Unity Editor (يُقابل في المحركات الأخرى):

1. اضبط Image في Prefab على Sliced بحدود تطابق التصميم.
2. اسحب RectTransform للوح إلى الحد الأدنى والأقصى لعرض التصميم.
3. قارن الزوايا والحواف والمنتصف مع لقطة Figma/PSD.
4. إذا كان وضع Play جيدًا → مرور واحد على الجهاز وفق قائمة تحقق ما قبل الإطلاق.

---

مفهوم الشاشة الكاملة: تقسيم اللوحة وإعادة التصدير

مع فن شاشة كاملة بصيغة PNG أو AI فقط، لا يمكن استنتاج الحدود. المسار: VberAI Studio (AI Studio، ≠ Google AI Studio) تقسيم في المكان → علّم الألواح القابلة للتمدد → تصدير Prefab (حتمي، ليس LLM YAML).

الخطوة	الإجراء	القبول
1	شاشة كاملة على اللوحة؛ افصل Panel_* والأيقونات الثابتة	تسلسل هرمي مسمّى
2	أكّد نية 9-slice للوح على اللوحة أو قبل التصدير	مالك الحشوة موثّق
3	صدّر Unity / Godot / Cocos Prefab	ضمان جودة Sliced وفق الجدول أعلاه
4	بعد إعادة التصميم / اللغات، إعادة تصدير الشجرة الكاملة	إذا لم تتغير مواصفات الحدود، الحشوات دون تغيير

Figma/PSD الطبقية: فضّل Figma → Unity أو PSD إلى UGUI، ثم تعديلات حدودية طفيفة في المحرك—تجنّب إعادة تصدير 20 PNG منفصلًا في كل حدث.

---

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

العَرَض	السبب المحتمل	الإجراء	المسؤول
زوايا ضبابية	مقياس Simple على الصورة كاملة	Sliced + حدود صحيحة؛ التصميم يضيف علامة الحشوة	الهندسة + التصميم
خط فاصل / كتل تكرار في المنتصف	الحشوة منحرفة 1–2px؛ عدم تطابق المقياس	طابق بكسل التصميم؛ أعد استيراد الصورة	الهندسة
الزوايا تتمدد بيضاوية	الفن لا يجب أن يُقصّ nine-slice	حجم ثابت أو فن زاوية جديد	التصميم
الحدود تتغير بعد إعادة التصميم	حجم فن جديد أو حشوة	اقفل حجم اللوحة في مواصفات إعادة التصميم؛ أعد ضمان الجودة بعد إعادة التصميم	التصميم
خلفية صف القائمة تتشوه	خلفية الصف ممددة كلوح كامل	9s خاص بالصف أو ارتفاع ثابت	التصميم
فشل عند دقة معينة فقط	Canvas Scaler بمقياس غير صحيح	قائمة تحقق المحرك Anchor/Scaler	الهندسة

القاعدة: إذا كانت الحدود ≠ التصميم → أصلح العلامات أو مصدر الصورة أولًا، ثم Prefab. الإصلاحات في Inspector فقط دون تحديث التسليم → تُفقد عند التصدير التالي.

---

مقابل تسليم “حزمة PNG فقط”

النهج	يناسب	لا يناسب
تصدير يدوي + الهندسة تملأ الحدود	ألواح قليلة، عرض توضيحي	إعادة تصميم متكررة، شاشات كثيرة
Figma/PSD + تصدير منظم عبر VberAI Studio	متعدد الشاشات، متعدد المحركات، أحداث	استبدال علامات الحشوة وضمان الجودة
Sliced مؤقت في المحرك	إصلاح عاجل لشاشة واحدة	طويل الأمد بدون مصدر تصميم

الموصى به: علامات حشوة التصميم → تصدير Prefab منظم → Unity Editor Sliced عند عرضين → MCP للمنطق. Raycast والربط: قائمة تحقق المحرك + MCP.

---

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

هل يمكن للألواح المستديرة استخدام nine-slice؟
نعم، لكن يجب أن تقع الحشوات على حواف تمدد مستقيمة؛ تبقى الزوايا في مربعات زاوية غير ممددة. إذا كبر نصف قطر الزاوية مع حجم اللوح → فشل؛ أصلح الفن أو حدّد حجمًا أقصى.

هل تُحسب الظلال في الحدود؟
مواصفات المنتج تقرر. إذا لم يمتد الظل، افصل الطبقات أو علّم الحشوة على المستطيل الصلب بدون التوهج الخارجي.

Tiled مقابل Sliced؟
Sliced للألواح المؤطرة؛ Tiled (أو فن منتصف صديق للتبليط) لنسيج المنتصف المتكرر. اكتب في المواصفات—لا تترك الهندسة تخمّن.

قصاصات منفصلة لـ Godot / Cocos؟
دلالات حشوة واحدة؛ بدّل هدف التصدير عبر تصدير اللوحة متعدد المحركات وتحقق من patch/cap وفق الجدول.

هل يملأ VberAI Studio الحدود تلقائيًا؟
يعتمد على التصدير والأصول؛ القبول دائمًا Sliced/StyleBox في المحرك. لا حشوة في التصميم → الهندسة تضبط الحدود في Editor وتسجّلها في المواصفات.

هل VberAI Studio هو نفسه Google AI Studio؟
لا. انظر المقارنة.