Игровой UI за 3 минуты: видео VberAI Studio (Figma / PSD → движок)

Игровой UI за 3 минуты — что показывает видео

VberAI Studio (≠ Google AI Studio): Figma / PSD → игровой UI → автонарезка → Unity / Godot / Cocos — официальный ролик 61 сек.

Видео: Разработчики игр, вам нужно это увидеть 👀 · канал VberAI

Пошаговые тексты: Figma → Unity · Figma → Godot · PSD → Unity.

Что показывает демо

VberAI Studio (краткое название: AI Studio) обрабатывает файлы дизайна как структурированную иерархию, а не сплющенные изображения:

• Слева: слоистый PSD / Figma
• По центру: предпросмотр холста
• Справа: экспорт, готовый для Unity, Godot или Cocos Creator

Вы получаете переиспользуемые префабы / деревья Control — идеально для меню, HUD и оболочек магазинов, повторяющихся в проекте.

Кому стоит посмотреть

Роль	Преимущество
Передача от дизайнера к инженеру	Меньше итераций по перестройке макета в движке
Соло-разработчик	Быстро выпустить играбельный экран UI
Студия с несколькими движками	Один подход к дизайну, несколько целей экспорта

Пошаговый компаньон

1. Подготовьте файл дизайна

• Используйте слоистый PSD или именованные фреймы Figma — не единый объединенный PNG
• Называйте группы понятно (Btn_Start, Panel_HUD)
• Откройте VberAI Studio на VberAI (AI Studio)

2. Импортируйте и проверьте

1. Создайте новый импорт из PSD или Figma
2. Убедитесь, что группы слоев соответствуют блокам UI на панели слоев
3. Скройте черновые фреймы; исправьте очевидные проблемы с именами

3. Предпросмотр и экспорт

• Проверьте отступы и порядок наложения на холсте
• Установите целевой движок: Unity, Godot или Cocos Creator
• Выберите вывод иерархии UI / префаба — а не только спрайтов
• Предпочтительно используйте TextMeshPro (Unity) или текстовый компонент движка, где доступно

4. Импорт в движок

1. Импортируйте пакет в папку вашей команды (Assets/UI/ и т.д.)
2. Откройте сгенерированный префаб; поместите его под Canvas (Unity) или корень Control (Godot)
3. Быстро протестируйте на 16:9 и высоком соотношении сторон телефона

Если вы также используете Unity MCP или Godot MCP, дайте команду вашему ИИ-клиенту переименовать узлы или подключить сигналы pressed после импорта.

Как это вписывается в стек VberAI

Продукт	Роль
AI Studio	Структура UI от дизайна к движку
Unity / Godot / Cocos MCP	Автоматизация редактора после импорта
AI Super Matting	Очистка альфа-канала иконок перед экспортом

Макет остается в инструментах дизайна; привязка и поведение остаются в движке. Для более глубокого сравнения с Godot читайте Figma to Godot: Manual vs AI Studio.

Часто задаваемые вопросы

Охватывает ли это видео настройку MCP? Оно фокусируется на AI Studio. Настройку Cocos Creator MCP см. в видеоуроке по Cocos Creator MCP.

Какие движки поддерживаются? В описании видео перечислены экспорт в Unity, Cocos и Godot.

Реалистичны ли “3 минуты”? Для чистого одноэкранного UI с именованными слоями первый импорт + экспорт часто занимает минуты — а не часы ручной работы с RectTransform. Темы, шрифты и локализация все еще требуют доработки в движке.

Официальный URL видео? https://www.youtube.com/watch?v=AWptt6hUZkM — канал @vber_ai.

Связанные руководства

• How to Import PSD to Unity UI in 5 Minutes with AI Studio
• Настройка Cocos Creator MCP (видеоурок)

Подпишитесь на VberAI на YouTube или откройте VberAI Studio и попробуйте тот же экспорт на вашем следующем экране.