Voltar para o Blog
Quest Log

Pixel Art 1-Bit: Jogo Bonito com Duas Cores

Cena de jogo em pixel art de duas cores, com personagem claro sobre fundo escuro e paredes texturizadas com dithering

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.

Ferramenta:Aseprite

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:

  1. 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.
  2. 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.
  3. 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:

  1. File > New com o tamanho do seu jogo (por exemplo 160x144 ou 128x128), modo Indexed.
  2. 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).
  3. 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ãoDensidade da cor claraUso típico
Liso escuro0%Fundo, vazio, céu noturno
Pontos esparsos (1 a cada 4x4)cerca de 6%Estrelas, poeira, chão distante
Xadrez 1x150%Meio-tom, sombras grandes, água
Listras horizontais50%Madeira, metal, telas
Xadrez invertido densocerca de 75%Superfícies iluminadas
Liso claro100%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:

  1. 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.
  2. 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.
  3. 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.
  4. Cenário interativo (porta, baú, alavanca): cor sólida e forma simples, para "saltar" do cenário texturizado.
  5. Cenário decorativo: dithering e padrões. É o elemento menos chamativo.
  6. 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.

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

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.