In-Place Slice в VberAI Studio: нарезка UI и импорт в Unity / Godot / Cocos

In-Place Slice: нарезка UI на месте

VberAI Studio (≠ Google AI Studio) режет полноэкранный игровой UI на отдельные элементы на исходных координатах и экспортирует в Unity / Godot / Cocos — без ручной нарезки PNG и пересборки иерархии.

Вход	Путь
Плоский PNG / AI‑экран	In-Place Slice → движок (эта статья)
Figma / PSD со слоями	Сразу в движок: Figma→Unity, PSD→Unity

Традиционное разрезание против разрезания на месте

	Традиционное разрезание	VberAI разрезание на месте
Процесс	Выделение прямоугольников → перетаскивание в движок → повторная настройка позиции и иерархии	ИИ определяет элементы UI → разрезает на месте → экспорт в движок
Результат	В основном отдельные изображения	Многослойные модули + импортируемая иерархия UI / префабы
Данные о позиции	Часто теряются после разрезания; ручное выравнивание в движке	Относительное положение и размер сохраняются при разрезании

Что означает разрезание на месте

1. На месте — Разрезанные кнопки, панели и т.д. остаются на своих исходных относительных координатах и размерах.
2. Разрезание / разделение — ИИ обнаруживает кнопки, панели, иконки, заголовки и формы, создавая именованные, экспортируемые модули.
3. Один клик в движок — Выберите Unity / Godot / Cocos Creator и экспортируйте иерархию UI или префабы (через панель Studio).

Если у вас уже есть разделенные слои Figma / PSD, импортируйте и экспортируйте в движок напрямую — шаг разрезания на месте не нужен; см. Figma→Unity и связанные руководства. Используйте эту статью только для плоских полноэкранных макетов или результатов ИИ-генерации UI.

Шаги

1. Подготовьте полноэкранное изображение UI

Входные данные могут быть:

• Полноэкранное главное меню, HUD, магазин и т.д., сгенерированные на холсте
• Художественные / дизайнерские макеты, экспортированные в PNG
• Другие полноэкранные изображения UI (предпочтительно с достаточным разрешением и четкими границами элементов)

2. Разрежьте элементы UI на месте

На холсте выполните разделение / извлечение:

• Отделите кликабельные элементы от декора
• Сохраните исходное относительное положение и размер
• Панель слоев показывает читаемые имена модулей (для переименования и привязки)

3. Экспортируйте в целевой движок в один клик

Выберите Unity, Godot или Cocos Creator. Предпочтительно иерархия UI / префаб на выходе.

• Unity: Импортируйте под Canvas; проверьте RectTransform
• Godot: Прикрепите к корневому узлу Control; проверьте якоря и Theme
• Cocos: Проверьте Widget, Layout и Button

4. Примите в движке

1. Откройте сгенерированный префаб / корень сцены UI
2. Запустите в 16:9 и в целевых портретных соотношениях; пройдите по основному пути
3. Убедитесь в отсутствии глобального смещения, кликабельности кнопок и отсутствии блокирующих слоев
4. Для подключения логики используйте Engine MCP из Cursor или аналогичных клиентов

Больше деталей и подключение MCP: Разрезание изображений игрового UI для движка.

Ограничения

• Первый экспорт редко бывает попиксельно точным; шрифты, локализация и анимация все еще требуют доработки в движке.
• Качество разрезания зависит от четкости исходника; размытые края или хаотичные слои могут потребовать повторного экспорта или ручной правки.
• Разрезание на месте упаковывает структуру — оно не заменяет игровые скрипты.
• VberAI Studio ≠ Google AI Studio — см. сравнение.

Итог

Обычная трата времени при передаче игрового UI — ручное разрезание полноэкранного макета и его повторное создание в движке. VberAI Studio объединяет полноэкранный дизайн → разрезание на месте → Unity / Godot / Cocos на одном холсте. Продукт: AI Studio.

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

Что такое разрезание на месте в VberAI? В VberAI Studio ИИ обнаруживает элементы на полноэкранном изображении игрового UI, разрезает их на исходных позициях, сохраняет расположение и размеры, затем экспортирует в движок.

Можно ли импортировать в Unity / Godot / Cocos в один клик? Да — экспортируйте или отправьте иерархию UI / префабы для целевого движка (в зависимости от текущих возможностей Studio). После импорта протестируйте в Play-режиме.

Чем это отличается от ручного разрезания PNG? Ручное разрезание часто дает отдельные изображения без семантики расположения; разрезание на месте выдает многослойные модули и структуру движка, сокращая работу по воссозданию.

Это то же самое, что импорт Figma / PSD? Тот же AI Studio, другие входные данные. Если Figma / PSD уже имеет разделенные слои, импортируйте файл дизайна и экспортируйте в движок напрямую — без разрезания на месте; см. Figma→Unity, PSD→Unity. Используйте эту статью только для плоских полноэкранных макетов (без слоев).