Árvore em Pixel Art: Copa, Tronco e Variações

Uma árvore em pixel art convincente sai de três decisões: copa desenhada em massas de folhagem (nunca folha por folha), tronco com só três tons e variações que mudam a forma, não apenas a cor. Com isso, uma única árvore de 32x48 pixels vira uma floresta inteira sem o padrão de carimbo que entrega o tile repetido.

Aqui você desenha a árvore base no Aseprite, ilumina a copa com a Shading ink, adapta para vista top-down e side-view e cria três variações. Em LibreSprite, Pixelorama ou Piskel (grátis), o processo é o mesmo; só a ink de sombreamento muda, e eu mostro a alternativa.

Pixel art árvore: copa em massas, não folhas

O erro que denuncia árvore de iniciante é a copa coberta de folhinhas individuais. Num sprite de 32 pixels de largura, cada folha teria 1 ou 2 pixels, e o resultado é ruído. O olho lê árvore pela silhueta e pelo volume, então a copa é construída como um grupo de bolas.

Configuração:

1. File > New (Ctrl+N), 32x48 pixels, fundo Transparent.
2. Paleta: 4 verdes (escuro, base, claro, brilho quase amarelo) e 3 marrons para o tronco (escuro, base, claro). Mais um verde bem escuro, quase azulado, para a sombra no chão.
3. Lápis com B, tamanho 1. Para o esboço, aumente o pincel com a tecla + e diminua com -.

Silhueta da copa: com o verde base e pincel redondo de 6 a 8 pixels, carimbe de 3 a 5 círculos sobrepostos que formam uma nuvem irregular, ocupando a área de cima (uns 32x30). Uma massa maior no centro, menores nos lados, nunca simétricas.

Volume de cada massa: cada bola recebe luz como uma esfera. Com a luz vindo de cima e da esquerda, pinte a metade de baixo e da direita de cada massa com o verde escuro. A parte de baixo da copa inteira fica mais escura ainda, porque a própria árvore se sombreia.

Borda: agora sim entra a textura. Recorte a borda da silhueta com entradas de 1 a 2 pixels e deixe alguns pixels soltos de verde fora dela. Isso sugere folhas sem desenhá-las.

Shading ink: iluminar a copa mais rápido

O Aseprite tem uma ink feita para esse trabalho. Na barra de contexto do lápis, troque a ink de Simple para Shading. Depois selecione na paleta o intervalo de cores da rampa, do verde escuro ao brilho, em ordem.

Com a Shading ink ativa, cada clique esquerdo move o pixel um tom para a esquerda na rampa selecionada, e o clique direito move para a direita. Na prática, você passa o lápis sobre o topo de cada massa e ele clareia um degrau, sem trocar de cor manualmente. Passar duas vezes clareia dois degraus.

Por isso a ordem da rampa na paleta importa: deixe as cores lado a lado, do escuro (à esquerda) ao claro (à direita). Nessa ordem, o clique direito clareia e o esquerdo escurece. Se a sua rampa estiver invertida, os botões trocam de papel.

Use assim:

1. Clique direito no topo de cada massa para subir um tom (com a rampa do escuro ao claro).
2. Repita só no centro do topo para chegar ao verde claro.
3. Um a três pixels de brilho no topo da massa maior, sem passar disso.

Fora do Aseprite, o caminho é manual: em Pixelorama, LibreSprite e Piskel você troca de cor com o conta-gotas e pinta. É mais lento, mas o resultado é o mesmo. O post sobre sombreamento em pixel art aprofunda a construção de rampas com variação de matiz, que deixa o verde menos plástico.

Tronco e raiz com 3 tons

O tronco ocupa a parte de baixo, uns 6 a 8 pixels de largura por 16 a 18 de altura.

1. Silhueta: um retângulo que alarga na base, com 1 ou 2 raízes saindo para os lados em 2 a 3 pixels. Tronco perfeitamente reto parece poste.
2. Base: marrom médio no corpo todo.
3. Sombra: coluna de 2 pixels no lado direito em marrom escuro, e o topo do tronco, logo abaixo da copa, também escuro, porque a copa faz sombra nele.
4. Luz: coluna de 1 pixel no lado esquerdo em marrom claro, interrompida em 2 ou 3 pontos para sugerir casca.
5. Galho: opcional, um galho de 1 a 2 pixels saindo do tronco e sumindo na copa ajuda a ligar as duas partes.

Três tons de marrom bastam. Um quarto tom costuma virar listras verticais que deixam o tronco com cara de coluna de madeira cortada.

Sombra no chão: uma elipse achatada de 2 a 3 pixels de altura e quase a largura da copa, no tom escuro do chão do seu tileset. É ela que ancora a árvore no terreno.

Árvore pixel art top-down vs side-view

A árvore muda conforme a câmera do jogo.

Side-view (plataforma): a árvore é vista de lado. Copa em cima, tronco inteiro à mostra, raízes visíveis. A luz costuma vir de cima, e o tronco fica bem visível. Tudo o que descrevi acima.

Top-down em 3/4 (RPG estilo Zelda clássico ou Stardew): a câmera olha de cima com inclinação. A copa ocupa a maior parte do sprite e o tronco aparece só como um pedaço curto embaixo dela, com 4 a 8 pixels de altura. A sombra no chão fica deslocada para baixo e para a direita, oposta à luz.

Top-down puro (vista direto de cima): sem tronco visível. A árvore é só uma copa redonda com o centro mais claro e a borda mais escura, e a sombra deslocada.

Um detalhe técnico do top-down em 3/4: a copa precisa ficar na frente do personagem quando ele passa atrás da árvore. Por isso vale separar copa e tronco em camadas (Layer > New > New Layer, Shift+N) e exportar como dois sprites. Na engine, o tronco tem colisão e fica na camada do personagem; a copa fica numa camada acima.

Variações: troca de copa, cor e tamanho

Uma árvore só, repetida, cria o padrão que o olho detecta em segundos. A solução é ter de 3 a 5 variações, e elas precisam mudar a silhueta.

Monte as variações a partir da árvore base:

1. Variação A (base): a árvore que você desenhou.
2. Variação B (copa diferente): duplique o frame (Alt+N) e redesenhe só a silhueta da copa, mudando quantas massas há e onde ficam. Duas massas grandes em vez de quatro médias, por exemplo. O tronco pode continuar o mesmo.
3. Variação C (tamanho): uma árvore menor, 32x32, com copa mais compacta. Serve para preencher espaços e para a borda da floresta.

Depois, uma variação de cor para cada uma, usando Edit > Replace Color (Shift+R) ou Edit > Adjustments > Hue/Saturation (Ctrl+U): verde mais azulado para árvores do fundo, mais amarelado para árvores na luz, ou laranja para outono. Variação só de cor, sem mudar a forma, ajuda pouco: o olho reconhece a silhueta repetida mesmo com outra cor.

Organize as variações em frames com tags (Frame > Tags > New Tag) e exporte como sprite sheet, ou desenhe todas num arquivo maior com grade de 32x48 se preferir tratar como tileset.

Desenhar uma árvore bonita é a parte fácil. Fazer uma floresta inteira com árvores, tiles de grama, caminhos e personagens na mesma paleta e na mesma luz, sem o cenário virar uma colagem, é onde quem aprende sozinho costuma perder semanas refazendo arte que não combina.

Ter as regras do estilo do jogo definidas antes (luz, paleta, contorno, tamanho de tile) é o que permite produzir vegetação em quantidade sem desmontar o que já estava pronto.

Floresta pixel art sem padrão repetido

Com 3 variações e as versões de cor, a montagem decide o resto:

• Sobreponha. Árvores de floresta se tocam e se cobrem. Coloque as de trás mais altas no mapa e deixe as da frente cobrirem parte delas.
• Fuja da grade. Se a engine permite, posicione árvores como objetos, não presas à grade de 16x16. Deslocar 4 ou 6 pixels já quebra o alinhamento que denuncia o tile.
• Espelhe. Um flip horizontal dobra as variações. Só confira se a luz continua coerente: se a sombra do tronco está na direita, o flip leva para a esquerda. Em árvores com luz de cima e sombra fraca nas laterais, o flip quase não se nota.
• Varie a densidade. Clareiras e trechos mais fechados. Floresta com densidade uniforme parece papel de parede.
• Escureça o fundo. As árvores mais distantes, no topo do mapa em jogo top-down ou atrás na side-view, com o verde mais escuro e menos contraste.

Para a borda da floresta, faça um tile de copa contínua: um tile de 16x16 só de folhagem que repete. As árvores individuais ficam na frente dele. Essa é a técnica que segura uma mata fechada sem desenhar centenas de árvores.

Levando para a engine

Na Godot, a árvore inteira pode entrar como tile num TileSet com tamanho de célula maior, mas o caminho mais flexível é uma cena com Sprite2D do tronco, Sprite2D da copa e um StaticBody2D com colisão só na base do tronco. Ative Y Sort Enabled no nó pai para o personagem passar atrás e na frente corretamente.

Na Unity, com o URP 2D, o equivalente é um prefab com SpriteRenderer do tronco e da copa, um BoxCollider2D na base e o Transparency Sort Mode do renderer 2D configurado em Custom Axis com eixo (0, 1, 0), para ordenar pela altura na tela. Importe com Filter Mode: Point (no filter) e Compression: None.

Erros comuns: copa simétrica e contorno preto em tudo

Copa simétrica. Espelhar metade da copa parece prático e o resultado parece artificial. Natureza não é espelhada.

Folha por folha. Ruído em vez de volume. Massas, depois borda.

Contorno preto em tudo. Contorno preto na copa e no tronco transforma a árvore em adesivo, ainda mais quando o cenário não tem contorno. Se precisar separar a árvore do fundo, use o verde mais escuro da rampa como contorno, e só na parte de baixo e na direita (o lado da sombra).

Tronco reto e uniforme. Alargue a base, crie raízes e quebre a linha de luz.

Sombra no chão ausente. Sem ela, a árvore flutua.

Variação só de cor. O olho pega a silhueta repetida. Mude a forma.

Próximo passo

Desenhe a árvore base, depois as variações B e C, e monte um trecho de floresta de 10x8 tiles com elas. Se o trecho parecer repetido, falta variação de forma ou sobra alinhamento com a grade. Para ver onde a árvore se encaixa no resto da arte do jogo, o guia completo de pixel art para jogos mostra a ordem de produção, e o post sobre como desenhar um tileset no Aseprite ensina a grama e o chão que vão embaixo dessas árvores.