Voltar para o Blog
Quest Log

Iluminação de Cenário em Pixel Art: Noite, Tocha e Luz

Mesma cena de pixel art de uma vila em três versões: dia, noite azulada e interior iluminado por tocha

Pixel art iluminação de cenário: a mesma tela em dia, noite e interior com tocha no Aseprite, com troca de paleta, raio de luz em degraus e luz 2D da engine.

Ferramenta:Aseprite

Iluminação de Cenário em Pixel Art: Noite, Tocha e Luz

Pixel art iluminação de cenário se resolve com dois tipos de luz: a luz ambiente, que você controla trocando a paleta inteira (dia, noite, interior), e a luz local, que você desenha em círculos de cor em degraus em volta de cada fonte, como uma tocha ou uma janela. Escurecer a cena com preto não é iluminação, é sujeira.

Aqui você pega uma mesma tela de cenário e pinta três versões no Aseprite: dia, noite e interior com tocha. No fim, vê quando faz sentido pintar a luz no sprite e quando vale deixar para a luz 2D da Godot ou da Unity.

Pixel art iluminação: luz ambiente e luz local

Antes de pintar, separe os dois conceitos.

Luz ambiente é a luz que banha a cena inteira: o sol do meio-dia, o luar, a penumbra de uma caverna. Ela define a temperatura (quente ou fria) e o nível geral de valor (claro ou escuro). Em pixel art, a forma mais limpa de mudar a luz ambiente é trocar a paleta, porque cada cor do cenário ganha uma versão própria naquela luz.

Luz local é a luz que sai de uma fonte específica e ilumina só o que está perto: tocha, fogueira, janela, cristal mágico, olho de um inimigo. Ela cria um ponto de foco e quebra a monotonia da luz ambiente.

Toda cena bem iluminada tem uma regra para cada uma: de onde vem a ambiente (o céu, uma janela grande) e quais são as fontes locais. Sem essa decisão, aparece o erro clássico de luz sem fonte, um brilho no meio da parede que não vem de lugar nenhum.

Para o exercício, use uma tela de cenário simples: uma rua com duas casas, uma árvore, chão de pedra e céu. Tamanho de 320x180 pixels, que escala exatamente 6 vezes para 1920x1080. Desenhe primeiro a versão de dia, com uma paleta de cerca de 16 cores. Se ainda não tem paleta, o guia de paleta de cores para pixel art mostra como montar uma com rampas.

Cena noturna em pixel art: paleta fria e valor baixo

A noite não é o dia mais escuro. É o dia com outra luz. Três mudanças fazem a noite:

  1. Valor mais baixo no geral. Todos os tons descem, mas não para o preto. O tom mais escuro da noite ainda tem cor.
  2. Matiz puxando para frio. Os tons claros viram azul ou roxo. O verde da árvore vira um verde-azulado escuro, o telhado vermelho vira um vinho dessaturado.
  3. Contraste menor no cenário. A distância entre claro e escuro diminui, o que deixa espaço para as luzes locais brilharem.

Como fazer no Aseprite, trocando a paleta:

  1. Duplique o sprite do dia (File > Save As com outro nome) para ter um arquivo da noite.
  2. Converta para modo indexado em Sprite > Color Mode > Indexed. Assim cada pixel aponta para uma posição da paleta.
  3. No painel de paleta, edite cada cor (duplo clique no swatch). Em modo indexado, mudar a cor de uma posição da paleta muda todos os pixels que usam essa posição de uma vez.
  4. Para cada cor do dia, escolha a versão noturna: menos clara, mais fria e menos saturada.
  5. Deixe o céu um pouco mais claro que as silhuetas das casas e da árvore. É isso que mantém a leitura dos contornos.

A vantagem: a arte é a mesma, só a paleta mudou. Se você corrigir um pixel na versão de dia, basta copiar o desenho e reaplicar a paleta noturna. Para trocar uma cor específica em modo RGB, Edit > Replace Color (Shift+R) faz o mesmo para uma cor por vez.

Tocha e fogueira: raio de luz em degraus

A luz local em pixel art costuma ser desenhada em degraus, não em degradê suave. Degradê suave pede dezenas de cores. Degraus usam 2 ou 3.

Passo a passo para uma tocha na parede da versão noturna:

  1. A chama. 3 a 5 pixels de altura, com o centro no tom mais claro da paleta (quase branco amarelado), depois amarelo, depois laranja na borda. Ela é o ponto mais claro da cena inteira.
  2. Primeiro anel. Em volta da chama, um círculo de uns 12 a 16 pixels de raio. Dentro dele, troque cada cor do cenário pela versão um degrau mais clara e mais quente. A pedra azulada da parede vira uma pedra acinzentada.
  3. Segundo anel. Um círculo maior, de uns 24 a 32 pixels de raio. Aqui a troca é mais leve: só um pouco mais quente que a cor noturna original.
  4. Borda. Na transição entre anéis, um pouco de dithering (pixels alternados em xadrez) suaviza o degrau, se o estilo do jogo aceitar dithering. Se não aceitar, deixe a borda seca.

O anel não precisa ser um círculo perfeito. A luz bate mais forte em superfícies viradas para a tocha e some atrás de objetos. Uma caixa na frente da tocha projeta sombra para fora do círculo, e esse detalhe vende a luz.

Para a fogueira no chão, a mesma lógica, com o círculo achatado na horizontal (elipse), porque a luz se espalha no chão mais do que sobe na parede.

Luz ambiente pixel art com camadas de cor no Aseprite

Trocar a paleta dá o resultado mais limpo, mas é lento para testar. Para experimentar a luz antes de repintar, use camadas com modo de mesclagem.

O Aseprite tem modos de camada que você acessa nas propriedades da camada (duplo clique no nome da camada ou Layer > Properties, Shift+P): Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity, Addition, Subtract e Divide. A opacidade da camada fica na mesma janela, de 0 a 255.

Montagem rápida para testar a noite e a tocha:

  1. Camada noite, modo Multiply, preenchida inteira com um azul-arroxeado médio. Opacidade em torno de 180. A cena inteira escurece e esfria.
  2. Camada tocha, modo Addition ou Color Dodge, com dois círculos laranja de opacidade baixa em volta da chama. A área perto da chama clareia e esquenta.
  3. Camada ambiente, modo Overlay ou Soft Light, com um tom de cor para ajustar o clima geral. Ótima para o interior, com um laranja leve.

O problema: esses modos geram cores que não estão na sua paleta, e em pixel art isso costuma aparecer como pixels de tons quase iguais, que deixam a arte suja. Use as camadas para decidir a luz, depois achate e repinte com as cores da paleta, ou use a captura como referência para montar a paleta noturna.

Para a versão de interior com tocha, combine as duas técnicas: a paleta do interior é escura e quente na luz ambiente (madeira, pedra, penumbra amarronzada) e cada tocha recebe os anéis em degrau.

Pintar uma cena bonita de noite é um passo. Manter essa luz coerente em todo o tileset, nos personagens que passam por ela, nos inimigos e nos efeitos, e ainda decidir o que fica pintado e o que a engine calcula, é o tipo de decisão que trava quem está fazendo o jogo sozinho. Um curso de arte 2D para jogos ensina essas escolhas em ordem, do primeiro tile ao cenário montado na engine.

Curso de Arte 2D
Quer fazer a arte do seu jogo?

No curso de Arte 2D para Jogos da CursoGame.Dev você vai do rabisco ao portfólio: personagens, cenários, tilesets, UI e animação, sem precisar saber desenhar.

Conhecer o curso de Arte 2D
Suporte no WhatsAppAcesso vitalícioGarantia de 7 dias

Luz pintada vs luz 2D da engine

A pergunta que todo projeto enfrenta: a luz fica no sprite ou é calculada pela engine?

Pinte no sprite quando:

  • A luz não muda nunca: a direção do sol numa fase diurna, a sombra de um prédio, o brilho fixo de uma janela.
  • Você quer controle total sobre cada pixel e uma paleta fechada.
  • O jogo é estilo retrô e a luz dinâmica quebraria o visual.

Use a luz da engine quando:

  • A luz se move: a lanterna que o jogador carrega, o projétil de fogo.
  • A luz varia no tempo: ciclo de dia e noite, lâmpada piscando, raio de tempestade.
  • O mesmo cenário aparece em várias situações e você não quer desenhar uma versão para cada.

Na Godot, a luz 2D usa nós próprios. O CanvasModulate escurece e tinge a cena inteira (é a sua luz ambiente noturna) e o PointLight2D adiciona uma luz local a partir de uma textura, com modo de mistura Add (padrão), Subtract ou Mix. Uma textura de luz em degraus feita no próprio Aseprite mantém o estilo pixel art. O passo a passo está no guia de iluminação 2D na Godot 4.

Na Unity, a luz 2D vem do URP com o 2D Renderer. Pelo menu de luz da Hierarchy você cria Global Light 2D (a luz ambiente), Spot Light 2D (a luz local em círculo ou cone), Freeform Light 2D (formato poligonal editável) e Sprite Light 2D (a luz tem o formato de um sprite, ótimo para usar a sua textura de tocha em degraus).

A combinação mais comum: paleta da cena pintada para a luz ambiente principal e luz da engine só nas fontes que se movem ou piscam.

Erros comuns: escurecer com preto e luz sem fonte

Escurecer com preto. Uma camada preta por cima deixa a noite cinza e morta. Correção: noite é azul ou roxo escuro, com cor nos tons mais escuros.

Luz sem fonte. Um brilho na parede sem tocha, janela ou objeto que o explique. Correção: para cada área clara, aponte de onde vem a luz.

Degraus demais. Seis anéis de luz em volta de uma tocha parecem um alvo de tiro. Correção: 2 ou 3 degraus, com a luz perdendo força rápido.

Fonte de luz não sendo o ponto mais claro. Se o céu é mais claro que a chama, a tocha parece apagada. Correção: o ponto mais claro da cena é a fonte de luz.

Sombra que ignora a luz local. A tocha está à esquerda e a caixa ao lado dela tem sombra para a esquerda. Correção: perto de uma fonte local, a sombra aponta para longe dela, como explica o guia de sombreamento em pixel art.

Próximo passo

Pegue a sua tela de 320x180 e faça as três versões: dia, noite com paleta trocada em modo indexado e interior com duas tochas em degraus. Coloque as três lado a lado e confira se o personagem continua visível em todas. Depois, monte a versão noturna na engine que você usa com uma luz local, e compare com a tocha pintada. Você vai ver na prática onde cada abordagem ganha.

Perguntas frequentes

Como fazer uma cena noturna em pixel art?

Troque a paleta do cenário por uma versão fria e de valor mais baixo, com os tons claros puxando para azul ou roxo, em vez de só escurecer com preto. Deixe o céu um pouco mais claro que as silhuetas para manter a leitura. Depois acrescente fontes de luz pontuais, como janelas e tochas, que viram o ponto mais claro da cena.

Como desenhar a luz de uma tocha em pixel art?

Desenhe círculos concêntricos em volta da chama, cada um com um tom um pouco mais claro e quente que a cor da superfície, formando degraus. Dois ou três degraus bastam. A chama é o ponto mais claro da tela, e a luz perde força rápido conforme se afasta.

É melhor pintar a luz no sprite ou usar a luz 2D da engine?

Pinte no sprite a luz que não muda, como a direção do sol e a sombra de um prédio. Use a luz 2D da engine para o que se move ou varia, como a tocha que o jogador carrega, o piscar de uma lâmpada ou o ciclo de dia e noite. A maioria dos jogos combina os dois.

Quais modos de camada do Aseprite servem para luz?

Multiply escurece para sombra e noite, Screen, Addition e Color Dodge clareiam para brilho, e Overlay e Soft Light tingem a cena com uma cor de ambiente. O Aseprite tem esses modos nas propriedades da camada. Em pixel art com paleta fechada, use os modos para testar e depois repinte com cores da paleta.