Props em Pixel Art: Baús, Barris e Objetos de Cenário

Pixel art props são os objetos que mobiliam a fase: baú, barril, caixote, vaso, placa. Para eles funcionarem no jogo, três coisas importam mais que o capricho no desenho: tamanho coerente com o tile e com o personagem, a mesma direção de luz do tileset e uma paleta puxada do cenário, não inventada para cada objeto.

Aqui você desenha três props no Aseprite (baú, barril e caixote), cada um com versão de interação (aberta ou quebrada), seguindo a luz e as cores de um tileset 16x16. Os passos funcionam igual em LibreSprite, Pixelorama ou Piskel, que são grátis: muda o nome de um menu ou outro, e eu indico onde.

Pixel art props: o que é prop e por que importa

Prop é tudo no cenário que não é chão, parede ou personagem. Ele tem dois trabalhos. O primeiro é contar onde o jogador está: barris e caixotes dizem "depósito", vasos e tapetes dizem "casa", ossos e correntes dizem "masmorra". O segundo é sinalizar interação: o baú promete recompensa, o caixote convida a ser quebrado.

Esse segundo trabalho é o que mais pesa no design. O jogador precisa bater o olho e separar o que é decoração do que é interativo. Por isso os props de interação costumam ter um pouco mais de contraste ou um detalhe de cor (a fechadura dourada do baú) que os decorativos não têm.

Tamanho do prop em relação ao tile e ao personagem

Antes de abrir o arquivo, defina a escala. Vou usar um padrão comum em jogos top-down e plataforma:

A regra prática: o baú bate na cintura do personagem, o barril e o caixote ficam entre a cintura e o peito. Prop maior que o personagem vira obstáculo de cenário, e o jogador passa a ler ele como parede.

Trabalhar com célula de 16x16 mesmo quando o objeto é menor tem uma vantagem: o prop encaixa na mesma grade do tilemap, e você pode colocá-lo como tile ou como objeto na engine sem recalcular nada.

No Aseprite, crie o arquivo com File > New (Ctrl+N), 64x16 pixels, fundo Transparent. Ative a grade em View > Grid > Grid Settings com 16x16 e mostre com Ctrl+' (o atalho de View > Show > Grid). Cada célula da grade vai receber um prop.

Paleta e luz: comece pelo tileset

Abra o tileset do jogo numa aba ao lado (File > Open) para alternar entre os dois arquivos enquanto desenha. Olhe duas coisas:

1. De onde vem a luz. Na maioria dos tilesets top-down, a luz vem de cima e um pouco da esquerda: a face de cima é a mais clara, a face da direita é a mais escura.
2. Quais cores o tileset já usa para madeira e metal. Use o conta-gotas (I, ou segure Alt com o lápis) e adicione esses tons à paleta.

Para madeira, separe três tons: sombra, base e luz. Para metal, dois: base e brilho. Mais o tom de contorno, se o estilo usar. Isso dá umas seis cores para os três props juntos. O post sobre sombreamento em pixel art explica como montar essas rampas com variação de matiz, que é o que deixa a madeira com cara de madeira e não de marrom chapado.

Pixel art baú passo a passo: fechado e aberto

Frame 1, fechado:

1. Com o lápis (B), desenhe a silhueta: um retângulo de 14x12 com a tampa ocupando os 5 pixels de cima. A tampa pode ser reta ou levemente arredondada (cantos superiores cortados em 1 pixel).
2. Preencha com o balde (G) usando o tom base da madeira.
3. Linha de separação entre tampa e corpo: uma fileira de 1 pixel no tom de sombra.
4. Faixas de metal: duas colunas verticais de 2 pixels no tom base do metal, cruzando tampa e corpo. É o que faz o objeto ler como baú e não como caixa.
5. Fechadura: um bloco de 2x3 no centro da linha de separação, com 1 pixel de brilho no canto de cima à esquerda.
6. Luz: uma fileira de pixels no tom claro no topo da tampa. Sombra: uma coluna no lado direito e a fileira de baixo.
7. Sombra no chão: 1 a 2 pixels de altura abaixo do baú, mais largos que ele, no tom de sombra do piso do tileset (não preto).

Frame 2, aberto: crie um novo frame com Frame > New Frame (Alt+N), que nasce como cópia. Apague a tampa e redesenhe ela inclinada para trás, mostrando só a borda de cima (3 a 4 pixels de altura) acima do corpo. No lugar onde a tampa estava, pinte o interior com o tom mais escuro da madeira, e se quiser, 2 ou 3 pixels do brilho do metal para sugerir moedas.

Se quiser a abertura mais suave, faça um frame intermediário com a tampa na metade do caminho. Para ver o frame anterior em transparência enquanto redesenha, ligue o onion skin com F3.

Uma dica que poupa trabalho: como o corpo do baú não muda, deixe a tampa numa camada separada (Layer > New > New Layer, Shift+N). Assim você redesenha só ela.

Barril e caixote: madeira com poucas cores

Barril (12x14):

1. Silhueta: um retângulo com os cantos arredondados e as laterais levemente abauladas (1 pixel para fora no meio da altura).
2. Base da madeira no corpo. Duas aduelas sugeridas por linhas verticais de 1 pixel no tom de sombra, não mais que isso.
3. Dois aros de metal: fileiras horizontais de 2 pixels a 3 pixels do topo e da base.
4. Topo do barril visto de cima: uma elipse achatada de 2 a 3 pixels de altura no tom claro. Numa vista top-down, esse topo é a parte mais iluminada do objeto.
5. Lado direito com a coluna de sombra.

Caixote (14x14):

1. Quadrado com moldura de 2 pixels no tom de sombra.
2. Centro no tom base, com uma diagonal de 2 pixels de largura em tom claro (a ripa de reforço). A diagonal é o que diferencia o caixote de um bloco qualquer.
3. Pregos: 1 pixel de metal em cada canto da moldura.
4. Face de cima com uma fileira de luz, face direita com sombra, igual ao baú.

Repare que os três props usam as mesmas três cores de madeira e as mesmas duas de metal. Se o caixote ficar mais claro que o barril, ajuste com Edit > Adjustments > Hue/Saturation (Ctrl+U) na seleção, mas tente primeiro resolver com a proporção de cada tom em vez de criar cor nova. Quem quiser aprofundar a madeira e o metal pode ver o post de texturas de pedra, madeira e metal em pixel art.

Variações quebradas para interação

Prop interativo precisa de estado depois da interação. Para barril e caixote, isso quer dizer uma versão quebrada:

• Frame de impacto (opcional): o objeto inteiro deslocado 1 pixel para o lado e com os pixels de luz trocados por branco por um frame. É o flash que confirma o acerto.
• Frame quebrado: a silhueta perde a parte de cima. Do caixote sobram a base e duas ripas tortas; do barril, os aros caídos no chão e duas aduelas. Espalhe 3 ou 4 lascas de 1 a 2 pixels em volta.
• Frame de resto: só os destroços baixos, que podem ficar no chão de forma permanente ou sumir depois de alguns segundos na engine.

Mantenha a versão quebrada na mesma célula de 16x16 e com a sombra no chão no mesmo lugar. Assim, na engine, você só troca o sprite sem reposicionar nada.

Organize tudo com tags na timeline: selecione os frames, Frame > Tags > New Tag e dê nomes como bau_fechado, bau_abrir, caixote_quebrar. Isso vira o nome da animação quando você exporta a sprite sheet com JSON.

Desenhar um baú bonito sozinho é rápido. O que dá trabalho de verdade é fazer dezenas de props, tiles e personagens conversarem na mesma luz e na mesma paleta, sem que cada objeto novo pareça vindo de um jogo diferente. É nesse ponto que muita gente que aprende por vídeo solto trava, porque cada tutorial usa uma luz e uma paleta próprias.

Ter um processo fixo (luz definida no tileset, paleta fechada, célula padrão) é o que permite produzir props em quantidade sem refazer tudo a cada fase.

Decoração do cenário sem poluir a leitura

Com props prontos, a tentação é encher a fase. Algumas regras que mantêm o cenário legível:

• Agrupe. Três barris juntos num canto contam mais história que três barris espalhados. Grupos de 2 a 4 objetos, com espaço vazio entre os grupos.
• Decoração com menos contraste. Props que não interagem (ossos, rachaduras, pedrinhas) usam só os tons do chão, sem o tom mais claro. Props interativos ganham o brilho e a cor de destaque.
• Nada no caminho principal. O caminho que o jogador percorre fica limpo; props vão nas bordas, junto às paredes.
• Varie com flip. Espelhar um barril na horizontal (Shift+H no Aseprite espelha a seleção) cria uma variação de graça. Mas cuidado: se a luz vem da esquerda, o flip inverte a sombra. Para props com sombra lateral marcada, desenhe a variação em vez de espelhar.

Teste a leitura com um truque simples: reduza o zoom até o cenário ficar do tamanho real da tela do jogo e pergunte se você acha o baú em um segundo. Se não acha, falta contraste no baú ou sobra contraste na decoração.

Exportar e levar para a engine

Exporte os props como sprite sheet em File > Export > Export Sprite Sheet (Ctrl+E), com a grade de 16x16 e o JSON marcado se a engine for ler as tags. Para objetos estáticos, também dá para colocá-los no próprio tileset.

Na Godot, props estáticos podem entrar como tiles numa camada própria de TileMapLayer, com colisão definida no TileSet. Props que abrem ou quebram funcionam melhor como cena separada: um AnimatedSprite2D com as animações fechado, abrir e quebrar, mais uma Area2D para detectar o jogador.

Na Unity, o caminho equivalente é um GameObject com SpriteRenderer e Animator, um BoxCollider2D e um script que troca o estado. Importe a sheet com Sprite Mode: Multiple, Filter Mode: Point (no filter) e Compression: None para o pixel art não borrar, e fatie no Sprite Editor com grade de 16x16.

Erros comuns: luz diferente do tileset

Luz vinda do lado errado. O erro mais comum. O tileset tem luz de cima à esquerda e o baú tem brilho na direita. O jogador não sabe dizer o que está errado, mas sente que o objeto está colado. Confira sempre com o tileset aberto ao lado.

Paleta nova para cada prop. Cada objeto com o seu marrom. Puxe do tileset e reaproveite.

Contorno preto num cenário sem contorno. Se o chão e as paredes não têm contorno, o prop com contorno preto salta da tela. Use contorno no tom mais escuro do próprio material, ou nenhum.

Detalhe demais. Veio da madeira pixel a pixel num barril de 12 pixels vira ruído. Duas linhas de aduela bastam.

Sombra no chão preta e opaca. A sombra do prop usa o tom escuro do piso. Preto puro abre um buraco no chão.

Versão quebrada fora da célula. Os destroços escapam dos 16x16 e o sprite pula de lugar ao trocar. Mantenha tudo na mesma célula.

Próximo passo

Desenhe o conjunto de três props para um tileset que você já tem e coloque no mapa ao lado do personagem. Se a escala ou a luz destoarem, ajuste antes de fazer o quarto objeto. Se ainda não tem tileset, comece pelo post sobre como desenhar um tileset no Aseprite e volte aqui para mobiliar a fase.