Sombreamento em Pixel Art: Luz e Sombra sem Erro

Dá para desenhar uma silhueta perfeita e mesmo assim o sprite parecer chapado, sem peso, como um adesivo colado na tela. O que falta quase sempre não é forma nem cor, é volume. E volume em arte 2D vem de uma coisa só: sombreamento. É a maneira como você distribui luz e sombra pela superfície que avisa ao olho onde aquilo é redondo, onde é plano, o que está pra frente e o que está pra trás. Este guia é sobre sombreamento em pixel art do começo ao fim: como definir a fonte de luz, separar os planos de luz e sombra, montar rampas de cor, fugir do pillow shading, aplicar hue shift e saber quantos tons usar sem complicar.

Vou tratar luz e sombra como o assunto principal, não como um detalhe de acabamento. Na prática é o contrário do que muito iniciante faz: desenha, pinta a cor base e só no fim tenta "dar uns sombreados" meio no chute. O resultado disso é o sprite plano. Sombreamento se planeja antes, e começa por uma decisão única que governa todas as outras.

A fonte de luz vem antes de qualquer pixel

Antes de escurecer um único pixel, decida de onde a luz vem. Ela pode vir de cima e um pouco da esquerda, que é a escolha padrão e mais segura, ou de qualquer outro ângulo que o seu jogo peça. O importante é que exista uma direção e que ela não mude de um sprite pro outro sem motivo.

Essa decisão parece pequena e é a mais importante de todas. Tudo o que vem depois (onde cai a luz, onde cai a sombra, onde fica o brilho) é consequência direta dela. Se você não fixa a fonte de luz, cada parte do sprite acaba iluminada de um jeito, e o olho percebe que algo está errado mesmo sem saber dizer o quê.

Uma regra prática: imagine uma seta saindo da fonte de luz em direção ao sprite. As superfícies que essa seta atinge de frente ficam claras. As que estão de costas pra ela, ou escondidas atrás de outra parte, ficam escuras. É literalmente isso. Você não está inventando sombra, está rastreando para onde a luz consegue e não consegue chegar.

Num jogo de plataforma com luz vindo de cima, o topo da cabeça do personagem, os ombros e a parte de cima dos objetos recebem luz. O queixo, a parte de baixo dos braços e o chão sob os pés ficam na sombra. Fixe isso na cabeça e metade do trabalho de sombreamento já está decidido.

Planos de luz e sombra: pense em volumes, não em contornos

O segundo passo é parar de enxergar o sprite como um desenho de linha e começar a enxergar como um conjunto de volumes. Uma cabeça é uma esfera. Um tronco é um cilindro ou uma caixa. Um braço é um tubo. Cada um desses volumes tem lados que olham pra luz e lados que olham pra longe dela.

Sombreamento é, no fundo, dividir cada volume em planos. O plano que encara a fonte de luz é o plano de luz. O plano que está virado pro lado contrário é o plano de sombra. Entre eles existe o meio-tom, que é a cor base, a parte da superfície que pega luz de raspão.

Pensar em planos resolve o maior problema do iniciante, que é não saber onde a sombra começa. A sombra não é uma faixa decorativa na beirada. Ela começa exatamente onde o volume vira pro lado oposto da luz. Numa esfera iluminada de cima, a metade de baixo escurece de forma curva, acompanhando o giro da superfície. Numa caixa, a mudança é dura, com uma linha nítida separando a face de cima iluminada da face lateral na sombra.

Existe ainda a sombra projetada, que é diferente da sombra do próprio volume. É a sombra que o objeto joga no chão ou na parede atrás. Ela ajuda a plantar o sprite no cenário, a dizer que ele toca o chão em vez de flutuar. Mesmo uma sombra projetada simples, uma mancha escura embaixo dos pés, muda a sensação de peso.

Rampas de cor: do claro ao escuro em passos controlados

Agora a parte técnica da cor. Uma rampa é a sequência de tons que você usa pra pintar um material, ordenada do mais claro ao mais escuro. Para uma pele, por exemplo, você teria o brilho, a luz, a cor base, a sombra e talvez a sombra funda, nessa ordem de valor.

Montar a rampa antes de pintar deixa o processo mecânico e consistente. Em vez de escolher a cor da sombra no olho toda vez que precisa dela, você já tem a rampa pronta e só vai pescando o tom certo. Isso mantém o sprite inteiro coerente e acelera muito o trabalho, principalmente quando você tem dezenas de sprites pra fazer no mesmo estilo.

A relação entre rampa e sombreamento é direta: o plano de luz usa um tom claro da rampa, o meio-tom usa a cor base e o plano de sombra usa um tom escuro. Você não está pintando com cores soltas, está aplicando posições de uma rampa de acordo com onde a luz bate. Se quiser aprofundar como essas cores se relacionam entre si, a lógica de matiz, saturação e valor está detalhada no guia de paleta de cores em pixel art, que é o complemento natural deste texto.

Um cuidado: evite que o salto entre um tom e o próximo seja grande demais ou pequeno demais. Salto grande demais cria um degrau berrante na superfície. Pequeno demais some na tela e você gastou um tom à toa. O ajuste é no olho, testando no tamanho real em que o sprite vai aparecer no jogo, nunca com zoom gigante.

Hue shift: a sombra não é a cor base escurecida

Aqui está a técnica que mais transforma o resultado. Quando a maioria pega a cor base e precisa da sombra, ela só arrasta o valor pra baixo, deixa a mesma cor mais escura. Funciona, mas sai apagado, meio sujo.

O que artistas experientes fazem é girar o matiz junto com o valor. Na sombra, além de escurecer, você empurra o matiz pra tons mais frios, na direção do azul ou do roxo. Na luz, além de clarear, você empurra o matiz pra tons mais quentes, na direção do amarelo ou do laranja. Isso é o hue shift, e ele imita como a luz se comporta no mundo real, onde a sombra raramente é só uma versão escura da cor, ela ganha a influência da luz ambiente ao redor.

O efeito é imediato: a imagem ganha vida e os tons passam a conversar entre si. Uma pele que na sombra puxa pro roxo e na luz pro amarelo parece viva. A mesma pele só escurecida e clareada parece de plástico. Não precisa exagerar no giro; alguns graus de matiz já mudam tudo. E o hue shift aplicado de forma consistente em todos os materiais é parte do que dá unidade visual ao jogo inteiro.

Specular: o brilho que indica material

O brilho especular é o ponto mais claro da superfície, onde a luz reflete direto no olho de quem vê. Ele não aparece em tudo. Uma superfície fosca, como pano ou pele seca, quase não tem brilho. Uma superfície lisa, como metal, vidro, olhos ou uma armadura polida, tem um specular forte e pequeno.

Usar o specular com inteligência é o que faz o material ser lido. O mesmo formato de sprite com um brilho duro e concentrado vira metal; com o brilho espalhado e suave, vira algo mais macio. O erro é botar brilho em tudo igual, o que apaga essa diferença e deixa todas as superfícies com a mesma textura.

Em pixel art o specular costuma ser um punhado de pixels, às vezes um só, no ponto da superfície mais virado pra fonte de luz. Por ser o tom mais claro da rampa, ele puxa o olhar, então use isso a seu favor: coloque o brilho onde você quer que o jogador olhe primeiro.

Pillow shading: o erro clássico e como fugir dele

Chegamos ao erro que praticamente todo mundo comete no começo. Pillow shading é quando você sombreia seguindo a borda do sprite: o miolo fica claro e as beiradas escurecem de forma simétrica por todos os lados, como se cada objeto fosse um travesseiro iluminado bem de frente.

O motivo de parecer errado é simples: o pillow shading ignora a fonte de luz. Como a sombra acompanha o contorno em vez de acompanhar o volume, nenhuma direção de luz fica clara, e o cérebro não consegue montar a forma tridimensional. Tudo vira uma série de almofadas infladas, todas com o mesmo formato, nenhuma com peso real.

A correção é voltar ao primeiro tópico. Escolha uma fonte de luz e sombreie o lado oposto a ela, não a borda inteira. Se a luz vem de cima e da esquerda, a sombra se concentra embaixo e à direita, e ponto. O lado iluminado pode até encostar na borda, e tudo bem. A sombra deixa de ser uma moldura e passa a ser a consequência de onde a luz não chega.

Um teste rápido pra flagrar o pillow shading no seu próprio sprite: olhe se a parte de cima e a de baixo estão escurecidas do mesmo jeito. Se estão, você está sombreando o contorno, não o volume. Com luz vindo de cima, o topo deveria estar claro e só a base escura.

Vale também não confundir sombreamento com ruído. Jogar pixels escuros espalhados pra "dar textura" costuma sujar a leitura em vez de dar volume. Volume vem de planos claros e escuros bem definidos, não de granulado aleatório. Esse mesmo cuidado com formas limpas aparece bastante na estética dos clássicos, como mostra o material sobre pixel art retrô dos jogos antigos, onde a limitação técnica obrigava os artistas a serem extremamente econômicos com cada pixel de sombra.

Pondo em prática no editor

Nada disso depende de ferramenta cara. Qualquer editor de pixel art serve, e o fluxo é o mesmo: desenhe a silhueta, preencha com a cor base, decida a fonte de luz, aplique o plano de sombra, aplique o plano de luz e, por último, pingue o specular. Deixar o brilho pro fim evita que você sombreie em cima dele e o perca.

Trabalhar com a paleta travada ajuda a manter a disciplina da rampa, e separar luz, sombra e brilho em camadas diferentes deixa você ajustar um sem bagunçar o outro. O hub do Aseprite reúne o que o editor oferece pra esse tipo de fluxo, e se você ainda está montando a base de pixel art antes de entrar no sombreamento, o guia completo de pixel art cobre a silhueta e a forma, que são o alicerce sobre o qual a luz e a sombra vão trabalhar.

Por fim, a dica que vale mais que qualquer técnica isolada: trabalhe no tamanho real. Sombreamento lindo com zoom de 800 por cento costuma sumir ou virar sujeira quando o sprite aparece pequeno no jogo. Afaste o zoom com frequência, olhe o sprite do tamanho que o jogador vai ver e ajuste a luz e a sombra pensando nesse olho final, não no seu olho de pintor colado na tela.