المدونة المقارنة المعجم
الموقع الرسمي
← العودة إلى المدونة

أنشئ واجهة ألعاب جاهزة للإنتاج في 3 دقائق مع AI Studio (دليل فيديو)

جولة رسمية على يوتيوب من VberAI—استيراد PSD/Figma مع VberAI Studio وتصدير واجهة اللعبة إلى Unity وCocos Creator وGodot في دقائق.

نُشر في
  • vberai
  • ai-studio
  • video
  • psd
  • figma
  • unity
  • godot
  • cocos
  • tutorial
شاهد على YouTube

شاهد البرنامج التعليمي الرسمي

الفيديو: مطورو الألعاب، يجب أن تشاهدوا هذا 👀 على قناة VberAI على يوتيوب

من الوصف الرسمي:

أنشئ واجهة ألعاب جاهزة للإنتاج في 3 دقائق. بدون قص يدوي. بدون إعداد متكرر. بدون ساعات ضائعة. استيراد PSD وFigma ← توليد واجهة اللعبة بالذكاء الاصطناعي ← تفكيك الأصول تلقائيًا ← التصدير مباشرة إلى Unity وCocos وGodot.

ما يوضحه العرض التجريبي

VberAI Studio (الاسم المختصر: AI Studio) يتعامل مع ملفات التصميم كـتسلسل هرمي منظم، وليس كصور مسطحة:

  • اليسار: PSD / Figma بطبقات
  • الوسط: معاينة اللوحة القماشية
  • اليمين: تصدير جاهز للمحرك لـUnity أو Godot أو Cocos Creator

ستحصل على Prefabs / أشجار تحكم قابلة لإعادة الاستخدام—مثالية للقوائم وHUD وهياكل المتاجر التي تتكرر عبر مشروعك.

من يجب أن يشاهد

الدورالفائدة
تسليم المصمم والمهندسعدد أقل من الجولات لإعادة بناء التخطيط في المحرك
المطور الفرديإطلاق شاشة واجهة قابلة للعب بسرعة
استوديو متعدد المحركاتعادة تصميم واحدة، أهداف تصدير متعددة

شرح خطوة بخطوة

1. تحضير ملف التصميم

  • استخدم ملف PSD بطبقات أو إطارات Figma مسماة—وليس صورة PNG مدمجة واحدة
  • قم بتسمية المجموعات بوضوح (Btn_Start, Panel_HUD)
  • افتح VberAI Studio على VberAI (AI Studio)

2. الاستيراد والفحص

  1. أنشئ استيرادًا جديدًا من PSD أو Figma
  2. تأكد من أن مجموعات الطبقات تطابق كتل الواجهة في لوحة الطبقات
  3. قم بإخفاء الإطارات غير الضرورية؛ أصلح مشكلات التسمية الواضحة

3. المعاينة والتصدير

  • تحقق من التباعد وترتيب التراكب على اللوحة القماشية
  • اضبط المحرك المستهدف: Unity أو Godot أو Cocos Creator
  • اختر مخرجات التسلسل الهرمي للواجهة / Prefab—وليس الصور فقط
  • يفضل استخدام TextMeshPro (في Unity) أو مكون النص الخاص بالمحرك عند توفره

4. الاستيراد إلى المحرك

  1. استيراد الحزمة إلى مجلد فريقك (Assets/UI/, إلخ.)
  2. افتح الـ Prefab المُنشأ؛ ضعه تحت Canvas (في Unity) أو جذر Control (في Godot)
  3. اختبر نسبة 16:9 ونسبة هاتف طويلة

إذا كنت تستخدم أيضًا Unity MCP أو Godot MCP، اطلب من عميل الذكاء الاصطناعي الخاص بك إعادة تسمية العقد دفعة واحدة أو توصيل إشارات pressed بعد الاستيراد.

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

المنتجالدور
AI Studioالتصميم ← هيكل واجهة المحرك
Unity / Godot / Cocos MCPأتمتة المحرر بعد الاستيراد
AI Super Mattingتنظيف قناة ألفا للأيقونات قبل التصدير

يبقى التخطيط في أدوات التصميم؛ وتبقى الأسلاك والسلوك في المحرك. لمقارنة أعمق مع Godot، اقرأ Figma إلى Godot: يدوي مقابل AI Studio.

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

هل يغطي هذا الفيديو إعداد MCP؟ يركز على AI Studio. لإعداد Cocos Creator MCP، انظر كيفية إعداد Cocos Creator MCP (فيديو تعليمي).

ما المحركات المدعومة؟ يسرد وصف الفيديو تصدير Unity وCocos وGodot.

هل “3 دقائق” واقعي؟ لواجهة نظيفة بشاشة واحدة وطبقات مسماة، غالبًا ما يستغرق الاستيراد والتصدير الأول دقائق—وليس ساعات من عمل RectTransform اليدوي. لا تزال السمات والخطوط والتوطين تتطلب مرورًا على المحرك.

رابط الفيديو الرسمي؟ https://www.youtube.com/watch?v=AWptt6hUZkM — القناة @vber_ai.

أدلة ذات صلة

اشترك في VberAI على يوتيوب، أو افتح VberAI Studio وجرب نفس التصدير على شاشتك التالية.

تابع القراءة

أدلة أخرى قد تعجبك

هل يتم تجميع النصوص البرمجية لكن التسلسل الهرمي معطّل؟ تسليم واجهة المستخدم في تطوير الألعاب وقائمة تحقق MCP

لمبرمجي Unity وGodot وCocos: لماذا لا تصلح نصوص Cursor طبقات واجهة المستخدم؛ قائمة قبول بعد استيراد التصميم، ومتى يفيد Unity MCP وGodot MCP، ومنطق الربط بعد تصدير Prefab من AI Studio.

  • game-dev-ai
  • Unity MCP
  • Godot MCP
  • Cocos MCP
اقرأ المزيد