قائمة تسليم Figma / PSD: كيف تتجنب تصاميم واجهة الألعاب إعادة العمل

عندما تعيد الهندسة بناء الواجهة، ففي نصف الحالات لا تكون المشكلة جمالية—بل أن التسليم لا يلبي متطلبات المحرك. تُعدّل إطارًا في Figma أو Photoshop، فيضطر فريق الهندسة إلى إعادة التقطيع وبناء الـ Canvas من جديد وإعادة محاذاة المراسي. تتمدد الجداول الزمنية.

فيما يلي قائمة تحقق قبل التسليم تغطي سيناريوهات البحث عالية النية: Figma export Unity، PSD import Unity UI، game UI slicing، تغيير المظهر (ريسكين) للفعاليات، والواجهات متعددة اللغات. يشرح القسم الختامي الفرق بين “PNG فقط” والتصدير المنظَّم؛ الأدوات نقاط مرجعية.

---

ما يحتاجه فريق الهندسة فعليًا

ما يحتاجونه	وليس هذا
تسلسل هرمي مُسمّى (أزرار، لوحات، عناصر قوائم)	صورة JPG واحدة بملء الشاشة
حالات الزر: normal / pressed / disabled	صورة واحدة “تبدو قابلة للنقر”
طبقات نص قابلة للاستبدال	كل شيء مُحوَّل إلى صورة كنص عرض
مواضع نسبية ودلالات المراسي	مرجع تخطيط + 20 صورة PNG متفرقة
بنية prefab قابلة لإعادة الاستخدام	إعادة البناء من الصفر في كل فعالية

اختبار قبول من سطر واحد: بعد الاستيراد إلى Unity UGUI / Godot Control / Cocos UI، يجب ألا يتطلب تغيير النص أو تغيير المظهر (ريسكين) إعادة بناء الشجرة بأكملها.

---

12 فحصًا قبل التسليم

البنية والتسمية

#	الفحص	ملاحظات
1	أسماء Frame / مجموعة دلالية	Panel_Shop، Btn_Buy—وليس Group 12
2	فصل الطبقات التفاعلية عن الزخرفية	الخلفية، الحدود، الأيقونة، النص
3	عناصر القوائم كمجموعات قابلة لإعادة الاستخدام	يمكن تكرار List_Item
4	إخفاء المسودات والإطارات المهجورة	ضجيج أقل عند التصدير

الحالات والمواصفات

#	الفحص	ملاحظات
5	حالات الزر كاملة	normal / pressed / disabled (أو اصطلاح تسمية الفريق)
6	تحديد مناطق 9-slice / التمدد	يجب ألا تُقاس اللوحات وحقول الإدخال بالتحجيم الصلب
7	الدقة المستهدفة والمنطقة الآمنة	الجوال العمودي: النوتش والشريط السفلي
8	استراتيجية الخطوط	طبقات نص للتوطين؛ يُشار إلى نص العرض بشكل منفصل

العمليات الحية والتوطين

#	الفحص	ملاحظات
9	هامش لطول النص	الألمانية / الإسبانية غالبًا أطول بنسبة 30%+ من الإنجليزية
10	تغيير المظهر (ريسكين) = بصري فقط	تصاميم الفعاليات: نفس التخطيط، فن وألوان جديدة
11	التوطين: النص مقابل التخطيط	المثالي: نفس البنية، ملفات لغات متعددة
12	توثيق صيغة التصدير	PSD بطبقات / رابط Figma، أو اصطلاح تسمية التقطيع المتفق عليه

تحضير Figma: سير عمل Figma → Unity. تحضير PSD: استيراد PSD إلى Unity UI في 5 دقائق.

---

ثلاثة مسارات للتسليم (مقارنة موضوعية)

المسار	النهج	الأنسب لـ	نقاط الألم
أ. التقطيع اليدوي	تصدير PNG + لقطة شاشة للتخطيط؛ يبني فريق الهندسة يدويًا	واجهات بسيطة، عروض تجريبية لمرة واحدة	كل مراجعة = إعادة تقطيع وبناء
ب. إضافات المحرك	Figma Converter، Psd-Exporter، إلخ	فرق بمواصفات ثابتة	تعدد المحركات غالبًا يعني الإعادة؛ جودة الإضافات متفاوتة
ج. Canvas منظَّم	ملف بطبقات → canvas اللعبة → تقسيم في المكان → تصدير Prefab	واجهات متعددة الشاشات، ريسكين متكرر / إطلاق عالمي	يتطلب تبنّي سير تصدير موجَّه للألعاب

المسار ج شائع في منتجات مثل VberAI Studio: تحليل PSD / Figma → تقسيم واجهة يحافظ على التخطيط → تصدير إلى Unity / Godot / Cocos (انظر تقسيم واجهة اللعبة إلى المحرك). يمكن للمصممين الاستمرار في العمل على Figma؛ وبعد الاعتماد.

---

سيناريوهات المصممين الشائعة

تقطيع واجهة اللعبة / التقطيع في المكان

إذا كان مفهوم ملء الشاشة بصيغة PNG فقط، يخمّن فريق الهندسة حدود الأزرار. السير الأكثر أمانًا: إسقاط الشاشة على canvas → تقسيم العناصر في المكان (التقطيع في المكان) بحيث تنتقل بيانات الموضع مع التقسيم—لتجنب “تبدو الأجزاء صحيحة لكن كل شيء ينزاح في المحرك”.

تصدير Figma إلى Unity / Godot

إذا كانت الإضافة تُخرج فقط حزمة sprites مسطحة، فسيظل فريق الهندسة يعيد بناء شجرة RectTransform / Control. اسأل عند التقييم: هل المُخرَج Prefab / تسلسل هرمي، أم ملف مضغوط بصور متفرقة؟ مقارنة Godot: Figma → Godot يدوي مقابل سير عمل بالذكاء الاصطناعي.

تغيير مظهر واجهة اللعبة (ريسكين) (موسمية / فعاليات)

هالوين، الكريسماس، إلخ: نفس التخطيط، أصول سمة جديدة. إذا كان كل تغيير مظهر يعني إعادة تقطيع وبناء، فتبطؤ وتيرة العمليات الحية. يجب أن تحافظ أدوات الريسكين على بنية العُقد دون تغيير (تغيير مظهر الواجهة ومتغيرات السمات).

ترجمة واجهة اللعبة / تعدد اللغات في Figma

مزلق الإطلاق العالمي: النص المترجم يفيض عن التخطيط. السير المثالي: استبدال النصوص فقط، دون إعادة تدفق الإطارات (ترجمة الواجهة بنقرة واحدة). في Figma.

الأيقونات والأصول شبه الشفافة

غالبًا ما تحتاج أيقونات المهارات وواجهات VFX إلى إزالة الخلفية قبل الاستيراد (الشعر، الشفافية، التوهج). تُشوّش أدوات العزل العامة الحواف؛ بينما تركز الأدوات الموجَّهة للألعاب على alpha (عزل التوهج / VFX).

---

كيف يتصل هذا بأدوات الصور بالذكاء الاصطناعي

Midjourney، Jimeng، GPT Image 2، إلخ جيدة لـالتوجه البصري؛ لكن إذا كانت الوجهة هي المحرك، فما زلت بحاجة إلى التقسيم والتسلسل الهرمي. التوليفة الشائعة:

مفهوم واجهة AI بملء الشاشة → ينظّم المصمم الطبقات في Figma → تصدير منظَّم إلى المحرك

لا تتعامل مع “صورة واحدة بمستوى ملصق” كتسليم نهائي. مقارنات الأدوات: مولّدات فن تصميم الألعاب بالذكاء الاصطناعي.

---

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

هل يمكنني تسليم صور PNG فقط؟ مناسب للعروض التجريبية؛ لكن واجهة الإنتاج ستُعاد معالجتها مرارًا. على الأقل أرفق ملاحظات التخطيط وقواعد التسمية.

هل يجب أن يكون Figma Auto Layout مثاليًا؟ ليس مثاليًا كالويب—لكن التجميع والتسمية أهم من الضبط بالبكسل.

ماذا يعني فريق الهندسة بـ”الأجزاء خاطئة”؟ عادةً: حالات ناقصة.

تغيير المظهر (ريسكين) مقابل إعادة بناء الواجهة؟ تغيير المظهر: نفس البنية.

هل يحتاج المصممون إلى تعلم Unity؟ ليس البرمجة—لكن أساسيات Canvas / Anchor / Prefab تقلّل تكلفة التواصل بشكل حاد.

هل VberAI Studio هو نفسه Google AI Studio؟ لا. الأول هو canvas ألعاب وتصدير للمحرك؛ والثاني بيئة تطوير ذكاء اصطناعي عامة من Google. انظر المقارنة.