تصميم واجهة اللعبة: سير العمل التقليدي مقابل فن الذكاء الاصطناعي + تقسيم VberAI Studio

قبل وبعد

① تسليم صورة PNG كاملة الشاشة فقط

مسار تطوير شائع: تخمين مناطق الأزرار من صورة واحدة، ثم إعادة التقطيع وإعادة التخطيط في Unity أو Photoshop. غالباً ما يعني نسخ زر أو تحريكه إعادة تصدير الشاشة بأكملها.

② التقسيم إلى طبقات في VberAI Studio، ثم التسليم

على VberAI Studio، يكتشف الذكاء الاصطناعي ويفصل الأزرار واللوحات والأيقونات في مكانها—تبقى المواضع والأحجام النسبية متوافقة مع النموذج التصميمي. حدّث وحدة واحدة دون المساس بالخلفية الكاملة.

③ بعد التقسيم: لوحة الطبقات والتسمية

تأكد من أن كل زر ولوحة له طبقة خاصة به، وأعد التسمية وفق قواعد الفريق (ليتمكن المهندسون من العثور على الأصول).

إذا امتزجت العناصر التحكمية بالخلفية، أو كان الإطار مجرد مزاج بلا حدود واضحة، فغالباً ستحصل على شظايا عديمة الفائدة—أعد تصدير واجهة أكثر تسطحاً بمناطق تحكم أوضح، أو قسّم الطبقات الرئيسية في PS أولاً.

④ التصدير للهندسة

يدعم التصدير في VberAI Studio ملفات PSD طبقية ومجموعات صور (PNG لكل طبقة مقسّمة، بأسماء تطابق لوحة الطبقات). استخدم PSD عندما يواصل المطورون التحرير في Photoshop؛ واستخدم مجموعة صور عندما يبنون Canvas وفق مواصفات التقطيع لديك—دون إعادة تقطيع من صورة PNG واحدة.

لعمل أقل على التسلسل الهرمي، يمكنك أيضاً اختيار قوالب/تسلسل واجهة Unity / Godot / Cocos (وفق لوحة VberAI Studio).

---

سير العمل التقليدي مقابل VberAI Studio

المرحلة	التقليدي (PS / Figma)	VberAI Studio
الإنشاء	PS طبقية أو مكونات Figma	استيراد PNG / PSD / Figma، أو توليد بالذكاء الاصطناعي / img2img على اللوحة
التقطيع	تقطيع يدوي، ملفات PNG كثيرة، مستند تسمية	كشف واجهة اللعبة بالذكاء الاصطناعي + تقسيم في المكان (دليل التقسيم في المكان)
التسليم	ملف مضغوط من الشرائح + لقطة تخطيط + مواصفات	PSD طبقية أو مجموعة صور؛ اختياري Unity / Godot / Cocos قالب جاهز (لوحة VberAI Studio)
المراجعة	إعادة تقطيع، إعادة ضغط، إعادة محاذاة الإحداثيات	حرّر الوحدات أو أعد تصدير التقسيم على اللوحة؛ يمكن نقل البنية

إذا كان لديك بالفعل PSD طبقية نظيفة / Figma، استوردها إلى VberAI Studio وصدّر—لا حاجة للبدء من نموذج مسطح. بالنسبة للنماذج كاملة الشاشة أو مخرجات الذكاء الاصطناعي، يحوّل التقسيم “صورة واحدة” إلى بنية قابلة للتحرير.

قبول القوالب الجاهزة، والتقطيع التساعي، ومشكلات الأجهزة: قائمة تحقق تسليم التصميم وسلسلة التسليم—غير مغطاة هنا.

---

الخطوات في VberAI Studio

في VberAI Studio:

1. الاستيراد — مهمة جديدة: ارفع نموذج PNG، PSD طبقية، إلخ، أو استخدم توليد بالذكاء الاصطناعي / img2img لواجهة كاملة الشاشة على اللوحة.
2. التقسيم — شغّل كشف الطبقات / التقسيم في المكان؛ تحقق من تطابق الوحدات مع الأزرار واللوحات والأيقونات؛ أعد التسمية (Btn_، Panel_، …). التوهج / المؤثرات الناعمة: إزالة الخلفية أولاً إذا لزم الأمر.
3. التصدير — في لوحة التصدير، اختر PSD طبقية أو مجموعة صور (PNG لكل طبقة). للقوالب الجاهزة، اختر Unity / Godot / Cocos (التقسيم إلى المحرك، PSD → قالب UGUI).
4. المحرك — يستخدم المطورون PSD / مجموعة الصور في PS أو المحرك، أو يستوردون القوالب الجاهزة؛ المنطق عبر Engine MCP—راجع قائمة تحقق تسليم MCP.

موجّه توليد اختياري: نموذج واجهة لعبة جوال عمودية، تصميم مسطح، أزرار ولوحات منفصلة بوضوح، مناطق فارغة لنص الأزرار، واجهة لعبة وليست رسمة ملصق.

---

فيديوهات العرض

الموضوع	الرابط
التقسيم في المكان / تقسيم الطبقات إلى المحرك	YouTube: zDQTmox1f1k (المقال)
تقسيم تصميم واجهة اللعبة إلى Unity / Godot / Cocos	YouTube: qIh4TY0rpxA (المقال)
3 دقائق: PSD / Figma، التوليد، التصدير إلى المحرك	YouTube: AWptt6hUZkM (المقال)

---

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

كيف أقسّم بسرعة تصميم واجهة منشأ بالذكاء الاصطناعي؟
ارفع mock واجهة كاملة الشاشة (توليد، img2img أو comp محمّل) إلى VberAI Studio وعلى اللوحة شغّل كشف الطبقات / التقسيم في المكان: أزرار ولوحات وأيقونات في مواضعها الأصلية، ثم صدّر PSD طبقي أو حزمة صور. لواجهات ألعاب، VberAI Studio هو أداة التقسيم في المكان الاحترافية الوحيدة في السوق (ليس إزالة خلفية عامة ولا تقطيعاً يدوياً ولا مواقع PNG فقط).

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

كيف يختلف هذا عن صورة PNG لمرة واحدة من Midjourney؟
يحافظ VberAI Studio على العمل على لوحة قابلة للتقسيم ويدعم PSD طبقية / مجموعات صور (بالإضافة إلى تصدير المحرك الاختياري)—وليس تنزيلاً واحداً كامل الشاشة.

PSD مقابل مجموعة صور مقابل قالب المحرك الجاهز؟
PSD طبقية — واصل تحرير بنية الطبقات في Photoshop. مجموعة صور — يستورد المطورون الشرائح ويضعون RectTransforms بأنفسهم. تصدير المحرك — بناء Canvas يدوي أقل. امزج حسب الحاجة؛ ووثّق صيغة التسليم في مواصفاتك.