Блог Сравнение Глоссарий
Официальный сайт
← К блогу

Создайте готовый к производству игровой UI за 3 минуты с AI Studio (видеоруководство)

Официальный обзор VberAI YouTube — импортируйте PSD/Figma с VberAI AI Studio и экспортируйте игровой UI в Unity, Cocos Creator и Godot за минуты.

Опубликовано
  • vberai
  • ai-studio
  • video
  • psd
  • figma
  • unity
  • godot
  • cocos
  • tutorial
Смотреть на YouTube

Смотрите официальный урок

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

Из официального описания:

Создайте готовый к производству игровой UI за 3 минуты. Без ручной нарезки. Без повторяющейся настройки. Без потраченных часов. Импортируйте PSD и Figma → Создайте игровой UI с помощью ИИ → Автоматически разбейте ассеты → Экспортируйте напрямую в Unity, Cocos и Godot.

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

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

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

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

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

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

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

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

  • Используйте слоистый PSD или именованные фреймы Figma — не единый объединенный PNG
  • Называйте группы понятно (Btn_Start, Panel_HUD)
  • Откройте VberAI AI 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.

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

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

Читайте дальше

Другие статьи, которые могут вам понравиться