VberAI In-Place Slice: Importe Imagens de UI de Jogos para Unity / Godot / Cocos com um Clique

VberAI Studio (≠ Google AI Studio) suporta fatiamento in-place: divida uma imagem de UI de jogo em tela cheia em elementos de UI separados, mantenha o layout e o dimensionamento originais, e exporte para Unity / Godot / Cocos com um clique—sem fatiar PNGs soltos manualmente e reconstruir a hierarquia no motor.

Fatiamento tradicional vs fatiamento in-place

	Fatiamento tradicional	Fatiamento in-place VberAI
Processo	Selecionar caixas de PNGs → arrastar para o motor → ajustar posição e hierarquia	IA detecta elementos de UI → divide no lugar → exporta por motor
Saída	Principalmente imagens soltas	Módulos em camadas + hierarquia de UI / prefabs importáveis
Dados de posição	Frequentemente perdidos após o fatiamento; alinhar manualmente no motor	Posição e tamanho relativos mantidos com a divisão

O que significa fatiamento in-place

1. In-place — Botões, painéis, etc. divididos permanecem em suas coordenadas e tamanhos relativos originais.
2. Fatiar / dividir — A IA detecta botões, painéis, ícones, títulos e formulários como módulos nomeáveis e exportáveis.
3. Um clique para o motor — Escolha Unity / Godot / Cocos Creator e exporte hierarquia de UI ou prefabs (conforme o painel do Studio).

Quando você já tem camadas Figma / PSD divididas, importe e exporte diretamente para o motor—sem etapa de fatiamento in-place; veja Figma→Unity e guias relacionados. Use este artigo apenas para mockups de tela cheia planos ou saída de IA de UI.

Passos

1. Prepare uma imagem de design de UI em tela cheia

A entrada pode ser:

• Menu principal, HUD, loja, etc. em tela cheia gerados no canvas
• Mockups de arte / design exportados como PNG
• Outras imagens de design de UI em tela cheia (prefira resolução suficiente e bordas de controles claras)

2. Divida os elementos de UI no lugar

No canvas, execute dividir / extrair:

• Separe controles clicáveis de decoração
• Mantenha posição e tamanho relativos originais
• O painel de camadas mostra nomes de módulos legíveis (para renomear e vincular)

3. Exporte para o motor alvo com um clique

Escolha Unity, Godot ou Cocos Creator. Prefira saída de hierarquia de UI / prefab.

• Unity: Importe sob o Canvas; verifique RectTransform
• Godot: Anexe sob uma raiz Control; verifique âncoras e Theme
• Cocos: Verifique Widget, Layout e Button

4. Aceite no motor

1. Abra o prefab / raiz de UI de cena gerado
2. Execute em 16:9 e na proporção de retrato alvo; clique através do caminho principal
3. Confirme que não há desvio global, botões clicáveis e nenhuma camada bloqueante
4. Para lógica, use Engine MCP do Cursor ou clientes similares

Mais detalhes e conexão MCP: Divida imagens de design de UI de jogos no motor.

Limitações

• A primeira exportação raramente é pixel-perfect; fontes, localização e movimento ainda precisam de polimento no motor.
• A qualidade da divisão depende da clareza da fonte; bordas borradas ou camadas caóticas podem exigir reexportação ou correção manual.
• O fatiamento in-place empacota estrutura—não substitui scripts de gameplay.
• VberAI Studio ≠ Google AI Studio — veja comparação.

Resumo

O desperdício usual na entrega de UI de jogos é fatiar manualmente um mockup de tela cheia e reconstruí-lo no motor. VberAI Studio coloca design de tela cheia → fatiamento in-place → Unity / Godot / Cocos em um único canvas. Produto: AI Studio.

FAQ

O que é fatiamento in-place do VberAI? No VberAI Studio, a IA detecta elementos em uma imagem de design de UI de jogo em tela cheia, divide-os em suas posições originais, mantém layout e dimensionamento, e então exporta para o motor.

Posso importar com um clique para Unity / Godot / Cocos? Sim—exporte ou envie hierarquia de UI / prefabs para o motor alvo (conforme a capacidade atual do Studio). Faça um teste rápido após a importação.

Como isso é diferente de fatiar PNGs manualmente? O fatiamento manual geralmente produz imagens soltas sem semântica de layout; o fatiamento in-place gera módulos em camadas e estrutura de motor, reduzindo o trabalho de reconstrução.

É o mesmo que importação Figma / PSD? Mesmo AI Studio, entrada diferente. Se Figma / PSD já tem camadas divididas, importe o arquivo de design e exporte para o motor diretamente—sem fatiamento in-place; veja Figma→Unity, PSD→Unity. Use este artigo apenas para composições planas em tela cheia (sem camadas).