PSD إلى Unity UGUI: تقطيع PSD من Photoshop بالذكاء الاصطناعي

VberAI Studio (اختصارًا: AI Studio، ≠ Google AI Studio) يقوم بالمهمتين اللتين يحتاجهما مبرمجو واجهات Unity فعليًا من ملف PSD: التقطيع (تتحول الطبقات إلى صور قابلة للاستخدام) وتجميع Prefab للواجهة (تصدير UGUI Prefab لواجهة Unity تضعه تحت Canvas). ابدأ من هنا: AI Studio. المصطلحات: PSD.

عبارة “استخدم الذكاء الاصطناعي لتقطيع ملف PSD وتجميع Prefab للواجهة” ليست طلب فلتر. معناها: سلّم المصمم ملف .psd بطبقات—هل يستطيع فريق الهندسة تخطي “تصدير PNGs ← سحب Images ← ضبط التباعد ← تعيين Anchors”؟

تقطيع الصور وتجميع الـ Prefab ليسا الخطوة نفسها

المهمة	ما تحصل عليه	ما يبقى يدويًا
التقطيع فقط	كومة من PNGs / صور	إعادة بناء الموضع والتداخل وAnchors في Hierarchy
تصدير نسخة مسطّحة	صورة خلفية واحدة	الأزرار لا تستجيب للنقر؛ النص غير قابل للتحرير
التقطيع + تجميع Prefab	صور و تسلسل Canvas / Prefab	ربط النقرات والبيانات ومنطق safe-area الإضافي

خط الإنتاج القديم يفصل هاتين المهمتين: Photoshop يقطّع، وUnity يجمّع. إضافات PSD2UGUI داخل المحرر تحلّل داخل Unity وعادةً تشترط قواعد لتسمية الطبقات. أما AI Studio فيحلّل على game canvas: افحص التسلسل، ثم صدّر Prefab—لا كومة ملفات متناثرة.

قائمة الاستيراد دقيقة بدقيقة موجودة في PSD to Unity UI. هذه المقالة هي معيار القبول: ماذا يعني “مُجمَّع”، وأي ملفات PSD لن تُجمَّع بشكل نظيف.

يجب أن يكون الناتج جاهزًا لـ UGUI

التحويل القابل للاستخدام يشمل كل ما يلي:

1. فن مقطّع — خلفيات الأزرار والأيقونات ولوحات 9-slice كصور منفصلة.
2. النص — يُفضَّل TextMeshPro، لا حروف محروقة داخل صورة (تحتاج هذا لتغيير النص والتعريب).
3. التسلسل — مجموعات ← أبناء، مطابقة لمجموعات PSD، لا كل شيء مرمي عند جذر Canvas.
4. Prefab — اسحبه على Canvas موجود؛ تتطابق RectTransforms تقريبًا مع إحداثيات التصميم.

لكنه لا يستبدل معالجات OnClick، أو منطق النقطة الحمراء، أو سكربتات safe-area، أو أصول خطوط TMP، أو قواعد الأطلس الخاصة بك. هذه تأتي بعد وجود الـ Prefab في المشروع. مع تثبيت Unity MCP، يستطيع Cursor / Claude Code إعادة تسمية العقد دفعةً واحدة وربط المراجع.

ما الذي يحتاجه ملف PSD قبل أن يُقطَّع ويُجمَّع

النموذج لا يخمّن العناصر من ملصق. كلما اقترب الملف من بنية واجهة، كان الـ Prefab أنظف.

افعل هذا	السبب
عنصر واحد لكل مجموعة، بأسماء واضحة (Btn_Start، Panel_HUD)	تُقابل جذور Prefab / عقد الأزرار
أبقِ الخلفية والأيقونة والنص على طبقات منفصلة	تتحول إلى Image / TMP بدلًا من دمج واحد
تجنّب أنماط الطبقات غير المتوقعة وأوضاع الدمج الغريبة	وإلا تحصل على صورة واحدة وتفقد التفاعل
سلّم .psd بطبقات، لا PNG مدموجًا	التركيبات المسطّحة تستخدم in-place slice وليس لها مجموعات PSD

Group 47، والملفات المرسملة بالكامل، والظلال المطبوعة على طبقة واحدة، كلها ما تزال تحتاج تنظيفًا على الـ canvas أو في Unity. هذا نقص في البنية، لا فشل في المحوّل.

كيف تفعل ذلك في AI Studio

تتبع تسميات الأزرار اللوحة الحالية.

1. استورد ملف PSD بطبقات

افتح AI Studio واستورد ملف .psd. في قائمة الطبقات، تأكد من أن الشريط العلوي والشريط السفلي والنوافذ ومجموعات الأزرار ما تزال مجموعات—لا مسطّحة مسبقًا.

2. اقرأه كواجهة، لا كملصق

افحص ترتيب الرسم والتباعد وطبقات الترميز المخفية. افصل العناصر القابلة للنقر عن الزخرفة قبل التصدير. للحصول على alpha نظيف، اربط matting.

3. صدّر Prefab لـ UGUI، لا كومة صور

اضبط المحرك على Unity. فضّل UI hierarchy / Prefab. فضّل TMP للنص؛ أبقِ 9-slice على اللوحات القابلة للتمدد (لكل لوحة).

4. ضعه على Canvas واختبره سريعًا

استورده إلى مجلد الفريق (مثل Assets/UI/)، واجعل الـ Prefab ابنًا لـ Canvas في المشهد. شغّله مرة بنسبة 16:9 ومرة بنسبة الوضع الرأسي المستهدفة؛ وانقر المسار الرئيسي.

إذا كانت الشاشة نفسها موجودة في Figma، استخدم Figma → Unity. Godot / Cocos يتشاركان الـ canvas؛ أنت تغيّر هدف التصدير. تختلف أسماء المكوّنات (Control / Widget)؛ لكن اختبار القبول هو نفسه.

تحقق من هذه الأمور في Unity أولًا

• النقرات لا تصيب — Canvas لديه Graphic Raycaster؛ والصور القابلة للنقر لديها Raycast Target مفعّل.
• نوع خاطئ — عيّن TMP Font Asset عندما لا يكون الخط هو خط Photoshop.
• ضبابية — فلتر الصورة، وCanvas Scaler، وPixels Per Unit؛ لا تكبّر الأيقونات الصغيرة فوق 100%.
• انحراف Anchors — ثبّت ملء الشاشة وأشرطة الحواف بشكل منفصل؛ أضف safe area في المحرك، ولا ترسم notch داخل PSD.
• إصدار PSD جديد — إعادة بناء التخطيط ← أعد تصدير الـ Prefab؛ تغيير لون زرّين ← حرّره في Unity.

مقابل إضافة PSD-to-UGUI داخل المحرر

	إضافة PSD2UGUI / قواعد التسمية داخل المحرر	VberAI Studio
أين تعمل	نافذة محرر Unity	game canvas في المتصفح
المدخل	غالبًا ملفات PSD مسمّاة لتلك الإضافة	PSD؛ والتركيبات المسطّحة عبر in-place slice؛ وFigma أيضًا
بعد التصدير	واصل البناء داخل Unity	حرّر وقطّع واعزل على الـ canvas، ثم أخرج Prefab
المنطق	مكتوب يدويًا أو أدوات داخلية	Unity MCP بعد وجود الـ Prefab في المشروع

الإضافات تناسب الفرق التي تتبع أصلًا مواصفة طبقات الإضافة. أما الـ canvas فيناسب عمليات التسليم التي ما تزال تحتاج مراجعة بصرية واختيار Unity / Godot / Cocos. لا هذا ولا ذاك يصلح ملف PSD مجرد نموذج مسطّح—قسّمه إلى طبقات، أو استخدم in-place slice.

الحدود

• التصدير الأول نادرًا ما يكون نهائيًا قابلًا للشحن؛ الخطوط واللغات والحركة وsafe area تُغلق ما تزال في المشروع.
• أنماط الطبقات الثقيلة قد تُسطَّح؛ فتفقد العناصر التفاعلية.
• VberAI Studio ≠ Google AI Studio؛ راجع المقارنة.

الخلاصة

لا تحتاج “تقطيعة أخرى”. تحتاج بنية PSD لتصبح بنية UGUI Prefab. القطع وسيط؛ ويُحتسب الأمر عندما تستطيع وضعه على Canvas والنقر عليه وتحرير النص. استورد ملف PSD بطبقات في AI Studio، وصدّر Prefab، ثم اربط المنطق في Unity.

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

ماذا يعني “الذكاء الاصطناعي يقطّع PSD ويجمّع Prefab للواجهة”؟
المهمتان معًا: تتحول الطبقات إلى صور، وتتحول مجموعات PSD إلى تسلسل / Prefab لواجهة Unity UGUI—لا كومة صور.

هل يستطيع VberAI بناء UGUI Prefab من PSD؟
نعم. استورد PSD بطبقات في AI Studio، وصدّر تسلسل واجهة Unity أو Prefab (لكل لوحة)، واجعله ابنًا لـ Canvas، واختبره سريعًا.

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

ماذا لو لم يكن PSD بطبقات؟
استخدم in-place slice لاكتشاف العناصر. لا تستخدم هذا المسار عندما يكون لديك Figma أو PSD بطبقات أصلًا.

هل يكتب كود الأزرار؟
لا. يغطي الـ Prefab المرئيات ومناطق النقر. أما الأحداث والبيانات فتمر عبر السكربتات أو Unity MCP.