Desenvolvimento de jogos de ponta a ponta: a VberAI leva uma interface até o Unity

A interface de um jogo costuma quebrar entre as ferramentas. A imagem fica em um programa, o recorte em outro, e a hierarquia precisa ser refeita depois da importação. Este percurso usa um menu principal gótico escuro para mostrar quatro passos do VberAI Studio (não é o Google AI Studio): geração de imagem com IA, fatiamento no lugar, gravação no motor e uma pré-visualização do movimento.

Entrada: VberAI Studio.

1. Começar por um menu principal já composto

A origem é um menu já diagramado. O personagem fica à esquerda, STORY e ARENA à direita, e o fundo é uma noite de lua. A entrada é uma tela inteira, não um monte de ícones soltos.

Este passo é a geração de imagem. A ilustração e o menu entram como uma só imagem. O fatiamento, a gravação e a pré-visualização usam depois essa mesma imagem.

2. Fatiar no lugar e ficar com o fundo

Depois da separação, os botões, o personagem e os ícones de moeda saem do lugar. Resta só o fundo da noite, sem interface. Os elementos são recortados pelas coordenadas originais, e o fundo fica guardado à parte.

Exportar os PNG um a um no Photoshop perde a posição. O fatiamento no lugar guarda a posição relativa e o tamanho. Depois de importar, não é preciso alinhar as peças à mão contra o mockup. Os passos: fatiamento no lugar.

3. Engine MCP: gravar na cena atual do Unity

Os recursos fatiados seguem para o motor. A demonstração abre o painel Engine MCP. A instrução na tela é a frase em chinês 「把图层3写入当前 Unity 工程」. “图层3” é o nome do arquivo deste menu. O resumo aparece primeiro e, em seguida, cinco verificações:

• importar a ilustração gerada
• repor os elementos fatiados no lugar
• extrair um fundo limpo
• gravar o personagem na cena
• verificar a cena atual

Quando as cinco passam, o painel indica que a gravação terminou.

O destino é a cena atual do Unity. O layout segue o fatiamento, em vez de largar PNG sem nome numa pasta. Para continuar ligando botões e valores a partir do Cursor, use o mesmo Engine MCP. Instalação: instalar o Unity MCP.

4. Pré-visualizar o movimento na mesma tela

A pré-visualização usa as camadas recém-fatiadas. O fundo é a noite extraída, o personagem é a mesma ilustração, e STORY e ARENA são os botões fatiados. Ela avança e gira o cajado. Um feitiço sai da ponta, e os botões acendem no lugar de origem.

O balão de conversa no canto superior esquerdo fica parado. Não acompanha o personagem. É um controle fixo da interface.

As imagens paradas, depois de fatiadas, podem voltar ao mesmo fundo: um movimento para ver e os botões acendendo no lugar de origem. A navegação dos botões e os valores numéricos ainda precisam ser ligados no Unity, pelo Engine MCP ou por um script.

Que trabalho manual cada passo tira do caminho

Passo	O que se vê	Trabalho manual que substitui
Geração de imagem	Um menu gótico em tela cheia	Montar um mockup do zero
Fatiamento no lugar	Os elementos saem e só fica o fundo	Exportar cada botão como PNG no Photoshop
Engine MCP	As camadas entram na cena atual do Unity	Refazer a hierarquia depois de importar
Pré-visualização	O mesmo personagem e os mesmos botões movem-se no fundo original	Fazer uma demo com outro material

Limites

• A demonstração usa só este menu. A qualidade do fatiamento depende da nitidez da origem e de os limites dos controles serem legíveis.
• O painel MCP mostra uma gravação concluída e verificações aprovadas. A navegação e o acerto dos valores ainda pedem lógica na cena do Unity.
• A pré-visualização usa esta ilustração e os botões fatiados. São as mesmas camadas do menu acima.

Para fechar

Uma tela pode ficar num único percurso: gerar a imagem, fatiar no lugar, gravar no Unity e pré-visualizar essas mesmas camadas em movimento. Entrada: AI Studio.