Ícones de Habilidade: Como Desenhar Skill Icons Legíveis

Ícones de habilidade bons se leem em meio segundo, no canto da tela, durante uma luta. Para isso, cada ícone tem um símbolo só, uma silhueta que não se confunde com a dos outros, uma cor ligada ao tipo de habilidade e a mesma moldura do resto do conjunto. Todo o resto (textura, brilho, detalhe) é secundário e muitas vezes atrapalha.

Este tutorial mostra como desenhar skill icons em 32x32 (pixel art, no Aseprite) e 64x64 (pintado, no Krita), definir cores por tipo sem depender só de cor, desenhar os estados de disponível, recarga e bloqueado, e testar o ícone na barra do HUD em tamanho real, que é onde a maioria dos ícones bonitos falha.

Ícones de habilidade: o ícone tem que ler em meio segundo

O jogador olha para a barra de habilidades com o canto do olho, enquanto acompanha o personagem. Ele não lê o ícone; ele reconhece o ícone. Reconhecimento vem de três coisas, nesta ordem:

1. Silhueta: a forma geral do símbolo (chama, gota, escudo, raio).
2. Cor dominante: o tipo da habilidade.
3. Posição: a habilidade 1 está sempre no mesmo slot.

Detalhe interno vem bem depois. Um ícone com uma espada cheia de gravuras, num slot de 48 pixels de tela, vira uma mancha cinza. O mesmo ícone com a espada em silhueta clara sobre fundo escuro se lê de longe.

Para comparar: o guia de HUD e ícones em pixel art no Aseprite cobre ícones de status (coração, moeda, escudo), que são poucos e fixos. Ícone de habilidade tem um problema diferente: são muitos, parecidos entre si (várias magias de fogo, vários golpes de espada), e o jogador precisa diferenciar todos.

Um conceito por ícone

Escreva uma frase para cada habilidade antes de desenhar e escolha um símbolo para ela:

Repare que bola de fogo e chuva de meteoros são do mesmo elemento, mas os símbolos têm silhuetas diferentes: uma é uma forma redonda, a outra são linhas diagonais. A cor diz "fogo"; a forma diz qual fogo.

Evite o ícone que tenta contar a habilidade inteira (um mago lançando uma bola de fogo num inimigo). Em 64x64 isso são três figuras minúsculas; em 32x32 é ruído.

Silhueta e contraste

Teste da silhueta preta. Duplique o conjunto de ícones e pinte cada símbolo de preto sólido, sem a moldura. Se dois ícones viram a mesma mancha, eles vão se confundir no jogo. No Krita, numa cópia da camada do símbolo, ligue o bloqueio de alfa (o ícone de alfa na linha da camada, no docker Layers) e pinte tudo de preto com um pincel grande; no Aseprite, selecione o símbolo com a Magic Wand (W) e preencha.

Contraste de valor. O símbolo precisa ser bem mais claro (ou bem mais escuro) que o fundo do ícone. Um fogo laranja médio sobre fundo vermelho médio desaparece. Regra prática: fundo escuro e dessaturado, símbolo claro e saturado. Para conferir, veja o conjunto em escala de cinza: no Krita, uma camada de filtro de dessaturação por cima de tudo; no Aseprite, numa cópia do arquivo, Sprite > Color Mode > Grayscale.

Contorno. Em pixel art 32x32, um contorno escuro de 1 pixel em volta do símbolo separa o símbolo do fundo e vale cada pixel gasto. Em ícone pintado 64x64, um leve brilho ou uma borda escura em volta do símbolo cumpre o mesmo papel.

Fluxo no Krita para 64x64 pintado: crie o documento em 256x256, pinte o ícone com pincel grosso (o detalhe fino vai sumir na redução), e exporte reduzido para 64x64 em Image > Scale Image To New Size, com filtro bicúbico ou Lanczos. Antes de exportar, olhe o ícone em 100 por cento de zoom; o que não aparece nesse tamanho pode ser apagado.

Fluxo no Aseprite para 32x32: desenhe direto no tamanho final, com paleta limitada (8 a 12 cores para o conjunto inteiro). Não reduza pixel art desenhada grande: a redução borra e destrói o pixel.

Cor por tipo: fogo, cura, defesa

Defina uma tabela de cores por tipo antes de desenhar o primeiro ícone e use no conjunto inteiro:

Não dependa só da cor. Uma parte dos jogadores tem algum tipo de daltonismo, e os pares vermelho e verde são os mais confundidos. Cura verde e fogo vermelho, para essa pessoa, podem parecer dois ícones marrons. Reforce o tipo com forma:

• Moldura por tipo: cantos arredondados para suporte (cura, defesa), cantos retos para ataque.
• Selo de elemento: um símbolo pequeno e fixo no canto (gota para água, chama para fogo, folha para natureza).
• Silhueta própria: como já visto, cada símbolo com uma forma diferente.

O teste da escala de cinza do item anterior serve também para isso: se em cinza você ainda sabe qual é cura e qual é fogo, está seguro.

Moldura e fundo consistentes no conjunto

A moldura é o que transforma 20 desenhos soltos num conjunto. Defina uma vez e reaproveite:

• Mesma espessura de borda: 1 pixel em 32x32, 2 a 3 em 64x64.
• Mesmo ponto de luz: se o brilho do símbolo vem do canto superior esquerdo num ícone, vem de lá em todos.
• Mesma margem interna: o símbolo ocupa a mesma área de todos os ícones, deixando 2 a 3 pixels de respiro até a borda em 32x32.
• Fundo em gradiente simples ou chapado, nunca com cenário.

No Aseprite, desenhe a moldura numa camada própria e trave a camada; cada ícone novo é um frame com a mesma moldura e um símbolo diferente. No Krita, salve a moldura como um arquivo base e use File > Open numa cópia para cada ícone, ou mantenha todos num documento com grupos de camadas.

Um ícone desenhado sozinho sempre parece bom. O conjunto de 30 habilidades com a mesma luz, a mesma moldura e a mesma regra de cor é o que separa o HUD de um jogo pronto do HUD de um protótipo.

Manter consistência visual entre dezenas de peças (ícones, sprites, cenário e interface) é um trabalho de direção de arte, e é ele que faz um jogo indie parecer um produto e não uma colagem de assets.

Estados: disponível, cooldown, bloqueado

Desenhe ou planeje três estados para cada ícone. A boa notícia é que dois deles a engine faz sozinha a partir do ícone normal:

• Disponível: o ícone como você desenhou. Opcionalmente, um brilho na moldura quando a habilidade acabou de recarregar.
• Cooldown (recarga): o ícone normal com uma sobreposição escura e semitransparente que se esvazia em forma de relógio, mais um número com os segundos. Garanta que o símbolo continua reconhecível sob uns 50 por cento de escuro.
• Bloqueado: ícone dessaturado e escurecido, com um cadeado. O cadeado é um sprite separado, sobreposto.
• Sem recurso (opcional): ícone com tinta azulada ou vermelha quando falta mana ou energia.

Na Godot, um TextureProgressBar com Fill Mode em modo radial (sentido horário ou anti-horário) por cima do ícone faz o efeito de relógio, com a textura de progresso sendo um quadrado preto semitransparente. Para o bloqueado, a propriedade modulate do nó escurece o ícone. O post de árvore de habilidades na Godot mostra como ligar desbloqueio e ícone.

Na Unity, um Image de UI com Image Type em Filled e Fill Method em Radial 360 faz o relógio; você anima o fillAmount de 1 a 0 pelo script. O bloqueado vem de mudar a cor do Image para um cinza escuro e ativar o sprite do cadeado.

Erros comuns: ícones parecidos, detalhe que some em 32px

• Ícones parecidos. Três magias de fogo com a mesma bola de chama. Mude a silhueta (esfera, coluna, chuva), não só o tom.
• Detalhe que some em 32 pixels. Gravura na lâmina, olho no dragão, texto no pergaminho. Olhe em 100 por cento de zoom e apague o que não se lê.
• Cor como único sinal. Cura e dano diferenciados só por verde e vermelho. Acrescente forma ou selo.
• Luz vindo de lados diferentes. Cada ícone foi feito num dia e o conjunto parece bagunçado. Fixe o ponto de luz.
• Fundo com cenário. Um céu com nuvens atrás da espada rouba contraste do símbolo.
• Símbolo encostando na borda. Sem margem interna, a moldura e o símbolo se misturam.
• Testar só no editor. O ícone em 800 por cento de zoom engana. Teste no HUD.

Exportação e atlas

O teste final é sempre no jogo: coloque o ícone na barra de habilidades, rode o jogo na resolução alvo e olhe a barra a um braço de distância do monitor, com o personagem lutando. Se você precisa parar para identificar a habilidade, o ícone volta para a prancheta.

Para exportar:

• Aseprite: com cada ícone num frame, File > Export > Export Sprite Sheet gera uma folha única. Grade fixa (cada ícone numa célula do mesmo tamanho) facilita fatiar.
• Krita: exporte cada ícone como PNG com transparência e junte depois, ou desenhe todos numa folha com grade e exporte uma imagem só.

Na engine, agrupe os ícones num atlas para a interface não carregar dezenas de texturas separadas. Na Unity, crie um Sprite Atlas (Assets > Create > 2D > Sprite Atlas) e arraste a pasta de ícones para a lista de objetos empacotados. Na Godot, uma folha única com AtlasTexture para cada ícone resolve o mesmo problema.

Nomeie os arquivos pelo identificador da habilidade (skill_fireball.png, skill_heal.png), não pelo desenho (fogo_laranja_2.png). O código busca o ícone pelo nome da habilidade, e o nome do desenho muda quando você refaz a arte.

Próximo passo

Desenhe um conjunto de 6 ícones (2 de fogo, 2 de suporte, 2 físicos) com a mesma moldura, faça o teste da silhueta preta e o da escala de cinza, e coloque na barra de um protótipo. Depois de o conjunto passar no teste do braço de distância, leia o guia de UI e UX de jogos para encaixar a barra no resto da interface.