Normal Map 2D: Luz Dinâmica no Sprite com Laigter

Normal map 2D é uma imagem extra, do tamanho do sprite, que diz à engine para onde cada pixel da superfície aponta. Com ela, uma luz 2D que passa ao lado do personagem ilumina a lateral voltada para a luz e deixa o outro lado no escuro, em tempo real, sem você desenhar uma versão do sprite para cada posição da luz. Dá para gerar esse mapa de graça com o Laigter em poucos minutos, e as duas engines mais usadas por indie (Godot e Unity) leem o resultado.

Este post mostra o que o normal map faz, o passo a passo no Laigter, quando pintar à mão no Aseprite, como aplicar na Godot e na Unity, e o ponto que quase ninguém conta: quando o normal map estraga a pixel art em vez de ajudar.

Normal map 2D: o que é e o que faz com a luz

Num sprite comum, a luz e a sombra estão pintadas na arte. Se você pintou a luz vindo de cima à esquerda, ela vem de cima à esquerda para sempre. Uma tocha à direita do personagem não muda nada.

O normal map guarda, em cada pixel, a direção da superfície em três números, um por canal de cor:

• Vermelho (R): quanto a superfície aponta para a direita ou para a esquerda.
• Verde (G): quanto aponta para cima ou para baixo.
• Azul (B): quanto aponta para fora da tela, na direção de quem olha.

Uma superfície totalmente plana, virada para a câmera, tem a cor (128, 128, 255): o lilás claro característico dos normal maps. Uma borda que aponta para a direita puxa para o vermelho; uma que aponta para cima puxa para o verde.

A engine compara essa direção com a posição da luz. Pixel virado para a luz recebe mais luz; pixel virado para o outro lado recebe menos. O sprite ganha volume que reage à cena: tochas, explosões, lanternas, luz de janela.

Sprite normal map com Laigter passo a passo

O Laigter é uma ferramenta grátis e open source (licença GPL-3.0) que gera normal, specular, occlusion e parallax maps a partir do sprite. Está ativo: a versão 1.14.0 saiu em agosto de 2026, e o download fica no itch.io (grátis, com opção de pagar quanto quiser) e nos releases do GitHub. A interface tem tradução para português do Brasil.

1. Importe o sprite. Use Import e abra o PNG do sprite (ou a sprite sheet inteira). O Laigter trabalha com transparência, então o fundo do PNG precisa ser transparente.
2. Abra os controles de Normal. Os principais são:
   • Enhance: aumenta a intensidade do relevo.
   • Bump com Soft e Abrupt: controla o relevo dos detalhes internos e se a transição é suave ou dura.
   • Invert x e Invert y: invertem a direção nos eixos.
   • Pixelated: mantém o normal map em blocos de pixel, essencial para pixel art.
3. Teste com luz. Use Add Light e clique na pré-visualização para colocar luzes. Mova a luz em volta do sprite. Se o relevo parece exagerado (o sprite vira uma almofada inflada), baixe o Enhance.
4. Exporte. No Export, marque Normal em Maps to Export. O arquivo sai com o sufixo _n (ex.: rocha_n.png). Se a pré-visualização da engine mostrar a luz vindo de baixo quando ela está em cima, volte e ligue Invert y nos controles de Normal antes de exportar de novo.

Sprite sheet funciona do mesmo jeito: o Laigter gera um normal map do mesmo tamanho da folha, e cada frame recebe o seu pedaço no mesmo lugar. A engine usa as mesmas coordenadas para as duas imagens.

Pintar normal map à mão: quando vale

Para pixel art pequena (16x16, 32x32), o gerado automático costuma ficar com relevo que não tem nada a ver com o desenho, porque o Laigter estima o relevo pela claridade dos pixels e não sabe que aquele pixel escuro é contorno e não um buraco. Nesses casos, pintar à mão no Aseprite dá mais controle e leva pouco tempo.

Crie uma camada nova por cima do sprite e use uma paleta de 5 cores de direção (convenção em que o verde forte aponta para cima):

Pinte cada face do sprite com a cor da direção para onde ela aponta, como se fosse um modelo de papel com poucas faces. Em pixel art, 5 a 9 cores (acrescentando as diagonais) bastam. Exporte só essa camada como PNG, com o mesmo tamanho do sprite. O resultado é seco, sem degradê, e conversa com o estilo da arte.

Vale pintar à mão quando: o sprite é pequeno, o estilo é chapado, ou o gerador interpreta o contorno como relevo. Vale gerar quando: a arte é pintada ou em alta resolução, e você tem dezenas de sprites para processar.

No Krita, o mesmo processo funciona com a ferramenta de pincel em modo sem antialiasing; no LibreSprite, no Pixelorama e no Piskel, é só uma camada nova com a paleta de direções.

Normal map é a parte fácil. Fazer a luz dinâmica conversar com a luz pintada, com a paleta e com o resto da cena, sem o jogo virar uma vitrine de efeito, é decisão de arte que pesa quando você está sozinho no projeto. O curso de Arte 2D trabalha luz, sombra e paleta como um conjunto, pensando no jogo inteiro e não num sprite isolado.

Aplicando na Godot: CanvasTexture e luz 2D

Na Godot 4, o normal map entra por um recurso CanvasTexture:

1. Selecione o Sprite2D e, na propriedade Texture, crie um New CanvasTexture.
2. Expanda o recurso. Em Diffuse > Texture, coloque o PNG do sprite. Em Normal Map > Texture, coloque o _n.png.
3. Opcional: em Specular, uma textura de brilho e os ajustes de Color e Shininess.
4. Adicione uma PointLight2D na cena e dê a ela uma Texture (um GradientTexture2D radial resolve).
5. A documentação oficial avisa que, com normal map ligado, as luzes parecem mais fracas. Aumente a propriedade Height da PointLight2D e, se precisar, a Energy.

Para pixel art, o CanvasTexture tem a própria opção Texture > Filter: deixe em Nearest ou herdando o padrão do projeto. O resto da iluminação (sombras, oclusores, luz ambiente) está no post de iluminação 2D no Godot 4.

Aplicando na Unity: Secondary Texture e Light 2D do URP

Na Unity 6.3, a luz 2D vem do URP com o 2D Renderer (o template 2D do Unity 6 já vem assim). Pela documentação oficial:

1. Importe o normal map. Arraste o _n.png para o Project e, no Inspector, mude Texture Type para Normal Map.
2. Confira o material. O Sprite Renderer precisa de um material que aceite texturas secundárias, como o Sprite-Lit-Default, que é o padrão.
3. Associe ao sprite. Selecione a textura do sprite, abra o Sprite Editor, troque no dropdown para Secondary Textures, clique em +, escolha _NormalMap no campo Name e arraste o normal map para o campo Texture. Clique em Apply.
4. Ligue na luz. Adicione uma Light 2D (por exemplo, Spot) e, na seção Normal Maps do Inspector, troque a qualidade de Disabled para Fast ou Accurate. Accurate é mais preciso e mais caro.

Dois avisos práticos: a Global Light não usa normal map, então a cena precisa de luzes locais para o efeito aparecer; e luz com normal map custa mais processamento que luz simples, o que pesa em celular. Use em sprites que importam, não em todos.

Pixel art iluminação dinâmica: quando não usar

Normal map não melhora qualquer arte. Situações em que ele atrapalha:

• Sprite muito pequeno. Em 16x16, o volume gerado vira ruído. A luz pintada à mão comunica mais.
• Arte com luz forte já pintada. Se o sprite tem luz pintada de cima e a tocha está embaixo, você tem duas luzes brigando. Para usar normal map, pinte o sprite com sombreamento mais neutro e deixe a luz para a engine. O post de sombreamento em pixel art mostra como controlar a luz pintada.
• Estilo chapado ou 1 bit. Luz dinâmica com gradiente quebra a proposta visual.
• Jogo sem fonte de luz que se mova. Se a luz da cena nunca muda, pintar a luz custa menos e fica mais bonito.

Onde ele brilha: cenários escuros com tochas, cavernas, jogos de stealth com lanternas, efeitos de explosão que iluminam o ambiente, ciclo de dia e noite.

Erros comuns: relevo exagerado e normal invertida

Relevo exagerado. Enhance alto deixa tudo "inflado". Baixe até o relevo aparecer só quando a luz passa rente.

Normal invertida. Luz de cima ilumina a parte de baixo. Ligue Invert y nos controles de Normal do Laigter e exporte de novo.

Tamanho diferente do sprite. Normal map com 1 pixel a mais desalinha tudo. As duas imagens precisam ter exatamente o mesmo tamanho.

Normal map com filtro suave em pixel art. Gera brilho borrado. Use o modo Pixelated no Laigter e filtro Nearest ou Point na engine.

Esquecer a altura da luz na Godot. O efeito parece fraco ou some. Aumente o Height.

Tudo com normal map. Pesa no desempenho e cansa o olho. Escolha os elementos que interagem com a luz.

Próximo passo

Pegue um sprite de cenário (uma pedra, uma parede, um baú), gere o normal map no Laigter com o modo Pixelated, e monte uma cena escura com uma luz que segue o mouse na engine que você usa. Compare com uma versão do mesmo sprite com normal map pintado à mão. Depois leia o post de iluminação 2D no Godot 4 para juntar sombra e clima na cena.