VberAI Studio: Divida Imagens de Design de UI de Jogos e Importe para Unity / Godot / Cocos

VberAI Studio (≠ Google AI Studio) divide imagens de design de UI de jogos em elementos separados, mantém o layout e o dimensionamento originais e exporta assets de UI para Unity / Godot / Cocos a partir do canvas em um clique — de uma folha de conceito em tela cheia para prefab/hierarquia importável via um pipeline automatizado, sem corte manual e reconstrução.

Passos: Da Imagem de Design de UI de Jogo à Entrega no Motor

1. Prepare a entrada: imagem de design de UI de jogo em tela cheia

Crie uma nova tarefa no AI Studio. A entrada pode ser:

• Uma UI de jogo em tela cheia gerada no canvas (menu principal, HUD, loja, etc.)
• Mockups de arte / design, composições visuais ou folhas de conceito exportadas como PNG
• Qualquer outra imagem de design de UI em tela cheia (prefira resolução suficiente e limites claros de botões/painéis)

Dica: quanto mais a imagem se parecer com uma UI final de uma tela, mais fácil será a divisão; evite mood boards vagos sem regiões de controle reconhecíveis.

2. Coloque a imagem completa no canvas e visualize a estrutura

Após a geração ou importação, a UI deve aparecer na pré-visualização do canvas do jogo. Verifique:

• Botões, painéis e regiões de título têm limites claros
• Sem sobreposição óbvia, corte ou artefatos (corrija antes de dividir ou exportar)
• O motor de destino (Unity / Godot / Cocos) está selecionado no lado da exportação

3. Divida os elementos de UI em suas posições originais

No canvas, execute dividir / extrair elementos de UI (o texto exato da UI pode variar conforme o produto). Objetivos:

• Separe cada controle clicável (botão, aba, item de lista) da decoração
• Mantenha a posição relativa e o tamanho originais para que nada se desloque no motor
• O painel de camadas deve mostrar módulos nomeados (para renomear e vincular posteriormente)

Esta é a diferença central de “cortar manualmente 20 PNGs no Photoshop e arrastar para o Unity”: os dados de posição permanecem com a divisão.

4. Verifique camadas e nomenclatura antes de exportar

Após a divisão, confirme no canvas:

Verificação	Notas
Área de clique vs. decoração	Fundo do botão e ícone separados para que os hotspots permaneçam precisos
Camadas de texto	Títulos que você precisa editar permanecem legíveis e substituíveis
Fundos esticáveis	Painel nine-slice / fundos adequados para diferentes resoluções
Nomenclatura	Nomes de nós são óbvios no motor (ex.: Btn_Start, Panel_Shop)

Ajuste o espaçamento ou oculte camadas de rascunho antes da importação quando possível — dividir após o prefab chegar custa mais.

5. Escolha o motor de destino e exporte / envie

Escolha Unity, Godot ou Cocos Creator. Prefira a saída hierarquia / prefab de UI — não apenas uma pasta de imagens soltas (a menos que você precise apenas de um pacote de assets).

• Unity: Importe em Assets/UI/ ou sua convenção, anexe sob Canvas, verifique RectTransform e Layout Group
• Godot: Anexe sob uma raiz Control, verifique Theme, âncoras e minimum_size
• Cocos: Verifique Widget, Layout e componentes Button

Se o produto suportar envio para um projeto aberto, a cópia manual pode ser reduzida; siga o painel atual do Studio.

6. Verifique o layout e conecte a lógica com o Engine MCP

Após a exportação chegar ao seu projeto, trabalhe em duas camadas: valide a estrutura da UI primeiro, depois use MCP para que um cliente de IA gere a interação e a conexão da jogabilidade — você não precisa começar de arquivos de script em branco para cada linha.

6a. Layout e áreas de clique (teste de fumaça)

1. Abra o prefab / raiz da cena de UI gerado
2. Jogue em 16:9 e na proporção de retrato alvo; clique pelo caminho principal (iniciar, voltar, troca de aba, etc.)
3. Verifique fontes, área segura, placeholders de localização; confirme hotspots de botões e sem camadas bloqueadoras
4. Se os nomes dos nós estiverem confusos, unifique no editor primeiro (ex.: Btn_Start, Panel_Shop) — o MCP encontra controles pelo nome depois

6b. VberAI Engine MCP + conexão com editor de IA (recomendado)

VberAI Studio lida com “conceito estático → assets de UI estruturados”; callbacks de botão, navegação de página e vinculação a dados de jogabilidade como saúde / inventário podem ir para VberAI Engine MCP em um projeto de motor já aberto. No Cursor, Claude Code ou qualquer cliente compatível com MCP, descreva a intenção em linguagem natural, por exemplo:

• “Conecte o clique de Btn_Start para carregar a lógica na cena MainMenu”
• “O clique no item da lista da loja abre Panel_Detail e atualiza o texto do preço”
• “A barra de saúde do HUD atualiza fillAmount quando PlayerHealth muda”

O MCP opera a árvore de nós do editor, referências de componentes e anexos de script diretamente — gerando ou editando C# / GDScript / TypeScript no projeto — mais próximo da aceitação pronta para jogar do que colar código do chat.

Motor de destino	Instalação e configuração do MCP
Unity	Instalação do Unity MCP; configuração do cliente: Cursor / Claude Code + Unity MCP
Godot	Instalação e habilitação do Godot MCP
Cocos Creator	Visão geral: O que é Cocos Creator MCP; instalação: 3.x, 2.x; vídeo: Tutorial de configuração do Cocos MCP

Exemplo completo após a exportação do Studio (HUD do Unity vinculado à saúde): Vincular HUD do AI Studio a eventos de saúde com Unity MCP. Cadeia de ponta a ponta: Fluxo de trabalho AI Studio + Engine MCP.

Divisão de trabalho: AI Studio resolve empacotamento e camadas; Engine MCP resolve lógica no editor, sinais e edições de cena após a importação — mesmo pipeline, nem a estrutura da UI nem os scripts de jogabilidade precisam de reconstrução manual completa do zero.

Lista de verificação de aceitação pré-motor

1. Integridade da divisão — botões principais, teclas de fechar, itens de lista presentes; sem regiões grudadas
2. Posição e tamanho — correspondem à pré-visualização do canvas; sem deslocamento global
3. Alfa e bordas — ícones limpos; pré-processe com remoção de fundo por IA se necessário
4. Resolução e área segura — entalhes e ultrawide não cortam controles-chave
5. Áreas de clique — região clicável maior que a arte decorativa; sem toques errados
6. Anexo ao motor — referências de Prefab Unity, PackedScene Godot, prefab Cocos intactas

Como isso se encaixa com outros caminhos do VberAI Studio

Seu ponto de partida	Caminho provável
Figma / PSD com camadas	Figma→Unity, Figma→Godot, PSD→Unity
Design de UI de jogo em tela cheia (saída de IA, mockups)	Este artigo: imagem de design dividida em motor
Vídeo de IA para habilidades / VFX / ciclos de corrida	Sequência de frames e trailers para o motor
Renomear em lote e vincular sinais após importação	Unity / Godot / Cocos Engine MCP (veja taxonomia de ferramentas de IA)

Os caminhos se acumulam: design de UI em tela cheia → divisão no Studio → Engine MCP para conexão e scripts em um editor de IA.

Limitações

• VberAI Studio não gera regras de jogabilidade por si só; scripts pós-importação e vinculação de nós podem ir para Engine MCP + editores de IA em vez de código todo escrito à mão.
• Imagens de design inteiras raramente exportam pixel-perfect na primeira passada; fontes, localização e movimento ainda precisam de polimento no motor.
• Qualidade da divisão depende da clareza da fonte; bordas de controle borradas ou camadas caóticas podem precisar de reexportação ou correção manual.
• MCP opera uma árvore de objetos de projeto aberto; fórmulas de combate complexas, sincronização de rede e cutscenes Timeline ainda merecem revisão humana no motor.
• Nome completo VberAI Studio ≠ Google AI Studio — veja comparação.

Resumo

O desperdício usual com UI de jogos é reconstruir uma imagem de design não clicável à mão no motor e depois escrever à mão cada linha de lógica de UI. VberAI Studio coloca design de UI em tela cheia → divisão no lugar → entrega Unity / Godot / Cocos em um canvas de jogo; após a importação, empilhe VberAI Engine MCP no Cursor e editores de IA semelhantes para vincular botões e iterar scripts em linguagem natural. Demo oficial: YouTube qIh4TY0rpxA. Entrada do produto: AI Studio.

FAQ

O VberAI Studio pode importar imagens de design de UI de jogos para Unity / Godot / Cocos?
Sim. Coloque um design de UI em tela cheia (saída de IA ou mockup de arte) no canvas, divida os elementos de UI, mantenha layout e dimensionamento, e exporte ou envie prefab / hierarquia para o motor de destino.

Como o VberAI Studio é diferente de arrastar um PNG para o Canvas?
Um PNG único não tem hierarquia editável ou posições preservadas; VberAI Studio gera módulos de UI divididos e estrutura de motor, reduzindo o corte manual e a reconstrução de RectTransform / árvore Control.

Isso é o mesmo que importação Figma / PSD?
Mesmo canvas do AI Studio, entrada diferente: Figma / PSD usam arquivos de design vetoriais / com camadas já existentes; este artigo cobre imagens de design de UI em tela cheia (composições planas). Prefira Figma / PSD quando você tiver camadas completas; use este caminho para mockups em tela cheia ou saída de IA apenas.

Como os botões divididos se tornam clicáveis?
Confirme nomes de nós claros no motor primeiro. Depois conecte VberAI Engine MCP no Cursor / Claude Code e descreva os vínculos em linguagem natural (iniciar jogo, abrir loja, etc.) — o MCP anexa Button / sinais e gera ou edita scripts no editor. Exemplo Unity: HUD vinculado à saúde; instalação Cocos: MCP 3.x, MCP 2.x.

Ainda preciso escrever toda a lógica à mão após a importação?
Não. O Studio lida com estrutura de UI e assets; Engine MCP gera scripts e referências de componentes em um projeto aberto via editores de IA. Jogabilidade complexa ainda precisa de revisão humana e aceitação Play.

Isso é o mesmo que divisão de frames de vídeo de IA?
Não. Este artigo é divisão de tela de UI estática; habilidades, ciclos de corrida e loops de VFX usam vídeo → frames para o motor.

O VberAI é o mesmo que Google AI Studio?
Não. VberAI Studio é um canvas de assets de jogos; Google AI Studio é um playground de modelos geral. Veja Google AI Studio vs VberAI.

Existe um tutorial oficial?
Sim: Transforme Arte de Jogo Gerada por IA em uma UI Interativa, canal VberAI for Game Dev.

O que verificar na primeira exportação?
Integridade da divisão, hotspots de botões, âncoras multi-resolução; fontes de tema e localização geralmente precisam de outra passada no motor.