Valor Tonal: o Teste em Preto e Branco da Arte de Jogo

Valor tonal é o quanto uma cor é clara ou escura, e é ele, mais que a cor, que faz o jogador enxergar o que importa na tela. O teste é simples: tire a cor da cena e veja se personagem, inimigo, plataforma e fundo continuam separados. Se continuam, a arte lê. Se algum some, nenhuma troca de matiz vai salvar.

Aqui você aplica o teste em preto e branco numa cena de jogo no Krita, organiza a cena em 3 faixas de valor e aprende a corrigir só o valor, sem jogar fora a paleta que você já montou.

Valor tonal: o que é e por que vem antes da cor

Toda cor tem três componentes: matiz, saturação e valor. O guia de teoria das cores para jogos explica os três. Aqui o foco é o terceiro.

O motivo de o valor vir antes: a visão separa formas principalmente por diferença de claro e escuro. Em jogo isso pesa mais, porque o jogador olha a tela por frações de segundo, os elementos estão em movimento e muitas vezes pequenos. Ele não analisa a cor de cada coisa, ele vê manchas claras e escuras e decide.

Dois exemplos que acontecem em todo projeto iniciante:

• Um personagem vermelho num gramado verde. Parece contrastado. Mas se o vermelho e o verde têm o mesmo valor médio, em escala de cinza os dois viram a mesma mancha.
• Uma plataforma de pedra cinza num fundo de montanha cinza-azulada. A cor é parecida e o valor também. O jogador pula e erra, porque não sabe onde a plataforma termina.

Nos dois casos, a pergunta certa não é "qual cor usar", é "qual faixa de claro e escuro cada coisa ocupa".

Teste grayscale: camada de filtro no Krita

O jeito mais prático no Krita é uma camada de filtro que fica sempre no topo e você liga e desliga.

1. No docker de camadas (Layers), clique na pequena seta ao lado do botão de nova camada (+) e escolha Filter Layer.
2. Na janela, escolha o filtro Desaturate (categoria Adjust). Ele tem métodos de conversão. Para julgar valor, prefira Luminosity (ITU-R BT.709), que pesa cada canal como o olho percebe. O método Lightness trata amarelo e azul puros de forma parecida e engana.
3. Arraste a camada de filtro para o topo da pilha.
4. Ligue e desligue pelo ícone de olho enquanto pinta.

A camada de filtro não altera as camadas de baixo, então você pode deixar ela no arquivo para sempre. Se quiser aplicar o filtro só a um grupo, coloque a camada de filtro dentro do grupo.

Alternativa sem camada: o Krita tem prova de cor (Soft Proofing) no menu View, com atalho Ctrl+Y. Configurando a prova com um perfil em escala de cinza nas propriedades da imagem, o Ctrl+Y vira um interruptor de preto e branco. Funciona, mas a camada de filtro é mais fácil de configurar e de lembrar.

Se a sua cena já está no jogo, faça o teste na captura de tela: cole a captura numa camada do Krita, com a camada de filtro por cima. Testar a captura é melhor que testar os assets soltos, porque mostra o tamanho real e o que fica de fato lado a lado.

As 3 faixas de valor de uma cena de jogo

Com a cena em cinza, organize tudo em três faixas. Elas não são regra rígida de número, são uma forma de pensar.

Faixa 1: fundo. Céu, montanhas, prédios distantes, paredes do fundo. Fica numa faixa estreita de valor, com pouco contraste interno. Pode ser uma faixa clara (céu de dia) ou escura (caverna, noite), mas sem os extremos da tela.

Faixa 2: espaço jogável. Chão, plataformas, paredes em que o personagem encosta. Tem que estar claramente fora da faixa do fundo, para o jogador saber onde pisa. Se o fundo é claro, o chão costuma ser médio ou escuro. Se o fundo é escuro, o chão costuma ser médio com a borda de cima mais clara.

Faixa 3: atores. Personagem, inimigos, itens, projéteis. Recebem o maior contraste da tela e os valores mais extremos: o ponto mais claro e o mais escuro costumam estar neles.

Para conferir rapidamente, faça um retângulo de amostra na lateral do canvas com um tom de cada faixa, lado a lado. Se dois retângulos parecem quase iguais em escala de cinza, aquelas faixas estão se sobrepondo.

Contraste de valor entre personagem e cenário

O personagem é o que o jogador mais olha. Duas abordagens funcionam:

• Personagem escuro em fundo claro. Clássico em plataforma de dia. A silhueta fica forte.
• Personagem claro em fundo escuro. Comum em caverna, noite e jogo de terror. O personagem brilha.

O que não funciona é o personagem de valor médio num fundo de valor médio. Se o seu jogo tem fases claras e escuras, o personagem precisa de contraste interno: partes claras (rosto, detalhe da roupa) e partes escuras (contorno, cabelo, capa). Assim ele lê em qualquer fundo.

Um recurso muito usado em pixel art é o contorno escuro em volta do sprite. Ele cria uma faixa de valor própria na borda e separa o personagem de quase qualquer cenário. O guia de sombreamento em pixel art mostra como montar a rampa de tons que o personagem usa, e o contorno sai do tom mais escuro dela.

Separar valor numa tela é um exercício. Manter essa separação em 10 fases, com inimigos novos, efeitos e interface por cima, é onde o projeto de quem estuda sozinho começa a parecer bagunçado sem que a pessoa saiba dizer por quê. Um curso de arte 2D para jogos ensina esse tipo de regra de produção junto com o desenho, para a arte do jogo inteiro funcionar como conjunto.

Corrigir valor sem perder a paleta

Você montou uma paleta de que gosta e o teste mostrou que o personagem some. Trocar a paleta inteira é a reação errada. O valor dá para corrigir dentro da paleta.

1. Troque o tom dentro da rampa. Toda rampa de cor tem um tom mais claro e um mais escuro. Se o chão some no fundo, use o tom mais escuro da rampa no chão e o mais claro no fundo. A paleta não mudou, mudou qual tom vai onde.

2. Ajuste o plano inteiro em bloco. Se o fundo inteiro está no lugar errado, ajuste só o grupo dele. Filters > Adjust > Levels (Ctrl+L) ou Color Adjustment Curves (Ctrl+M) num grupo de fundo puxam a faixa toda para mais claro ou mais escuro. Use como máscara de filtro (Filter Mask) no grupo para não destruir a pintura.

3. Baixe o contraste do fundo. Às vezes o problema não é o valor médio do fundo, é o contraste interno alto demais, com detalhes escuros competindo com o personagem. Comprima o contraste do fundo em Levels, trazendo os escuros e os claros para perto do meio.

4. Adicione uma camada de ar. Uma camada com a cor do céu, em baixa opacidade, entre o fundo e o espaço jogável, clareia e unifica o fundo de uma vez. É a base da perspectiva atmosférica.

5. Só então mexa no matiz. Se depois disso duas coisas ainda brigam, aí sim desloque o matiz de uma delas.

Em pixel art com paleta fixa, só os passos 1 e 5 se aplicam bem, desde que o matiz novo também venha da paleta, porque ajustes em bloco (passos 2, 3 e 4) criam cores fora dela. A troca de índice dentro da rampa resolve quase tudo.

Legibilidade da arte de jogo em movimento

A cena parada no Krita é o caso fácil. No jogo, três coisas pioram a leitura:

• Tamanho. O que você pinta com zoom de 400% aparece em 100% ou menos. Reduza a captura para o tamanho real antes de julgar.
• Movimento. Em movimento, o olho perde detalhe e fica só com silhueta e valor. Um personagem que depende de detalhe interno para ser lido some na corrida.
• Efeitos por cima. Partículas, luzes e interface acrescentam manchas claras. Se o efeito de poeira tem o mesmo valor do personagem, ele esconde o personagem a cada pulo.

Teste prático: grave um trecho de 10 segundos do jogo, tire uma captura de um quadro em movimento e passe pelo teste grayscale. Se o personagem continua visível como mancha clara ou escura, a arte aguenta o jogo. Repare também na interface: barra de vida e contador precisam da própria faixa de valor ou de um fundo que garanta o contraste.

Erros comuns: confiar no matiz para separar planos

Separar planos só pela cor. Fundo azul, chão marrom, personagem vermelho, todos de valor médio. Colorido e ilegível. Correção: teste grayscale e mova cada plano para a sua faixa.

Fundo com mais contraste que o personagem. Um fundo cheio de pretos e brancos puxa o olho para longe da ação. Correção: comprima o contraste do fundo.

Escurecer tudo para dar clima. Fase noturna com tudo escuro deixa as faixas coladas. Correção: noite é fundo escuro com espaço jogável e atores ainda separados, por exemplo com luz na borda das plataformas e no personagem.

Julgar no zoom. No zoom de 400%, tudo parece separado. Correção: julgue sempre no tamanho real, de preferência numa captura do jogo rodando.

Esquecer a interface. Texto branco sobre céu claro some. Correção: dê à interface um fundo ou contorno que garanta contraste em qualquer fase.

Próximo passo

Monte a camada de filtro Desaturate no arquivo da sua próxima cena e não tire mais. Antes de colorir qualquer coisa nova, pinte o primeiro bloco em cinza com as 3 faixas definidas. Depois, leia o guia de paleta de cores para jogos e monte as rampas pensando em qual tom de cada rampa cai em cada faixa de valor.