← العودة إلى المدونة

VberAI In-Place Slice: استيراد صور تصميم واجهة اللعبة إلى Unity / Godot / Cocos بنقرة واحدة

يقوم VberAI Studio بتقطيع صور تصميم واجهة اللعبة كاملة الشاشة في مكانها، مع الحفاظ على التخطيط والأحجام، ويصدرها إلى Unity وGodot وCocos بنقرة واحدة.

نُشر في
  • vberai
  • ai-studio
  • inplace-slice
  • game-ui
  • ui-slicing
  • unity
  • godot
  • cocos
  • tutorial

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

التقطيع التقليدي مقابل التقطيع في المكان

التقطيع التقليديالتقطيع في المكان من VberAI
العمليةتحديد الصور PNG → سحبها إلى المحرك → إعادة ضبط الموضع والتسلسل الهرمييكتشف الذكاء الاصطناعي عناصر الواجهة → يقسمها في مكانها → يصدرها حسب المحرك
المخرجاتصور منفردة بشكل أساسيوحدات متعددة الطبقات + تسلسل هرمي للواجهة / مكونات جاهزة قابلة للاستيراد
بيانات الموضعغالبًا ما تُفقد بعد التقطيع؛ وتُضبط يدويًا في المحركالموضع والحجم النسبيان محفوظان مع التقطيع

ما معنى التقطيع في المكان

  1. في المكان — تبقى الأزرار واللوحات وغيرها المقسمة على إحداثياتها وأحجامها النسبية الأصلية.
  2. التقطيع / التقسيم — يكتشف الذكاء الاصطناعي الأزرار واللوحات والأيقونات والعناوين والنماذج كوحدات قابلة للتسمية والتصدير.
  3. نقرة واحدة إلى المحرك — اختر Unity / Godot / Cocos Creator وقم بتصدير التسلسل الهرمي للواجهة أو المكونات الجاهزة (وفقًا للوحة الاستوديو).

عندما يكون لديك بالفعل طبقات Figma / PSD مقسمة، قم بالاستيراد والتصدير إلى المحرك مباشرة—بدون خطوة التقطيع في المكان؛ راجع Figma→Unity والأدلة ذات الصلة. استخدم هذه المقالة فقط للصور الكاملة المسطحة أو مخرجات الذكاء الاصطناعي للواجهات.

الخطوات

1. قم بإعداد صورة تصميم واجهة اللعبة كاملة الشاشة

يمكن أن يكون الإدخال:

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

صورة تصميم واجهة كاملة الشاشة على اللوحة القماشية

2. قم بتقطيع عناصر الواجهة في المكان

على اللوحة القماشية، قم بتشغيل التقطيع / الاستخراج:

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

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

3. قم بالتصدير إلى المحرك المستهدف بنقرة واحدة

اختر Unity أو Godot أو Cocos Creator. يُفضل إخراج التسلسل الهرمي للواجهة / المكونات الجاهزة.

  • Unity: استورد تحت Canvas؛ تحقق من RectTransform
  • Godot: أرفق تحت جذر Control؛ تحقق من المراسي والسمات
  • Cocos: تحقق من Widget وLayout وButton

معاينة بعد استيراد المحرك

4. القبول في المحرك

  1. افتح المكون الجاهز / جذر مشهد الواجهة الذي تم إنشاؤه
  2. قم بالتشغيل بنسبة 16:9 ونسبة البورتريه المستهدفة؛ وانقر خلال المسار الرئيسي
  3. تأكد من عدم وجود انحراف عام، وأن الأزرار قابلة للنقر، ولا توجد طبقات حاجبة
  4. لتوصيل المنطق، استخدم Engine MCP من Cursor أو عملاء مشابهين

مزيد من التفاصيل وتوصيل MCP: تقسيم صور تصميم واجهة اللعبة إلى المحرك.

القيود

  • نادرًا ما يكون التصدير الأول مثاليًا بالبكسل؛ فالخطوط والتوطين والحركة لا تزال تحتاج إلى تحسين داخل المحرك.
  • تعتمد جودة التقطيع على وضوح المصدر؛ فقد تتطلب الحواف الضبابية أو الطبقات الفوضوية إعادة تصدير أو إصلاحًا يدويًا.
  • التقطيع في المكان يغلف البنية—لا يحل محل نصوص اللعب.
  • VberAI Studio ≠ Google AI Studio — راجع المقارنة.

الملخص

الهدر المعتاد في تسليم واجهات الألعاب هو التقطيع اليدوي لنموذج كامل الشاشة وإعادة بنائه في المحرك. يضع VberAI Studio التصميم كامل الشاشة → التقطيع في المكان → Unity / Godot / Cocos على لوحة قماشية واحدة. المنتج: AI Studio.

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

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

هل يمكنني الاستيراد بنقرة واحدة إلى Unity / Godot / Cocos؟ نعم—قم بالتصدير أو الدفع بالتسلسل الهرمي للواجهة / المكونات الجاهزة للمحرك المستهدف (وفقًا لقدرة الاستوديو الحالية). اختبر التشغيل بعد الاستيراد.

كيف يختلف هذا عن التقطيع اليدوي لصور PNG؟ غالبًا ما ينتج التقطيع اليدوي صورًا منفردة بدون دلالات تخطيط؛ بينما ينتج التقطيع في المكان وحدات متعددة الطبقات وبنية محرك، مما يقلل من عمل إعادة البناء.

هل هذا هو نفسه استيراد Figma / PSD؟ نفس AI Studio، إدخال مختلف. إذا كان Figma / PSD يحتوي بالفعل على طبقات مقسمة، فاستورد ملف التصميم وقم بالتصدير إلى المحرك مباشرة—بدون تقطيع في المكان؛ راجع Figma→Unity، PSD→Unity. استخدم هذه المقالة فقط للصور المسطحة كاملة الشاشة (بدون طبقات).

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

تسلسل هرمي لمعلومات شاشة العرض (HUD) على الجوال: ماذا نعرض في القتال والردهة والنوافذ المنبثقة

رؤية وأولوية شاشة العرض حسب حالة اللعبة؛ وعلاقتها بالمنطقة الآمنة وطبقات النص العائم وتراكم النوافذ—جداول مواصفات وخطوات قبول على الجهاز.

  • game-ui-design
  • game-dev-ai
  • ui-to-engine
  • hud
اقرأ المزيد