Carro em Pixel Art Top-Down para Jogo de Corrida

Um carro em pixel art top-down para jogo de corrida começa pela proporção vista de cima (comprimento perto do dobro da largura), com o tamanho decidido pela largura da pista, e se resolve em quatro camadas visuais: carroceria, vidros, teto e uma sombra separada no asfalto. A parte que mais trava é a rotação: você escolhe entre desenhar 8 direções, desenhar 16 direções ou girar um único sprite na engine, e cada escolha muda o custo e a qualidade.

Os passos usam o Aseprite, com indicação de como fica no LibreSprite e no Pixelorama, que são grátis. No fim tem o que fazer na Godot e na Unity para a rotação não borrar o carro.

Pixel art carro: vista de cima e proporções

Visto de cima, um carro é um retângulo de cantos arredondados com algumas formas por dentro. Proporções que funcionam:

• Comprimento perto de 2 vezes a largura. Um carro de passeio fica entre 1,8 e 2,2. Um carro de Fórmula é mais longo e fino. Uma caminhonete é mais larga e quadrada.
• Frente e traseira diferentes. A frente costuma ser mais arredondada ou mais estreita. É a diferença que diz para onde o carro aponta, mesmo parado.
• Divisão em terços. De frente para trás: capô (cerca de um terço), cabine com vidros e teto (um terço), traseira ou porta-malas (o resto). Carro esportivo tem capô mais longo. Utilitário tem cabine maior.

Um erro frequente é desenhar o carro em perspectiva três quartos (vendo o lado) dentro de um jogo top-down. Num jogo visto exatamente de cima, a lateral do carro quase não aparece: no máximo 1 pixel de borda que sugere a altura.

Esse estilo de câmera (vista de cima direto) é o mesmo do personagem top-down. Se você já tem um protótipo de corrida, o post de como fazer um jogo de corrida mostra a estrutura do jogo em que esse sprite vai entrar.

Tamanho do sprite vs largura da pista

O tamanho do carro não é uma decisão de arte isolada. Ele sai de duas perguntas:

1. Qual a resolução base do jogo? Um jogo em 320x180 pixels (ampliado na tela) pede carros pequenos. Em 640x360 você pode usar carros maiores e mais detalhados.
2. Quantos carros cabem lado a lado na pista? Para corrida com ultrapassagem, a pista precisa de 3 a 5 carros de largura. Se o carro tem 16 pixels de largura, a pista tem de 48 a 80 pixels.

Tamanhos de referência:

Comece pelo menor tamanho que lê bem. Carro grande demais deixa a pista curta na tela e o jogador sem tempo de ver as curvas chegando.

Teto, capô, vidros e sombra

Passo a passo de um carro de 16x32 no Aseprite, apontando para cima:

1. File > New, 16x32, fundo transparente. Ligue a grade de pixel (View > Show > Pixel Grid, Ctrl+Shift+').
2. Paleta. 5 a 7 cores: 3 tons da cor da carroceria (escuro, médio, claro), 2 tons de vidro (azul escuro e azul claro), preto para pneus e uma cor de detalhe (farol amarelo, lanterna vermelha).
3. Silhueta. Com o Pencil (B), desenhe o retângulo arredondado na cor média. Deixe 1 pixel de folga de cada lado para as rodas.
4. Rodas. Quatro retângulos pretos de 2x4 pixels saindo levemente das laterais, na altura do capô e da traseira. Em vista de cima pura, a roda aparece só como um pedaço que passa da carroceria.
5. Vidros. Para-brisa como um trapézio azul escuro entre o capô e o teto, mais largo embaixo. Vidro traseiro menor, na outra ponta do teto. Uma diagonal de 1 a 2 pixels em azul claro no para-brisa dá o reflexo.
6. Teto. O retângulo entre os dois vidros, na cor clara da carroceria. É a superfície mais alta, então é a mais iluminada.
7. Capô e traseira. Cor média, com a borda de um dos lados (oposta à luz) no tom escuro. Uma linha de 1 pixel em tom escuro separando o capô da cabine.
8. Faróis e lanternas. 1 a 2 pixels amarelos na frente, vermelhos atrás.
9. Sombra separada. Numa camada nova (Layer > New > New Layer), copie a silhueta inteira, pinte de uma cor escura e desloque 1 a 2 pixels para baixo e para o lado. Coloque a camada embaixo da carroceria.

Por que a sombra separada: quando o carro girar na engine, a sombra deve continuar do mesmo lado (a luz do cenário não gira com o carro). Com a sombra num sprite à parte, você a desenha sem rotação de deslocamento e posiciona sempre com o mesmo offset em relação ao carro.

No LibreSprite o fluxo é idêntico (ele é um fork do Aseprite). No Pixelorama, o Pencil, as camadas e a paleta funcionam do mesmo jeito, com os menus em lugares parecidos. O guia de pixel art para jogos cobre a configuração de paleta e grade em detalhe.

Rotação: 8, 16 ou rotação na engine

Esta é a decisão que mais define o visual do jogo. Três caminhos:

8 direções (a cada 45 graus). Você desenha o carro apontando para cima, para a diagonal, para o lado e assim por diante. Na prática, desenha 3 (cima, diagonal, lado) e gera o resto por espelhamento e rotação de 90 graus, que não perde pixels. O carro sempre parece limpo, mas a direção "pula" 45 graus de cada vez, o que funciona em jogo com controle digital e curvas fechadas e fica travado em pista com curvas suaves.

16 direções (a cada 22,5 graus). O movimento fica muito mais suave. Você desenha 5 sprites (0, 22,5, 45, 67,5 e 90 graus) e o resto sai por espelhamento e rotação de 90. Os ângulos quebrados (22,5 e 67,5) são os mais difíceis: as linhas retas do carro viram escadinhas irregulares e pedem retoque pixel a pixel.

Rotação na engine. Você desenha só a direção para cima e a engine gira o sprite em qualquer ângulo. É o mais barato e o mais suave em movimento, mas a qualidade depende da configuração: sem cuidado, o carro borra ou forma serrilhado diferente a cada ângulo.

No Aseprite, para gerar os ângulos quebrados como ponto de partida: selecione o carro (Ctrl+A) e arraste a parte de fora de uma alça da seleção para girar até o ângulo aproximado. Não precisa acertar o grau exato: esse resultado é só esboço. A documentação oficial (conferida em outubro de 2026) lista dois algoritmos de rotação, Fast Rotation e RotSprite, e descreve o RotSprite como o que costuma dar melhores resultados. Escolha o RotSprite na barra de contexto durante a transformação. Mesmo com ele, o ângulo de 22,5 graus sai com pixels soltos e linhas tortas: use o resultado como esboço e redesenhe por cima.

Um meio-termo comum em jogo indie de corrida top-down: 16 direções desenhadas para o carro do jogador, que aparece no centro da tela o tempo todo, e rotação na engine para objetos menores ou carros secundários.

Desenhar um carro bonito é a parte divertida. Ter o carro, as 16 direções, a pista em tiles, as variações dos oponentes e os efeitos de fumaça no mesmo estilo, e depois fazer tudo isso funcionar na engine sem borrar, é onde a maioria trava sozinha. Um curso de arte 2D para jogos organiza essa produção do sprite ao jogo rodando.

Na Godot 4. Para pixel art girando sem borrar, deixe o Texture Filter em Nearest (Project Settings > Rendering > Textures > Canvas Textures > Default Texture Filter). Com rotação livre, o carro gira na resolução da tela e fica liso mas com pixels finos e tortos. Para manter os pixels do tamanho dos outros, use Display > Window > Stretch com Mode em viewport, que renderiza tudo na resolução base e amplia depois, e Scale Mode em integer para a ampliação ficar em múltiplo inteiro. Com sprites em 8 ou 16 direções, use um AnimatedSprite2D ou o frame do Sprite2D e escolha o quadro pelo ângulo do carro dividido pelo passo (45 ou 22,5 graus). O post sobre carro top-down 2D na Godot traz o controlador em GDScript que esse sprite vai seguir.

Na Unity 6. No import do sprite, Filter Mode em Point (no filter), Compression em None e Pixels Per Unit coerente com o tamanho do tile. Para a rotação na engine manter o pixel grande, use o componente Pixel Perfect Camera (URP) com Grid Snapping em Upscale Render Texture, que renderiza na resolução de referência e amplia, deixando a rotação pixelada de forma consistente. Para 8 ou 16 direções, monte os sprites num sprite sheet e escolha o sprite pelo ângulo do Rigidbody2D, em vez de girar o Transform.

Variações de cor por paleta

Num jogo de corrida você precisa de vários carros diferentes. A forma mais barata é trocar a paleta:

1. Separe a cor da carroceria. Os 3 tons da carroceria devem ser cores exclusivas, que não aparecem nos vidros, pneus ou detalhes.
2. Duplique o sprite e substitua essas 3 cores. No Aseprite, Edit > Replace Color (Shift+R) troca uma cor pela outra no sprite inteiro. Repita para os 3 tons.
3. Monte as variações: vermelho, azul, amarelo, verde, branco. Cinco carros com o trabalho de um.
4. Acrescente um detalhe por equipe. Uma faixa no capô ou um número no teto (em 16x32, 1 a 3 pixels de largura) diferencia carros da mesma cor.

Na engine, outra opção é desenhar a carroceria em tons de cinza e tingir pelo modulate (Godot) ou pela Color do Sprite Renderer (Unity). Funciona bem para muitas cores, mas tinge os tons claros e escuros de forma menos controlada que uma paleta feita à mão.

Dano e detalhe de pista (fumaça, marca de pneu)

Os efeitos em volta do carro fazem mais pela sensação de velocidade do que qualquer detalhe na carroceria.

Marca de pneu. Um sprite de 2x2 ou 2x4 pixels em cinza escuro semitransparente, deixado na pista na posição das rodas traseiras quando o carro derrapa. Na engine, uma Line2D (Godot) ou Trail Renderer (Unity) com a cor da marca também resolve.

Fumaça. 4 a 6 frames de uma nuvem que cresce e some: 3x3, 5x5, 7x7 pixels, com 2 tons de cinza claro e transparência no último frame. Sai das rodas traseiras na derrapagem e da traseira na largada.

Dano. Para carro que bate, 2 ou 3 estados: inteiro, amassado (cantos com 1 a 2 pixels a menos e uma rachadura no vidro) e muito danificado (fumaça constante). Troque o sprite conforme a vida do carro.

Faíscas. 2 a 3 frames de pixels amarelos e brancos espalhados, na colisão com o muro.

Erros comuns: carro em perspectiva errada, rotação borrada

Perspectiva errada. Carro com a lateral visível e o teto achatado, num jogo de câmera de cima. Correção: vista de cima pura, com no máximo 1 pixel de lateral.

Rotação borrada. Sprite girado com filtro bilinear, ficando borrado e com bordas semitransparentes. Correção: filtro Nearest ou Point e escala inteira.

Sombra girando junto. Sombra pintada dentro do sprite, que muda de lado quando o carro faz a curva. Correção: sombra em sprite separado com offset fixo.

Escadinha irregular nos ângulos. Rotação automática aceita sem retoque. Correção: RotSprite como esboço, linhas redesenhadas à mão.

Carro grande demais. A pista fica curta na tela e o jogador bate em curva que não viu. Correção: decida o tamanho pela pista e pela resolução.

Frente igual à traseira. O jogador não sabe para onde o carro aponta. Correção: frente mais arredondada, faróis e para-brisa maior.

Próximo passo

Desenhe um carro de 16x32 apontando para cima, com sombra em camada separada e paleta de 6 cores. Depois faça as direções de 45 e 90 graus e gere as 8 direções por espelhamento. Coloque na engine, gire e compare com a rotação livre.

Se o carro vai para a Godot, o post sobre carro top-down 2D na Godot monta a física. Para entender a estrutura completa do jogo, com voltas, checkpoints e oponentes, siga para como fazer um jogo de corrida.