Cenário em Pixel Art: Background de Jogo Passo a Passo

Um pixel art cenário de jogo se monta em planos: céu, montanhas, floresta e chão, cada um numa camada, com poucas cores por plano e menos contraste quanto mais longe ele está. Se o background ainda repete na horizontal sem emenda, você pode usar a mesma tela numa fase inteira. No Aseprite, o Tiled Mode mostra a repetição enquanto você desenha, o que tira o chute do processo.

Aqui você constrói um background completo de 320x180 pixels no Aseprite, do céu ao chão, com paleta por plano, uma seção só para o céu (gradiente, nuvens e uma versão de pôr do sol trocando cores) e a checagem de repetição. O resultado é uma tela estática pronta para o jogo. Se você quer separar esses planos para se moverem em velocidades diferentes, o passo seguinte é o guia de fundo parallax.

Pixel art cenário: tamanho da tela e da camada

O tamanho do background vem da resolução base do jogo, a resolução em que a arte é desenhada antes de ser ampliada.

Duas escolhas comuns:

• 320x180. Multiplicada por 6, dá 1920x1080. Pixels grandes, estilo bem retrô, pouca área para desenhar. Boa para começar.
• 640x360. Multiplicada por 3, dá 1920x1080. Mais espaço para detalhe, pixels menores na tela final.

O motivo de escolher resoluções assim é a escala inteira: cada pixel da arte vira exatamente 6x6 ou 3x3 pixels na tela, sem distorção. O guia de pixel art para jogos explica a escolha de resolução e de tamanho de sprite em mais detalhe.

Para este exercício: File > New, 320x180, modo de cor RGBA, fundo transparente. Crie 5 camadas (Layer > New Layer, ou Shift+N), de baixo para cima:

1. ceu
2. nuvens
3. montanhas
4. floresta
5. chao

Desenhe cada elemento na sua camada desde o começo. Mesmo que este background seja uma tela única, as camadas deixam você corrigir um plano sem estragar outro.

Paleta por plano: menos contraste ao fundo

Antes de desenhar, monte a paleta. Para este background, cerca de 18 cores, divididas assim:

• Céu: 4 cores, do azul mais saturado no alto ao azul quase branco no horizonte.
• Nuvens: 2 a 3 cores, branco levemente azulado, um tom de sombra azul-acinzentado e opcional um tom de borda.
• Montanhas: 3 cores, azuladas, próximas do azul do horizonte. Pouca distância de valor entre elas.
• Floresta: 4 cores, verdes escuros puxando para azul-esverdeado, com um tom de luz no topo das copas.
• Chão: 4 a 5 cores, verde de grama e marrom de terra, com o maior contraste da tela.

A lógica: quanto mais longe o plano, menos cores ele tem, menos contraste entre elas e mais elas se parecem com o céu. É a perspectiva atmosférica aplicada a uma paleta limitada. O plano mais perto (o chão, onde o personagem anda) tem as cores mais "verdadeiras" e o contraste mais alto.

No Aseprite, monte a paleta no painel de paleta e salve com o menu de opções do painel para reusar em outros backgrounds do mesmo jogo. Se você ainda não tem prática com rampas de cor, o guia de paleta de cores para pixel art mostra como montar rampas com variação de matiz.

Pixel art céu: gradiente em faixas e nuvens

O céu é a camada mais simples e a que mais muda o clima da cena.

Gradiente em faixas.

1. Na camada ceu, com a ferramenta Rectangle preenchida ou o balde, pinte faixas horizontais de cima para baixo: 4 cores, da mais saturada à mais clara.
2. As faixas não precisam ter a mesma altura. Faixas mais finas perto do horizonte dão sensação de distância.
3. Dithering opcional. Na borda entre duas faixas, uma linha de pixels alternados em xadrez (uma cor, outra cor, uma cor) suaviza a transição. Uma linha de 1 ou 2 pixels de altura basta. Se o estilo do seu jogo é limpo, deixe as faixas secas, também funciona.

Nuvens em massa.

1. Na camada nuvens, desenhe a forma de cada nuvem como uma massa com base plana e topo de bolhas arredondadas. A base plana é o que faz a nuvem parecer nuvem, e não algodão flutuando.
2. Preencha com a cor clara.
3. Na parte de baixo, uma faixa com o tom de sombra, seguindo a base plana.
4. Opcional: um tom mais claro nas bolhas de cima, do lado da luz.
5. Nuvens mais perto do horizonte ficam menores, mais achatadas e com menos contraste.

Versão de pôr do sol só trocando cores. Como o céu e as nuvens usam poucas cores, você troca o clima sem redesenhar. Converta o sprite para indexado (Sprite > Color Mode > Indexed) e edite as posições da paleta usadas pelo céu: o azul do alto vira roxo, o do meio vira rosa, o do horizonte vira laranja. Em modo indexado, mudar a cor de uma posição da paleta muda todos os pixels que a usam. As nuvens ganham base rosa-arroxeada e borda laranja. As montanhas e a floresta puxam para roxo. Em poucos minutos você tem uma segunda fase.

Céu, montanhas e floresta em camadas no Aseprite

Montanhas.

1. Na camada montanhas, desenhe a silhueta da cadeia com a ferramenta Pencil (B) em 1 pixel. Picos variados, alguns altos, outros baixos, sem simetria.
2. Preencha com a cor média das montanhas.
3. Escolha um lado de luz (o mesmo para o cenário inteiro) e pinte as faces desse lado com o tom claro. As faces do outro lado ficam no tom escuro. Use poucos traços grandes, não pinte cada pedra.
4. A base da cadeia pode desaparecer atrás da floresta, não precisa ser desenhada inteira.

Floresta.

1. Na camada floresta, faça uma faixa de copas de árvore como uma linha ondulada no topo, preenchida com o verde médio.
2. Nas bordas das copas, pequenos recortes e bolinhas sugerem folhagem. Não desenhe árvores individuais, desenhe a massa.
3. Tom claro no topo de algumas copas (a luz do céu), tom escuro na parte de baixo da faixa.
4. Se quiser duas fileiras de floresta, faça a de trás mais clara e azulada que a da frente.

Chão.

1. Na camada chao, uma faixa na parte de baixo da tela com a grama no topo e terra abaixo.
2. A borda da grama tem pequenos tufos que quebram a linha reta.
3. Aqui está o maior contraste da tela: o tom mais claro da grama e o mais escuro da terra.

Uma tela de background bonita é um começo. Num jogo, ela precisa conviver com o tileset do chão, os personagens, os inimigos e os efeitos, todos com a mesma lógica de paleta e escala, e é nessa costura que muita gente que estuda pixel art sozinha descobre que cada asset foi feito de um jeito. Um curso de arte 2D para jogos ensina a construir o conjunto em vez de peças soltas.

Background pixel art que repete sem emenda

Um background que repete na horizontal economiza trabalho: você desenha 320 pixels e preenche uma fase inteira. Para isso, a borda esquerda de cada camada precisa encaixar na borda direita.

Regras para cada plano:

• Céu em faixas horizontais já repete sozinho, porque cada faixa é igual de ponta a ponta.
• Nuvens: nenhuma nuvem pode ser cortada pela borda de um jeito que não continue do outro lado. Ou deixe as nuvens inteiras longe das bordas, ou desenhe a nuvem atravessando a borda com o Tiled Mode ligado.
• Montanhas e floresta: a altura da silhueta na coluna 0 precisa ser a mesma da coluna 319, e o desenho tem que continuar. Uma montanha cortada ao meio na borda direita precisa ter a outra metade na borda esquerda.
• Chão: a linha da grama encaixa nas duas bordas.

Evite elementos muito marcantes (uma árvore enorme, uma montanha única com forma especial). Na repetição, o olho reconhece o elemento a cada 320 pixels e o padrão fica óbvio.

Tiled Mode do Aseprite para checar a repetição

O Aseprite tem um modo feito para isso. Pela documentação oficial, você acessa em View > Tiled Mode, um submenu com as opções de repetição. Escolha a repetição no eixo horizontal (X).

Com o Tiled Mode ligado, o canvas mostra cópias da imagem lado a lado. Mais do que mostrar: quando você desenha perto da borda direita, o traço continua do lado esquerdo, como se a imagem fosse um cilindro. Isso permite desenhar a emenda diretamente, por cima da junção.

Fluxo:

1. Termine cada camada com o Tiled Mode desligado.
2. Ligue o Tiled Mode no eixo X.
3. Afaste o zoom até ver duas ou três repetições.
4. Procure degraus de silhueta, nuvens cortadas e linhas de grama desalinhadas na junção.
5. Corrija desenhando sobre a junção.
6. Desligue para voltar ao modo normal.

Para um background vertical (torre, poço), use a repetição no eixo Y com a mesma lógica.

Erros comuns: fundo com mais detalhe que o personagem

Fundo com mais detalhe que o personagem. Árvores com folhas pixel a pixel, montanhas com rochas detalhadas. O olho vai para o fundo e o personagem some. Correção: o fundo é massa e silhueta, o detalhe vai no personagem e no chão.

Contraste igual em todos os planos. Montanha distante com o mesmo contraste do chão. A profundidade some. Correção: poucas cores e pouco contraste ao fundo.

Preto nas sombras do fundo. Sombras escuras trazem os planos para a frente. Correção: sombras do fundo são azuladas e claras.

Emenda visível. Degrau de 2 ou 3 pixels na silhueta da montanha na junção. Correção: Tiled Mode no eixo X e correção por cima da junção.

Padrão óbvio. Um elemento único que se repete a cada tela. Correção: tire elementos marcantes ou coloque-os como peça separada, posicionada só uma vez na fase.

Céu com degradê suave de muitas cores. Dezenas de tons no céu fogem do estilo e pesam na paleta. Correção: 3 a 5 faixas, com dithering opcional.

Próximo passo

Desenhe o background completo de 320x180 com as 5 camadas, cheque a repetição no Tiled Mode e faça a versão de pôr do sol trocando a paleta em modo indexado. Coloque um sprite do seu personagem por cima, no chão, e confira se ele é o elemento de maior contraste da tela. Com o background pronto, o guia de fundo parallax mostra como dividir esses planos para se moverem em velocidades diferentes na engine.