Como Desenhar Cenário 2D para Jogo (Pintado)

Para saber como desenhar cenários para jogo, a primeira regra é separar desde o esboço o que é jogável (chão, plataformas, paredes que o personagem toca) do que é decoração (fundo, árvores distantes, enfeites). Depois você pinta em camadas, dá ao caminho jogável uma faixa de valor própria, concentra detalhe onde o jogador olha e exporta cada camada para a engine. Um cenário bonito que não diz onde pisar é um cenário que atrapalha o jogo.

Aqui você pinta um cenário de jogo de plataforma do esboço ao final no Krita, com ruínas antigas como tema, e leva o resultado para a Godot ou a Unity.

Como desenhar cenários para jogo: o que muda da ilustração

Uma ilustração é vista inteira e parada. O olho passeia, encontra detalhes, volta. Um cenário de jogo é visto de outro jeito:

• Em movimento. A câmera anda e o jogador presta atenção no personagem, não no fundo.
• Em pedaços. O jogador vê uma tela por vez, nunca o cenário inteiro.
• Com uma pergunta na cabeça. "Onde eu posso pisar?", "isso me machuca?", "posso passar por ali?".

Por isso o cenário de jogo tem uma prioridade que a ilustração não tem: legibilidade do espaço jogável. A beleza vem em segundo, e a boa notícia é que um cenário legível costuma ficar mais bonito, porque tem hierarquia.

Antes de pintar, defina com quem faz o level design (ou com você mesmo) a planta da fase: onde estão o chão, as plataformas e os buracos. O guia de princípios de level design ajuda a pensar essa planta. O cenário pintado veste essa planta, não inventa outra.

Esboço: jogável vs decorativo

Abra um canvas com a altura da tela do jogo e a largura de três telas. Para Full HD, 5760 por 1080 pixels. Se o jogo tem resolução base menor, use essa resolução multiplicada pelo zoom final.

1. Camada grade. Divida o canvas em telas com linhas verticais a cada 1920 pixels. Marque também a altura do personagem numa linha de referência. Tudo no cenário é medido por ela: uma plataforma alcançável fica a uma altura que o pulo do personagem cobre.
2. Camada jogavel_esboco. Em vermelho, desenhe só o que o personagem toca: o chão, as plataformas, as paredes. Linhas retas e blocos simples. Nada de decoração.
3. Camada deco_esboco. Em azul, desenhe o que é cenário: colunas quebradas no fundo, arcos, vegetação, céu. Aqui pode solto.

Olhe as duas camadas juntas. O vermelho precisa ser óbvio. Se uma coluna azul de decoração tem o formato de uma plataforma, o jogador vai tentar pular nela. Mude a forma (inclinada, quebrada, sem topo plano) ou mova ela para trás.

Essa separação é o centro do método. Ela vai determinar as camadas, as cores e onde fica o detalhe.

Cenário 2D em camadas desde o primeiro traço

Organize o arquivo em grupos que já correspondem ao que vai para a engine:

• ceu: gradiente e nuvens.
• fundo: ruínas distantes, montanhas.
• meio: colunas e arcos atrás do espaço jogável.
• jogavel: chão e plataformas.
• frente: vegetação e destroços na frente do personagem.

Cada grupo pode ter quantas camadas de pintura precisar dentro. O que importa é que no final cada grupo seja uma imagem exportável. Isso dá três vantagens: você ajusta um plano sem mexer nos outros, os planos podem se mover em velocidades diferentes no jogo (parallax) e o grupo jogavel pode virar tiles ou peças separadas.

Pinte primeiro em blocos de cor chapada, sem detalhe, um grupo por vez, do fundo para a frente. Use pincel grande. Nessa fase você está decidindo massas e valores, não texturas.

Cor por plano e valor do caminho jogável

Com os blocos no lugar, aplique as regras de cor por plano:

• Céu e fundo: pouco contraste, pouca saturação, matiz puxando para a cor do céu. É a perspectiva atmosférica.
• Meio: um degrau mais escuro e mais saturado que o fundo, ainda suave.
• Jogável: faixa de valor própria, bem separada do meio. Se o fundo é claro, o chão é médio ou escuro. A borda de cima de cada plataforma recebe um tom mais claro (a luz do céu batendo no topo), que mostra exatamente onde o pé apoia.
• Frente: quase em silhueta, escuro, pouca área.

Para conferir, crie uma camada de filtro com Desaturate no topo da pilha (no docker de camadas, pela seta ao lado do botão de nova camada, escolha Filter Layer). Ligue e veja se o vermelho do esboço, agora pintado, está numa faixa de valor que não se confunde com nada.

O topo claro das plataformas é um truque que resolve metade dos problemas de leitura. Use em todo o grupo jogavel, com a mesma cor, para virar código visual: borda clara significa "dá para pisar".

Pintar um cenário bonito é uma etapa. Fazer ele funcionar com o personagem, os inimigos, as colisões e a câmera, e repetir isso em várias fases sem que cada uma pareça de um jogo diferente, é onde a maioria dos projetos feitos sozinhos empaca. Um curso de arte 2D para jogos ensina o cenário como parte do jogo, da planta da fase à importação na engine.

Detalhe onde o jogador olha

Detalhe é o que mais custa tempo, então gaste onde rende.

Onde o jogador olha:

• Em volta do personagem, ou seja, no espaço jogável e logo atrás dele.
• Em pontos de interesse: uma porta, um baú, um inimigo, a saída da fase.
• Na borda das plataformas, onde a decisão de pular acontece.

Onde ele não olha:

• O céu e o fundo distante. Silhuetas e manchas bastam.
• Os cantos superiores da tela, que ficam fora da atenção na maior parte do tempo.
• A área abaixo do chão, que só aparece numa faixa.

Na prática, no grupo jogavel: textura de pedra nas bordas, rachaduras, musgo no topo, sombra embaixo de cada plataforma. No grupo meio: forma das colunas e duas ou três rachaduras grandes. No grupo fundo: só silhueta. No grupo frente: forma e um brilho de borda, sem textura.

Um teste: reduza o cenário para 25% e olhe. Se o fundo parece mais "ocupado" que o chão, inverta o investimento de detalhe.

Exportar o cenário para a engine

No Krita. Com os grupos organizados, há três formas de exportar:

• Export Layers (Tools > Scripts > Export Layers): plugin que vem com o Krita (ative em Settings > Configure Krita > Python Plugin Manager se não aparecer) e exporta cada camada ou grupo do documento como imagem separada.
• Batch Exporter: plugin também incluído, pensado para jogo, que exporta camadas em vários tamanhos e formatos e cria uma pasta de exportação ao lado do arquivo.
• Uma camada por vez: no submenu Layer > Import/Export, que tem a opção de salvar a camada ativa e a de salvar os grupos de topo (o nome exato muda entre versões).

Exporte em PNG para manter a transparência dos planos meio, jogavel e frente.

Tamanho de cada imagem. A documentação da Godot recomenda manter texturas em até 4096 por 4096 pixels para funcionar entre plataformas, porque GPUs de celular costumam parar nesse limite e GPUs de computador mais antigas podem não aceitar mais que 8192. Um cenário de 5760 pixels de largura deve ser cortado em pedaços de até 4096, por exemplo duas metades de 2880. O Krita corta com a ferramenta de recorte (Crop Tool) ou exportando seleções.

Na Godot. Importe os PNGs e coloque cada pedaço num Sprite2D, ou num Parallax2D por plano se o fundo for se mover em velocidade diferente. Se uma imagem passar do limite, a opção de importação Process > Size Limit reduz a textura na importação, sem mexer no arquivo original. A colisão do espaço jogável é feita à parte, com StaticBody2D e CollisionShape2D desenhados sobre o grupo jogavel.

Na Unity. Importe os PNGs com Texture Type em Sprite (2D and UI). No importador, o campo Max Size limita a resolução usada por plataforma, e o importador aceita até 16384 pixels de lado. Confira se o Max Size não está menor que a sua imagem, senão ela é reduzida e perde nitidez. Cada pedaço vira um GameObject com Sprite Renderer, em Sorting Layers diferentes por plano. A colisão do jogável vai com BoxCollider2D ou PolygonCollider2D.

Erros comuns: plataforma que se confunde com o fundo

Plataforma que se confunde com o fundo. Mesmo valor, mesma textura, mesma cor da coluna de trás. Correção: faixa de valor própria e borda superior clara em toda plataforma.

Decoração com cara de plataforma. Uma pedra de topo plano no plano do meio. O jogador pula e cai. Correção: decoração no fundo não tem topo plano horizontal, ou fica bem mais clara e lavada.

Detalhe uniforme. Todo o cenário com a mesma densidade de detalhe. Nada se destaca. Correção: detalhe concentrado no jogável e em pontos de interesse.

Cenário pintado numa camada só. Impossível ajustar um plano, fazer parallax ou corrigir a colisão. Correção: grupos por plano desde o primeiro traço.

Ignorar o tamanho do personagem. Plataformas desenhadas sem referência ficam altas demais para o pulo. Correção: linha de referência com a altura do personagem e a altura do pulo na camada grade.

Próximo passo

Pinte uma tela de 1920 por 1080 com o método completo: esboço vermelho e azul, cinco grupos, teste de valor, detalhe no jogável e exportação. Monte na engine com o personagem andando por cima e veja se em algum momento você fica em dúvida sobre onde pisar. Para desenhar elementos de fundo com volume, como prédios e ruínas, revise a perspectiva no desenho de cenário. E se ainda está se acostumando ao programa, o guia de Krita para jogos cobre a interface e os pincéis.