كيفية استيراد PSD إلى Unity UI في 5 دقائق باستخدام AI Studio

لماذا لا يزال تحويل PSD إلى Unity UI يبطئ الفرق

معظم واجهات الألعاب لا تزال تبدأ في Photoshop. يصمم المصممون ملف PSD بطبقات تحتوي على أزرار ولوحات وأيقونات وأنماط نصية - ثم يقضي المهندسون ساعات في إعادة بناء نفس التسلسل الهرمي داخل Unity: Canvas، RectTransform، Image، TextMeshPro، و prefabs متداخلة.

الهدف ليس فقط “نقل البكسلات إلى المحرك”. تحتاج إلى:

• تسلسل هرمي صحيح للطبقات وتسمية صحيحة
• نقاط ارتكاز (Anchors) ومناطق آمنة تعمل مع دقات شاشة مختلفة
• prefabs قابلة لإعادة الاستخدام بدلاً من كائنات مشهد لمرة واحدة
• مسار للتكرار عندما يتغير PSD

يشرح هذا الدليل سير عمل استيراد مدته 5 دقائق باستخدام VberAI Studio - AI Studio من VberAI لخطوط أنابيب التصميم إلى المحرك (PSD / Figma على اليسار، مخرجات جاهزة للمحرك على اليمين). نغطي أيضًا ما يجب تجهيزه في PSD الخاص بك للحفاظ على نظافة الاستيراد.

ما تحتاجه قبل البدء

اجمع هذه الأشياء قبل فتح Unity:

• Unity 2022.3 LTS أو Unity 6 (UI Toolkit اختياري؛ يركز هذا الدليل على uGUI)
• ملف PSD بطبقات (وليس تصدير PNG مسطحًا)
• VberAI Studio على VberAI (AI Studio)
• مشروع Unity فارغ أو موجود يحتوي على Canvas في المشهد (يُوصى باستخدام Scale With Screen Size)

قائمة التحقق لنظافة PSD (توفر معظم الوقت):

الممارسة	لماذا تهم
عنصر واجهة منطقي واحد لكل مجموعة طبقات	يُرسم خرائط نظيفة إلى جذور prefab
أسماء متسقة (Btn_Start, Panel_HUD)	أسهل في العثور عليها في Unity Hierarchy
تجنب التأثيرات التي يدمجها Photoshop بشكل غير متوقع	عدد أقل من الإصلاحات اليدوية على مكونات Image
تصدير @1x أو توثيق المقياس	يمنع RectTransforms كبيرة الحجم

سير العمل في 5 دقائق مع AI Studio

الدقيقة 1 — الرفع وفحص الطبقات

1. افتح AI Studio وأنشئ استيرادًا جديدًا من PSD.
2. ارفع ملف .psd الخاص بك.
3. في لوحة الطبقات، تأكد من أن المجموعات تطابق كتل الواجهة (الترويسة، التذييل، صف الأزرار، النافذة المنبثقة).

يحافظ AI Studio على بنية PSD بدلاً من إعطائك أطلس نسيج واحد يجب عليك هندسته عكسيًا.

الدقيقة 2 — المعاينة على اللوحة القماشية

1. حدد لوح الرسم الجذر أو مجموعة الشاشة الرئيسية.
2. استخدم اللوحة القماشية المركزية للتحقق من التباعد والخطوط وترتيب التراكب.
3. أصلح المشكلات الواضحة في المفتش (أعد تسمية المجموعات، وأخفِ طبقات التصحيح).

إذا كانت الطبقة زخرفية بوضوح مقابل تفاعلية، فقم بوضع علامة عليها أو تجميعها الآن - وهذا يقلل من التنظيف في Unity.

الدقيقة 3 — التعيين إلى دلالات Unity UI

في إعدادات التصدير:

• المحرك الهدف: Unity
• نوع الإخراج: UI prefab / تسلسل هرمي جاهز للمشهد (وليس فقط sprites خام)
• يُفضل TextMeshPro لطبقات النص عندما يكون متاحًا
• احتفظ بمرشحي 9-slice (اللوحات والأزرار) كصور قابلة لتغيير الحجم

يترجم AI Studio طبقات التصميم إلى مفاهيم المحرك: تخطيط RectTransform، و sprites Image، ومكونات النص - وليس فقط PNGs مسطحة موضوعة على Canvas.

الدقيقة 4 — التصدير إلى Unity

1. انقر Export to Unity (أو قم بتنزيل حزمة Unity / تصحيح المشروع، اعتمادًا على سير عمل Studio الخاص بك).
2. في Unity، استورد الحزمة إلى Assets/UI/ (أو اصطلاح مجلد فريقك).
3. افتح الـ prefab المُنشأ - تأكد من أطفال Canvas ونقاط الارتكاز.

يجب أن ترى تسلسلًا هرميًا للـ prefab يعكس مجموعات PSD الخاصة بك، جاهزًا للسحب تحت Canvas موجود.

الدقيقة 5 — الإفلات في المشهد واختبار الدخان

1. اسحب الـ prefab إلى Canvas المشهد الخاص بك.
2. ادخل إلى Play Mode واختبر بنسبة 16:9 ونسبة شاشة هاتف طويلة.
3. لاحظ أي مشكلات في نقاط الارتكاز أو الخطوط الاحتياطية؛ اضبط في وضع prefab، وليس في رحلة العودة إلى PSD بعد.

إذا كنت تستخدم أيضًا Unity MCP لأتمتة المحرر، يمكنك أن تطلب من عميل الذكاء الاصطناعي الخاص بك إعادة تسمية العقد على دفعات أو ربط مراجع الأزرار بعد الاستيراد - مفيد عندما يحتوي PSD على أسماء طبقات عامة مثل Group 47.

البديل اليدوي (عند تخطي AI Studio)

بدون أتمتة، المسار الكلاسيكي هو:

1. تصدير شرائح من Photoshop كـ PNG
2. استيراد sprites في Unity
3. إنشاء كائنات Image / Text يدويًا
4. إعادة بناء التخطيط باستخدام نقاط ارتكاز RectTransform

غالبًا ما يستغرق ذلك 30-90 دقيقة لشاشة واحدة، ولهذا تتبنى الفرق أداة تصميم إلى محرك لأعمال الواجهة المتكررة.

إصلاحات شائعة بعد الاستيراد

النص يبدو خاطئًا — قم بتعيين أصل خط TMP يطابق لغة التصميم الخاصة بك؛ غالبًا ما تختلف الخطوط الاحتياطية عن Photoshop.

واجهة ضبابية على الجهاز — تحقق من Reference Resolution في Canvas و Pixels Per Unit في sprite؛ تجنب تكبير الأيقونات الصغيرة فوق 100%.

الأزرار لا تستجيب للنقر — تأكد من وجود Graphic Raycaster على Canvas وتمكين Raycast Target على الصور التفاعلية.

المنطقة الآمنة مقصوصة على iPhone — أضف مجموعة تخطيط Safe Area جذرية أو حشوة على جذر الـ prefab.

متى تعيد الاستيراد مقابل التصحيح في Unity

الموقف	التوصية
غيّر المصمم ألوان زرين	صحيح الـ prefab في Unity
إعادة هيكلة التخطيط (علامة تبويب قائمة جديدة)	أعد استيراد PSD في AI Studio
إضافة شاشة جديدة	لوح رسم PSD جديد → prefab جديد
إضافة توطين	يُفضل TMP + جداول سلاسل في Unity

إن إبقاء PSD كمصدر للحقيقة للتخطيط، وUnity للربط والسلوك، يتجنب ألم الدمج.

كيف يتناسب هذا مع مجموعة VberAI

يتعامل VberAI Studio مع التصميم → بنية Unity UI. Unity MCP (اختياري) يساعدك في كتابة مهام المحرر المتكررة بعد الاستيراد - ربط الأزرار، استبدال sprites، أو التحقق من مراجع prefab. AI Super Matting مفيد عندما تحتاج طبقات الأيقونات إلى alpha نظيف قبل أن تصبح مكونات Image.

معًا، يقصرون الحلقة من النموذج الأولي إلى واجهة قابلة للعب دون التخلي عن Photoshop كأداة التصميم التي يستخدمها فنانوك بالفعل.

الخلاصة

استيراد PSD إلى Unity UI في خمس دقائق أمر واقعي عندما تعامل PSD كبيانات منظمة - وليس كصورة واحدة - وتستخدم AI Studio لإصدار تسلسل هرمي جاهز لـ Unity بدلاً من عمل RectTransform اليدوي. جهز مجموعات الطبقات المسماة، وصدر بدلالات Unity UI، وأسقط الـ prefab تحت Canvas، واختبر الدخان بنسبتي أبعاد.

هل أنت مستعد لتجربته على شاشتك التالية؟ افتح VberAI Studio، وارفع PSD بطبقات، وصدر أول prefab لواجهة Unity في جلسة واحدة.