VberAI Studio: تقسيم صور تصميم واجهة اللعبة واستيرادها إلى Unity / Godot / Cocos

VberAI Studio (وليس Google AI Studio) يقسم صور تصميم واجهة اللعبة إلى عناصر منفصلة، مع الحفاظ على التخطيط والأحجام الأصلية، ويصدّر أصول واجهة Unity / Godot / Cocos من اللوحة بنقرة واحدة — من ورقة مفهوم بملء الشاشة إلى Prefab / Hierarchy قابل للاستيراد عبر خط أنابيب آلي، دون قص يدوي وإعادة بناء.

الخطوات: من صورة تصميم واجهة اللعبة إلى التسليم للمحرك

1. تحضير الإدخال: صورة تصميم واجهة لعبة بملء الشاشة

أنشئ مهمة جديدة في AI Studio. يمكن أن يكون الإدخال:

• واجهة لعبة بملء الشاشة تم إنشاؤها في اللوحة (القائمة الرئيسية، HUD، المتجر، إلخ)
• نماذج فنية / تصميمية، أو صور مركبة، أو أوراق مفاهيم مصدرة بصيغة PNG
• أي صورة تصميم واجهة بملء الشاشة أخرى (يُفضل دقة كافية وحدود واضحة للأزرار واللوحات)

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

2. ضع الصورة الكاملة على اللوحة ومعاينة البنية

بعد الإنشاء أو الاستيراد، يجب أن تظهر الواجهة في معاينة لوحة اللعبة. تحقق من:

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

3. تقسيم عناصر الواجهة في مواضعها الأصلية

على اللوحة، قم بتشغيل تقسيم / استخراج عناصر الواجهة (قد يختلف نص الواجهة حسب المنتج). الأهداف:

• فصل كل عنصر تحكم قابل للنقر (زر، تبويب، عنصر قائمة) عن الزخرفة
• الحفاظ على الموضع والحجم النسبيين الأصليين حتى لا يحدث انحراف في المحرك
• يجب أن تعرض لوحة الطبقات وحدات مسماة (لإعادة التسمية والربط لاحقًا)

هذا هو الفرق الجوهري عن “قص 20 صورة PNG يدويًا في Photoshop وسحبها إلى Unity”: تبقى بيانات الموضع مع التقسيم.

4. تحقق من الطبقات والتسمية قبل التصدير

بعد التقسيم، تأكد على اللوحة:

التحقق	ملاحظات
منطقة النقر مقابل الزخرفة	فصل خلفية الزر والأيقونة بحيث تظل المناطق الساخنة دقيقة
طبقات النص	تظل العناوين التي تحتاج إلى تعديل قابلة للقراءة والاستبدال
الخلفيات القابلة للتمدد	تناسب لوحات Nine-slice / الخلفيات دقة الشاشات المختلفة
التسمية	أسماء العقد واضحة في المحرك (مثل Btn_Start, Panel_Shop)

اضبط التباعد أو أخفِ طبقات المسودة قبل الاستيراد عندما يكون ذلك ممكنًا؛ فالتقسيم بعد وصول الـ Prefab يكلف أكثر.

5. اختر المحرك المستهدف وقم بالتصدير / الدفع

اختر Unity أو Godot أو Cocos Creator. يُفضل إخراج UI hierarchy / prefab — وليس مجرد مجلد صور (إلا إذا كنت تحتاج فقط إلى حزمة أصول).

• Unity: استورد ضمن Assets/UI/ أو اصطلاحك الخاص، وأرفق تحت Canvas، وتحقق من RectTransform وLayout Group
• Godot: أرفق تحت جذر Control، وتحقق من Theme وanchors وminimum_size
• Cocos: تحقق من مكونات Widget وLayout وButton

إذا كان المنتج يدعم الدفع إلى مشروع مفتوح، فقد يتم تقليل النسخ اليدوي؛ اتبع لوحة Studio الحالية.

6. تحقق من التخطيط، ثم اربط المنطق باستخدام Engine MCP

بعد وصول التصدير إلى مشروعك، اعمل على طبقتين: تحقق من بنية الواجهة أولاً، ثم استخدم MCP ليولد عميل AI التفاعل وربط أسلوب اللعب — لا تحتاج إلى البدء من ملفات سكربت فارغة لكل سطر.

6أ. التخطيط ومناطق النقر (اختبار سريع)

1. افتح جذر واجهة الـ Prefab / المشهد المُنشأ
2. شغّل بنسبة 16:9 ونسبة البورتريه المستهدفة؛ وانقر عبر المسار الرئيسي (بدء، رجوع، تبديل تبويب، إلخ)
3. تحقق من الخطوط والمنطقة الآمنة ونصوص الترجمة؛ وتأكد من مناطق نقر الأزرار وعدم وجود طبقات حاجبة
4. إذا كانت أسماء العقد فوضوية، وحدها في المحرر أولاً (مثل Btn_Start, Panel_Shop) — سيجدها MCP بالاسم لاحقًا

6ب. VberAI Engine MCP + ربط محرر AI (موصى به)

VberAI Studio يتعامل مع “المفهوم الثابت → أصول واجهة منظمة”؛ استدعاءات الأزرار، والتنقل بين الصفحات، والربط ببيانات أسلوب اللعب مثل الصحة / المخزون يمكن أن تذهب إلى VberAI Engine MCP في مشروع محرك مفتوح بالفعل. في Cursor أو Claude Code أو أي عميل يدعم MCP، صف النية باللغة الطبيعية، على سبيل المثال:

• “اربط نقرة Btn_Start بمنطق التحميل في المشهد MainMenu”
• “نقرة عنصر قائمة المتجر تفتح Panel_Detail وتحدّث نص السعر”
• “شريط صحة HUD يحدّث fillAmount عندما يتغير PlayerHealth”

يقوم MCP بتشغيل شجرة عقد المحرر ومراجع المكونات ومرفقات السكربت مباشرة — ويولّد أو يعدّل C# / GDScript / TypeScript داخل المشروع — أقرب إلى قبول قابل للتشغيل من لصق كود من الدردشة.

المحرك المستهدف	تثبيت MCP والإعداد
Unity	تثبيت Unity MCP; إعداد العميل: Cursor / Claude Code + Unity MCP
Godot	تثبيت Godot MCP وتمكينه
Cocos Creator	نظرة عامة: ما هو Cocos Creator MCP; التثبيت: 3.x, 2.x; فيديو: درس إعداد Cocos MCP

مثال كامل بعد تصدير Studio (Unity HUD مربوط بالصحة): ربط HUD من AI Studio بأحداث الصحة باستخدام Unity MCP. السلسلة الكاملة: سير عمل AI Studio + Engine MCP.

تقسيم العمل: يحل AI Studio مشكلة التغليف والطبقات؛ ويحل Engine MCP مشكلة المنطق داخل المحرر والإشارات وتعديلات المشهد بعد الاستيراد — نفس خط الأنابيب، ولا تحتاج بنية الواجهة ولا سكربتات أسلوب اللعب إلى إعادة بناء يدوية كاملة من الصفر.

قائمة القبول قبل المحرك

1. اكتمال التقسيم — الأزرار الرئيسية ومفاتيح الإغلاق وعناصر القائمة موجودة؛ لا توجد مناطق ملتصقة
2. الموضع والحجم — يطابق معاينة اللوحة؛ لا انحراف عام
3. الشفافية والحواف — الأيقونات مقصوصة بشكل نظيف؛ قم بالمعالجة المسبقة باستخدام إزالة الخلفية بالذكاء الاصطناعي إذا لزم الأمر
4. الدقة والمنطقة الآمنة — لا تقطع النوتشات والشاشات فائقة الاتساع عناصر التحكم الرئيسية
5. مناطق النقر — المنطقة القابلة للنقر أكبر من الفن الزخرفي؛ لا نقرات خاطئة
6. إرفاق المحرك — مراجع Unity Prefab وGodot PackedScene وCocos prefab سليمة

كيف يتوافق هذا مع مسارات VberAI Studio الأخرى

نقطة البداية	المسار المحتمل
Figma / PSD بطبقات	Figma→Unity, Figma→Godot, PSD→Unity
تصميم واجهة لعبة بملء الشاشة (مخرجات AI، نماذج)	هذه المقالة: تقسيم صورة التصميم إلى محرك
فيديو AI للمهارات / VFX / دورات الجري	تسلسل الإطارات والمقاطع الدعائية إلى المحرك
إعادة تسمية مجمعة وربط إشارات بعد الاستيراد	Unity / Godot / Cocos Engine MCP (انظر تصنيف أدوات AI)

تتراكم المسارات: تصميم واجهة بملء الشاشة → تقسيم Studio → Engine MCP للربط والسكربتات في محرر AI.

القيود

• VberAI Studio لا يولّد قواعد أسلوب اللعب بنفسه؛ يمكن أن تذهب البرمجة النصية وربط العقد بعد الاستيراد إلى Engine MCP + محررات AI بدلاً من كتابة كل الكود يدويًا.
• الصور الكاملة للتصميم نادرًا ما تُصدَر بدقة بكسل مثالية من المحاولة الأولى؛ لا تزال الخطوط والترجمة والحركة تحتاج إلى صقل داخل المحرك.
• جودة التقسيم تعتمد على وضوح المصدر؛ قد تتطلب حواف التحكم الضبابية أو الطبقات الفوضوية إعادة تصدير أو إصلاحًا يدويًا.
• MCP يعمل على شجرة كائنات مشروع مفتوح؛ لا تزال صيغ القتال المعقدة ومزامنة الشبكة ومشاهد Timeline تستحق مراجعة بشرية داخل المحرك.
• الاسم الكامل VberAI Studio ≠ Google AI Studio — انظر المقارنة.

الخلاصة

الهدر المعتاد في ألعاب الفيديو هو إعادة بناء صورة تصميم كاملة غير قابلة للنقر يدويًا في المحرك، ثم كتابة كل سطر من منطق الواجهة يدويًا. يضع VberAI Studio تصميم واجهة بملء الشاشة → تقسيم في مكانه → تسليم Unity / Godot / Cocos على لوحة ألعاب واحدة؛ بعد الاستيراد، قم بتكديس VberAI Engine MCP في Cursor ومحررات AI مماثلة لربط الأزرار وتكرار السكربتات باللغة الطبيعية. العرض الرسمي: YouTube qIh4TY0rpxA. دخول المنتج: AI Studio.

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

هل يمكن لـ VberAI Studio استيراد صور تصميم واجهة اللعبة إلى Unity / Godot / Cocos؟ نعم. ضع تصميم واجهة بملء الشاشة (مخرجات AI أو نموذج فني) على اللوحة، وقسم عناصر الواجهة، مع الحفاظ على التخطيط والأحجام، ثم صدّر أو ادفع الـ Prefab / الـ Hierarchy للمحرك المستهدف.

كيف يختلف VberAI Studio عن إسقاط PNG على Canvas؟ صورة PNG واحدة ليس لها تسلسل هرمي قابل للتعديل أو مواضع محفوظة؛ VberAI Studio ينتج وحدات واجهة مقسمة وبنية محرك، مما يقلل من القص اليدوي وإعادة بناء RectTransform / Control tree.

هل هذا هو نفسه استيراد Figma / PSD؟ نفس لوحة AI Studio، إدخال مختلف: يستخدم Figma / PSD ملفات تصميم متجهة / بطبقات بالفعل؛ تغطي هذه المقالة صور تصميم واجهة بملء الشاشة (صور مسطحة). يُفضل Figma / PSD عندما يكون لديك طبقات كاملة؛ استخدم هذا المسار للنماذج بملء الشاشة أو مخرجات AI فقط.

كيف تصبح الأزرار المقسمة قابلة للنقر؟ أكد أسماء العقد الواضحة في المحرك أولاً. ثم قم بتوصيل VberAI Engine MCP في Cursor / Claude Code وصف الارتباطات باللغة الطبيعية (بدء اللعبة، فتح المتجر، إلخ) — يرفق MCP الأزرار / الإشارات ويولّد أو يعدّل السكربتات في المحرر. مثال Unity: HUD مربوط بالصحة; تثبيت Cocos: 3.x MCP, 2.x MCP.

هل ما زلت أكتب كل المنطق يدويًا بعد الاستيراد؟ لا. يتعامل Studio مع بنية الواجهة والأصول؛ Engine MCP يولّد السكربتات ومراجع المكونات في مشروع مفتوح عبر محررات AI. لا يزال أسلوب اللعب المعقد يحتاج إلى مراجعة بشرية وقبول التشغيل.

هل هذا هو نفسه تقسيم إطارات فيديو AI؟ لا. هذه المقالة عن تقسيم شاشة واجهة ثابتة؛ المهارات ودورات الجري وحلقات VFX تستخدم فيديو → إطارات إلى المحرك.

هل VberAI هو نفسه Google AI Studio؟ لا. VberAI Studio هو لوحة أصول ألعاب؛ Google AI Studio هو ملعب نماذج عام. انظر Google AI Studio مقابل VberAI.

هل هناك عرض توضيحي رسمي؟ نعم: تحويل فن اللعبة المولّد بالذكاء الاصطناعي إلى واجهة تفاعلية، قناة VberAI for Game Dev.

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