Todos os tutoriais

Como criar UI de jogo em pixel art com IA: HUD, ícones de itens e ícones de habilidades

Publicado em 4 de outubro de 2026

A UI é onde os jogos indie mais parecem "arte de programador": uma fonte padrão, um retângulo cinza como barra de vida, emoji para os itens do inventário. Uma boa UI em pixel art é um monte de peças pequenas que precisam combinar entre si e com o jogo.

Este tutorial cria uma UI de jogo em pixel art com IA completa na PixelVibing: um conjunto de HUD, uma fileira de ícones de itens, ícones de habilidades para uma hotbar e peças de menu personalizadas a partir de um rascunho.

Uma geração, seis peças que combinam, no visual de madeira de deriva e latão do jogo.

Parte 1: Um conjunto de HUD em uma geração

Um conjunto de HUD é desenhado de uma vez, então as peças compartilham um material, uma moldura e uma paleta:

• health-bar e mana-bar
• button
• inventory-slot
• panel-frame
• minimap-frame

Peça as seis, ou só as que você precisa, com um tema opcional:

pixel-vibing-cli generate hud --instruction "driftwood and brass, nautical" --yes
pixel-vibing-cli generate hud --pieces health-bar,mana-bar,button --yes

Pronto para nine-slice. Molduras, botões, slots e a moldura do minimapa vêm com margens de nine-slice, para você esticá-los até qualquer tamanho com o sprite nine-slice da sua engine, em vez de escalá-los e borrar a borda.

Parte 2: Ícones de itens e ícones de habilidades

Até dezesseis ícones que combinam, a partir dos nomes deles, em 16, 32 ou 64 px:

pixel-vibing-cli generate icons --names "health potion,mana potion,iron sword,gold coin,golden key,fire scroll" --purpose item --size 32 --yes

Escolha a finalidade:

Parte 3: UI personalizada a partir de um rascunho

Quando você precisa de peças que o conjunto de HUD não tem, como um anel de retrato, um painel de missões, uma bússola ou uma fileira de slots de hotbar em posições exatas, rascunhe o layout:

• Retângulos, retângulos arredondados, elipses e polígonos: até 16 formas em uma tela de 128 ou 256 px.
• Dê a cada forma uma nota ("uma barra de vida vermelha cheia") e, se ela mostrar texto, uma legenda desenhada exatamente como foi escrita ("Sair").
• Uma moldura vazada mantém o interior transparente, para o jogo aparecer por trás de uma janela.
• Uma largura de borda dá à peça margens de nine-slice.
• Adicione até três referências de estilo, como um material ou uma moldura de que você gosta, e o conjunto inteiro assume o visual delas.

A plataforma desenha o conjunto de uma vez e entrega cada peça recortada separadamente, com a posição dela, pronta para a sua engine. O rascunho funciona no app web, no Editor, na linha de comando e no servidor MCP.

Parte 4: Defina o visual antes (opcional)

Não sabe como o HUD deveria ser? Gere um mockup de HUD, uma tela com a interface inteira, para fechar o estilo, e depois tire as peças dele no Editor:

pixel-vibing-cli generate hud-mockup --instruction "a cozy fishing game HUD with a day clock and a catch counter" --yes

Dicas de UI

1. Desenhe os números no código. A arte gerada não traz texto nem números (tirando as legendas de um rascunho), então valores de vida, contadores e rótulos continuam nítidos e traduzíveis.
2. Combine o HUD com o mundo. Cite um material do seu jogo ("madeira de deriva", "ferro enferrujado", "jade e ouro") em vez de "UI de fantasia".
3. Um tamanho de ícone por tela. Misturar ícones de 16 px e 32 px no mesmo inventário fica estranho.

Perguntas frequentes

Os ícones combinam com os meus sprites? Sim. Eles são desenhados a partir do guia de estilo do seu jogo, como todos os outros assets.

Consigo estados de botão? Sim. Em um rascunho, três botões com as notas normal, pressed e disabled voltam como um único botão nos seus três estados.

Posso usar comercialmente? Sim, o que você cria é seu.

Próximo: dê um acabamento à mão em qualquer parte. Leia Como editar pixel art de IA no Editor da PixelVibing.