Pixel Art Estilo Game Boy: 4 Cores e 160x144

Pixel art estilo Game Boy é desenhar com as mesmas regras do console original: tela de 160x144 pixels, 4 tons de cor, gráficos montados em tiles de 8x8 e sprites que usam só 3 tons visíveis. Seguir essas regras de verdade, e não só pintar tudo de verde, é o que faz a arte parecer saída de um cartucho.

Este post é um desafio prático. No fim você vai ter uma cena completa de 160x144 montada no Aseprite, com paleta travada, grade de tiles ligada, um personagem em 8x16 e um teste de leitura feito com o pouquíssimo contraste que 4 tons oferecem. Se quiser depois levar a cena para um Game Boy real, o último trecho mostra o que muda.

As regras do estilo Game Boy: 160x144 e 4 tons

As especificações abaixo vêm do Pan Docs (gbdev.io/pandocs), a referência técnica que a comunidade de desenvolvimento para Game Boy mantém. Conferi hoje:

• Tela de 160x144 pixels. Não existe outro tamanho no aparelho original.
• 4 tons. Cada pixel usa 2 bits, então só existem 4 valores possíveis: do mais claro ao mais escuro.
• Tiles de 8x8. Todo gráfico de fundo é montado em blocos de 8x8 pixels. A área de dados de tile da VRAM guarda 384 tiles.
• Sprites de 8x8 ou 8x16. O console mostra até 40 objetos na tela e no máximo 10 por linha horizontal.
• Cor 0 transparente nos sprites. O fundo usa uma paleta (BGP) e os objetos usam duas (OBP0 e OBP1). Nos objetos, o índice 0 é transparente, então cada sprite tem 3 tons visíveis.

A conta que organiza todo o resto: 160 dividido por 8 dá 20, e 144 dividido por 8 dá 18. A tela é uma grade de 20x18 tiles. Pensar em tiles, e não em pixels soltos, é o que diferencia uma imitação de uma cena que poderia rodar no hardware.

O limite de 10 sprites por linha também importa para a arte, não só para o código. Se você desenhar uma fileira de 6 inimigos de 16 pixels de largura lado a lado, cada um feito de 2 objetos de 8 pixels, a linha estoura e no hardware alguns somem ou piscam. Arte bem pensada para o estilo espalha os personagens na vertical.

Paleta Game Boy: verde original e variações

O aparelho só entende "tom 0, 1, 2 e 3". O verde vem da tela do Game Boy original, não de uma cor gravada no jogo. Por isso existem várias paletas de 4 tons que a comunidade usa para emular esse visual, e você escolhe a que combina com o seu jogo.

No Lospec, filtrando a lista de paletas por exatamente 4 cores e pela tag "gameboy", aparecem dezenas de opções. Algumas que valem testar:

A primeira é o verde clássico. A segunda puxa para um roxo escuro com verde vivo. A terceira é cinza quente, ótima para clima de terror ou mistério. A quarta prova que "4 tons" não precisa ser verde: o que define o estilo é o número de valores e o contraste entre eles.

Uma regra para escolher: os 4 tons precisam ter valores (claridade) bem separados. Converta a paleta para tons de cinza mentalmente, ou de verdade no editor. Se dois tons ficam quase iguais em cinza, a cena perde leitura.

Configurar canvas e grade no Aseprite

Abra o Aseprite e siga em ordem:

1. File > New (Ctrl+N). Width 160, Height 144. Em Color Mode, escolha Indexed. Background pode ficar transparente ou com a cor mais clara.
2. Baixe a paleta no Lospec no formato GIMP GPL (.gpl). Volte ao Aseprite, clique no ícone de menu acima da paleta (as três linhas) e escolha Load Palette. Aponte para o arquivo.
3. Confira que a paleta tem 4 cores. Se sobrou cor da paleta padrão, use o mesmo menu em Palette Size e defina 4.
4. View > Grid > Grid Settings: X 0, Y 0, Width 8, Height 8.
5. View > Show > Grid (Ctrl+'). A grade de 8x8 aparece por cima do canvas.
6. Opcional: View > Show > Pixel Grid (Ctrl+Shift+') para enxergar cada pixel no zoom alto.

Por que Indexed: nesse modo cada pixel guarda o número da cor na paleta, e não a cor em si. Você não consegue pintar uma quinta cor por acidente. E se no meio do trabalho quiser trocar o verde clássico pelo 2bit demichrome, basta carregar a outra paleta: todos os pixels mudam juntos, porque continuam apontando para os índices 0 a 3.

Monte duas camadas logo de início: fundo para o cenário e objetos para personagens e itens. Isso imita a separação do hardware entre background e sprites e evita que você use 4 tons num personagem sem perceber.

Tiles 8x8 e sprites 8x16

No fundo, trabalhe tile a tile. Cada quadrado da grade é um tile, e o objetivo é repetir tiles. O Game Boy guarda uma quantidade limitada de tiles diferentes, e ferramentas como o GB Studio impõem limites próprios (mais abaixo). Na prática:

• Desenhe um tile de grama de 8x8 e copie para preencher o chão.
• Faça uma ou duas variações (grama com flor, grama com pedra) e alterne sem padrão óbvio.
• Para elementos maiores, como uma árvore de 16x16 ou uma casa de 32x24, pense neles como 4 ou 12 tiles e tente reaproveitar pedaços: o telhado da esquerda espelhado vira o da direita.

Se você usa o Aseprite 1.3 ou mais novo, a camada de tilemap ajuda nisso: ela guarda um tileset de 8x8 e cada célula da grade aponta para um tile. Para um exercício, a camada normal com a grade ligada já basta.

Para o personagem, use 8x16, que é um objeto em modo alto ou dois tiles de 8x8 empilhados. Ou 16x16, que no hardware são dois objetos de 8x16 lado a lado. Comece com 16x16, que dá espaço para rosto, corpo e pés legíveis.

Lembre da regra dos 3 tons: no sprite, o tom 0 da paleta de objetos vira transparente. Na prática, escolha um tom que o personagem não usa (normalmente o mais claro, se o contorno for escuro) e trate esse tom como "vazio" na camada de objetos.

Desenhar com 4 cores: contraste e leitura

Com 4 tons você não tem cor para separar elementos. Tem só valor. Algumas decisões que funcionam:

• Reserve o tom mais escuro para contorno e para o que importa. Personagem, inimigo e item coletável com contorno escuro; cenário com pouco ou nenhum contorno.
• Fundo com valores médios. Se o chão e as paredes usam os tons 1 e 2, o personagem com contorno no tom 3 e preenchimento no tom 0 salta da tela.
• Use padrão em vez de cor nova. Um xadrez de 2 tons cria a ilusão de um quinto tom. Use em áreas grandes, como céu e água, e nunca dentro do personagem, onde vira ruído. O post sobre o estilo dos jogos retrô aprofunda dithering e outras técnicas da época.
• Silhueta primeiro. Pinte o personagem inteiro de um tom só. Se você reconhece a pose, o sprite vai funcionar.

O teste de leitura: aperte F8 (Full Screen Preview) e afaste o rosto da tela. Ou reduza o zoom para 100%, que é o tamanho real. O personagem precisa ser encontrado em menos de um segundo. Se não for, aumente o contraste entre ele e o fundo, não adicione detalhe.

Desenhar um personagem legível com 4 tons já é um bom treino. O que costuma travar é o passo seguinte: transformar isso em produção, com um tileset que cobre a fase inteira, animações que respeitam o mesmo limite e a interface conversando com o cenário, tudo coerente do primeiro ao último arquivo.

Montar uma cena completa

O desafio é uma vila de 160x144, 20x18 tiles. Ordem que funciona:

1. Layout em blocos. Na camada fundo, pinte grandes áreas com tons chapados: chão de grama nas 6 linhas de baixo, um caminho de terra atravessando, céu ou muro no topo. Ainda sem detalhe.
2. Tileset base. Desenhe 6 a 10 tiles: grama, grama variada, terra, borda grama/terra, parede, telhado, porta, janela.
3. Monte o cenário repetindo esses tiles. Uma casa de 4x3 tiles, duas árvores de 2x2, uma cerca de tiles iguais.
4. Personagem 16x16 na camada objetos, no centro inferior. Dois inimigos, um à esquerda e um à direita, em linhas diferentes.
5. Faixa de interface. Reserve as 2 linhas de baixo (16 pixels) para uma barra de vida ou texto. Use fundo no tom mais escuro e ícones no mais claro.
6. Conferência. Conte os tiles diferentes que você criou. Se passou de 40 ou 50 numa cena simples, está desenhando pixel por pixel em vez de pensar em tiles.

Exporte com File > Export As em PNG, no tamanho original (escala 100%) para levar à engine, e uma cópia com escala 400% para postar. Escala inteira mantém os pixels quadrados.

Se quiser rodar num Game Boy real: GB Studio

O GB Studio é a forma mais direta de transformar essa cena num jogo que roda em emulador e em cartucho. Ele tem requisitos próprios de arte, e vale ajustar o arquivo antes de importar. Pela documentação oficial (gbstudio.dev, conferida hoje):

• Fundos com largura e altura múltiplas de 8, mínimo de 160x144, nas cores #071821, #306850, #86c06c e #e0f8cf. Cores diferentes são aproximadas para a mais próxima.
• Limite de 192 tiles únicos de 8x8 por cena em jogos monocromáticos. É aqui que o hábito de repetir tiles paga a conta.
• Sprites com #071821, #86c06c e #e0f8cf, e #65ff00 como cor de transparência. O tom #306850 não entra em sprite.

Truque prático: crie no Aseprite uma paleta com essas cores exatas e salve com Save Palette as Preset. Desenhe sempre com ela e a importação no GB Studio fica sem surpresa. Para o fluxo completo da ferramenta, leia o post sobre criar jogo de Game Boy no GB Studio.

Erros comuns

• Pintar de verde e chamar de Game Boy. Uma ilustração em 320x240 com 12 tons de verde não é o estilo. Resolução, tons e grade é que definem.
• Sprite com 4 tons. Funciona no editor e quebra no hardware. Mantenha 3 tons visíveis por sprite.
• Tons parecidos demais. Paleta com dois tons quase iguais em valor deixa a cena lavada. Teste em cinza.
• Detalhe fora da grade. Uma janela que começa no pixel 5 de um tile obriga a criar tiles novos. Alinhe elementos à grade de 8.
• Esquecer o limite por linha. Muitos personagens na mesma altura parecem bem no editor e piscam no jogo.
• Escala quebrada na exportação. 150% ou 250% deforma pixels. Use 100%, 200%, 300% ou 400%.

Próximo passo

Faça o desafio duas vezes: uma vila clara com o verde clássico e uma caverna com a 2bit demichrome. Mudar só a paleta em modo Indexed mostra o quanto o clima depende de valor e não de matiz. Depois, estude como escolher e montar paletas para os seus próprios jogos no post sobre paleta de cores para pixel art. E se a cena ficou boa, importe no GB Studio e faça o personagem andar: ver o desenho rodando com as limitações reais ensina mais do que qualquer teoria.