Pixel Art 1-Bit: Jogo Bonito com Duas Cores
Pixel art 1 bit num jogo inteiro: escolher o par de cores, separar jogador, inimigo e cenário com silhueta, padrão e dithering, e dar feedback com duas cores.
Pixel Art 1-Bit: Jogo Bonito com Duas Cores
Pixel art 1 bit é desenhar um jogo inteiro com exatamente duas cores. Parece limitação demais, mas é um dos estilos mais rápidos de produzir e mais fáceis de manter coeso, porque toda decisão de cor já foi tomada. O trabalho passa para outras ferramentas: silhueta, padrão, dithering, espaço negativo e animação.
Este guia mostra como escolher o par de cores, como separar jogador, inimigo, cenário e perigo sem cor nenhuma, como usar dithering sem virar ruído e como fazer feedback de dano e coleta com duas cores, tudo com passos no Aseprite.
Pixel art 1 bit: a restrição como estilo
"1 bit" vem de hardware: um bit guarda dois estados, então cada pixel está aceso ou apagado. Os primeiros Macintosh exibiam assim, em preto e branco. Hoje, quem faz 1-bit escolhe essa restrição de propósito.
O que você ganha:
- Coesão automática. Não existe cor fora do lugar, porque só existem duas.
- Velocidade. Sem escolher rampa de cor, sem sombreamento em 4 tons. Um sprite 1-bit sai em uma fração do tempo.
- Identidade. Um jogo 1-bit é reconhecível num print de feed.
O que você perde: cor como sinal. Em jogo colorido, vermelho é perigo e verde é cura. Em 1-bit, essa informação precisa vir de forma, textura e movimento. Esse é o desafio do estilo e o assunto do resto do post.
Jogos para estudar: Minit (2018), todo em preto e branco, com mundo legível mesmo com sprites minúsculos. World of Horror, de Paweł Koźmiński (panstasz), com visual 1-bit inspirado em gráficos de Macintosh antigos e no mangá de terror de Junji Ito. Gato Roboto, que usa duas cores e oferece pares alternativos ao jogador.
Escolhendo o par de cores
O par não precisa ser preto e branco. Três decisões definem um bom par:
- Contraste de valor alto. Uma cor bem escura e uma bem clara. Se você converter as duas para tons de cinza, a diferença tem que ser grande. Um par como azul médio e vermelho médio pode até parecer contrastante, mas tem valores parecidos e vira uma mancha.
- Temperatura. Escuro frio com claro quente (azul profundo com creme) dá sensação acolhedora. Escuro quente com claro frio (marrom com ciano pálido) dá algo mais estranho, bom para terror e ficção científica.
- Preto e branco "não puros". Um preto levemente azulado e um branco levemente amarelado cansam menos a vista do que #000000 e #FFFFFF, especialmente em jogo longo. A paleta 1bit Monitor Glow, de Polyducks, no Lospec, faz exatamente isso: #222323 e #f0f6f0.
No Aseprite, configure assim:
- File > New com o tamanho do seu jogo (por exemplo 160x144 ou 128x128), modo Indexed.
- No painel de paleta, use o menu de opções da paleta para redimensionar para 2 cores, ou carregue uma paleta baixada do Lospec (arquivo .gpl ou .png).
- Pinte só com o índice 0 e o índice 1. Com o modo Indexed, o Aseprite não deixa cor intermediária aparecer.
Se o jogo vai permitir trocar o par (como Gato Roboto), deixe tudo em Indexed até o fim: trocar as duas cores da paleta muda o jogo inteiro.
Leitura sem cor: silhueta, padrão e espaço negativo
Sem cor, a leitura vem de três ferramentas:
Silhueta. Cada objeto importante precisa ser reconhecível como mancha sólida. Preencha o sprite inteiro com a cor clara e olhe: se você ainda sabe o que é, a silhueta está boa. Personagem com pose aberta (braços e pernas separados do tronco) lê melhor que pose fechada.
Padrão. Uma área cheia de cor clara lê diferente de uma área com listras, de outra com pontinhos e de outra com xadrez. Cada padrão vira um "material": pedra, água, grama, metal.
Espaço negativo. Em 1-bit, a cor escura não é só fundo, é desenho. Um olho pode ser um pixel apagado no meio de uma cabeça clara. Um corredor pode ser o vazio entre duas paredes texturizadas. Pense nas duas cores como tinta, não como "tinta e papel".
Teste de leitura: tire um print do jogo, reduza para 50% e olhe por 2 segundos. Você precisa achar o jogador, o inimigo mais perto e a saída.
Dithering e texturas em 1-bit
Dithering é misturar as duas cores num padrão para simular um terceiro tom. Em 1-bit, ele é a única forma de ter "cinza".
Os padrões básicos:
| Padrão | Densidade da cor clara | Uso típico |
|---|---|---|
| Liso escuro | 0% | Fundo, vazio, céu noturno |
| Pontos esparsos (1 a cada 4x4) | cerca de 6% | Estrelas, poeira, chão distante |
| Xadrez 1x1 | 50% | Meio-tom, sombras grandes, água |
| Listras horizontais | 50% | Madeira, metal, telas |
| Xadrez invertido denso | cerca de 75% | Superfícies iluminadas |
| Liso claro | 100% | Personagens, objetos interativos |
No Aseprite, a ferramenta Gradient (Shift+G) tem um seletor de dithering no context bar: escolha um padrão ordenado e arraste para criar uma transição de uma cor à outra em padrão. Outra opção é desenhar o padrão de 4x4 uma vez, selecionar e usar Edit > New Brush (Ctrl+B), que transforma a seleção em pincel, carimbando a textura onde quiser.
Para entender os padrões em profundidade, o post Dithering em pixel art para jogos mostra as matrizes ordenadas e quando cada uma funciona.
Regra de ouro: dithering é cenário. Personagens e objetos interativos ficam em cor sólida.
Diferenciar jogador, inimigo e cenário
Monte uma hierarquia e respeite em toda a tela:
- Jogador: forma sólida clara, com contorno de 1 pixel escuro em volta. Esse contorno separa o jogador mesmo quando ele passa por cima de uma área clara.
- Inimigos: forma sólida também, mas com "sinal de perigo" na silhueta: espinhos, dentes, olho vazado. Uma alternativa é inverter: inimigos escuros com contorno claro.
- Perigos fixos (espinho, lava, buraco): padrões agressivos e pontudos, como triângulos repetidos ou zigue-zague. Nunca use para perigo o mesmo padrão de um chão seguro.
- Cenário interativo (porta, baú, alavanca): cor sólida e forma simples, para "saltar" do cenário texturizado.
- Cenário decorativo: dithering e padrões. É o elemento menos chamativo.
- Fundo: liso.
A regra que amarra tudo: quanto mais importante para a jogabilidade, mais sólido e mais liso; quanto menos importante, mais texturizado.
Essa hierarquia é simples de explicar e difícil de manter quando o jogo cresce: novas fases, novos inimigos, interface, efeitos. Cada peça precisa obedecer a regra, e a arte precisa conversar com o código que faz o personagem piscar, os inimigos reagirem e a câmera tremer. É aí que um estilo minimalista bonito num print isolado vira um jogo confuso quando é montado.
Animação e feedback em duas cores
Sem cor de dano, o feedback usa outras armas:
- Inversão. Quando o jogador toma dano, o sprite inverte as cores por 1 a 3 frames de jogo (claro vira escuro e vice-versa). É o equivalente 1-bit do flash branco. Desenhe o frame invertido no Aseprite duplicando o frame (
Alt+N) e usando Edit > Invert num arquivo em RGB, ou troque as cores por shader na engine, o que serve para qualquer sprite sem desenhar frame extra. - Piscar. Durante a invencibilidade, o sprite some e aparece a cada 2 a 4 frames de jogo.
- Inversão de tela. Para um impacto grande (chefe derrotado, explosão), inverta a tela inteira por um frame. Use com moderação e nunca em sequência rápida; flashes repetidos de tela cheia são um problema de acessibilidade.
- Partículas. Pequenos quadrados de 1 a 2 pixels saindo do ponto de impacto mostram onde aconteceu.
- Animação exagerada. Sem sombreamento, a pose carrega tudo. Squash and stretch mais forte, poses mais abertas, antecipação clara.
Para coleta (moeda, item), use um brilho em forma de estrela de 4 pontas que aparece e some em 3 frames. É legível em qualquer par de cores.
Erros comuns: padrão que vira ruído, personagem que some no fundo
Padrão que vira ruído. Dithering em todo lugar, com três ou quatro padrões diferentes lado a lado. A tela parece estática de TV. Correção: no máximo 2 ou 3 padrões no jogo inteiro, e áreas lisas generosas entre eles.
Personagem que some no fundo. Personagem claro passa na frente de uma parede clara e desaparece. Correção: contorno da cor oposta em volta do personagem, sempre.
Detalhe interno demais. Sprite de 16x16 com olho, boca, cinto, botão, bolso. Em 1-bit, cada detalhe interno é um pixel apagado que "fura" a silhueta. Correção: no máximo 2 detalhes internos (normalmente olho e uma marca).
Par de cores com valor parecido. Fica bonito no seletor de cor e ilegível no jogo. Correção: teste convertendo para tons de cinza antes de escolher.
Animação de 2 frames para tudo. Como o estilo é simples, dá vontade de animar pouco. Mas sem cor, movimento é informação. Correção: andar com 4 frames, ataque com antecipação.
Próximo passo
Escolha um par de cores no Lospec (ou crie o seu), monte uma tela de 160x144 com chão, uma parede com dithering, um personagem com contorno, um inimigo e um espinho. Faça o teste de 50% e 2 segundos. Depois desenhe o frame de dano invertido e o de coleta. Se a tela passar no teste, você tem a base visual de um jogo inteiro.
Para escolher e testar pares com método, o post sobre paleta de cores para pixel art de jogos explica valor, temperatura e como avaliar uma paleta antes de usar.
Perguntas frequentes
O que é pixel art 1-bit?
É pixel art feita com exatamente duas cores, porque 1 bit só guarda dois valores: ligado ou desligado. As duas cores não precisam ser preto e branco; qualquer par com bom contraste serve, e o par escolhido vira a identidade visual do jogo.
Que jogos usam estilo 1-bit?
Minit (2018) é todo em preto e branco. World of Horror, de Paweł Koźmiński (panstasz), usa 1-bit inspirado em gráficos antigos de Macintosh e em mangá de terror. Gato Roboto usa duas cores e deixa o jogador trocar o par de cores. São bons estudos de leitura com pouca cor.
Como diferenciar personagem e cenário em 1-bit?
Com valor e textura em vez de cor. O jogador costuma ser a forma mais sólida e clara da tela, o cenário usa padrões e dithering, e o fundo fica liso. Um contorno da cor oposta em volta do personagem garante que ele não se funda com nada.
Onde achar paletas 1-bit prontas?
No Lospec (lospec.com/palette-list), filtrando paletas de 2 cores. Exemplos: 1bit Monitor Glow, de Polyducks (#222323 e #f0f6f0), e as paletas de Gato Roboto. Você também pode criar o seu par testando contraste e temperatura.


