Itens em Pixel Art: Espadas, Poções e Chaves

Para a pixel art de espada, poção, chave e moeda parecer de um jogo só, todos os itens precisam seguir três regras comuns: o mesmo tipo de contorno, o mesmo ângulo (diagonal para tudo que é comprido) e a mesma paleta, com a luz vindo do mesmo lado. Um item bonito sozinho que quebra essas regras parece pego de outro pacote de assets assim que entra no inventário.

Aqui você desenha no Aseprite uma espada 32x32, uma poção 16x16 e uma chave, anima uma moeda girando e desenha um cristal com facetas. Tudo com tamanhos em pixels, atalhos e contagem de frames. Em LibreSprite, Pixelorama ou Piskel (grátis), os passos de desenho são os mesmos.

Pixel art itens: tamanho no slot e no chão

Antes de desenhar, decida em que tamanho cada item vai existir:

O mesmo item aparece em dois contextos: no slot (fundo escuro e liso, visto de perto) e no chão (sobre grama, pedra ou areia, visto do tamanho real da tela). O primeiro tolera detalhe; o segundo exige silhueta clara. Desenhe pensando no chão e o slot fica bom de graça.

Defina também as regras do conjunto antes do primeiro pixel:

• Contorno: 1 pixel, numa cor escura colorida (um roxo ou marrom bem escuro), não preto puro. Itens precisam de contorno porque aparecem sobre fundos variados.
• Luz: de cima e da esquerda, para todos.
• Paleta: uma rampa de metal (4 tons), uma de madeira ou couro (3 tons), e cores de destaque por tipo de item.

Pixel art espada 32x32 em diagonal

Arquivo: File > New (Ctrl+N), 32x32, fundo Transparent.

1. Linha guia. Com a ferramenta de linha (L), trace uma diagonal do canto inferior esquerdo (pixel 3,28) ao canto superior direito (pixel 28,3). Numa diagonal perfeita de 45 graus, cada passo anda 1 pixel em x e 1 em y, o que deixa a linha limpa.
2. Lâmina. A lâmina ocupa os dois terços de cima da linha. Faça ela com 3 pixels de largura na diagonal: a linha central no tom base do metal, um lado no tom claro (o lado de cima e da esquerda, virado para a luz) e o outro no tom escuro. Termine em ponta, afinando para 1 pixel.
3. Brilho. 2 a 3 pixels quase brancos na metade de cima da lâmina, no lado claro. Esse brilho é o que diz "metal".
4. Guarda. Uma linha perpendicular à lâmina, de 7 a 9 pixels, cruzando a diagonal no fim da lâmina. Na diagonal, perpendicular quer dizer a outra diagonal (de cima à esquerda para baixo à direita).
5. Cabo. 4 a 6 pixels de diagonal abaixo da guarda, em tons de couro, com 1 pixel alternado para sugerir o enrolamento.
6. Pomo. Um bloco de 2x2 ou 3x3 no fim do cabo, na cor de destaque (dourado, por exemplo).
7. Contorno. Por último, contorne tudo com a cor escura. O Aseprite faz isso sozinho em Edit > FX > Outline (Shift+O), em que você escolhe a cor, se o contorno vai por fora (Outside) ou por dentro (Inside) e o formato: Circle contorna só pelos lados, em cruz, e Square inclui as diagonais. Outside com Circle deixa a pixel art mais leve.

Para variações (espada de ferro, de ouro, de fogo), duplique o frame com Alt+N e troque a rampa da lâmina com Edit > Replace Color (Shift+R). A silhueta continua a mesma, então o jogador reconhece "espada" e lê a cor como "material".

Poção pixel art: vidro, líquido e brilho

Arquivo 16x16.

1. Silhueta do frasco. Corpo redondo de 10 a 12 pixels de largura na metade de baixo, gargalo de 4 pixels de largura e 3 de altura, rolha de 4x2 no topo.
2. Líquido. Preencha os dois terços de baixo do corpo com a cor do efeito (vermelho para vida, azul para mana, verde para veneno). Use dois tons: o mais claro em cima, na linha do nível do líquido, e o mais escuro embaixo e na direita.
3. Vidro vazio. A parte de cima do corpo, sem líquido, fica num tom claro e dessaturado do próprio líquido, não branco. Isso sugere vidro transparente.
4. Reflexo. Uma linha curva de 2 a 3 pixels quase brancos no lado esquerdo do frasco, acompanhando a curva. É o reflexo que vende o vidro.
5. Rolha. Dois tons de marrom.
6. Contorno. Edit > FX > Outline com a mesma cor e o mesmo modo da espada.

Uma regra de design: a cor do líquido é informação. Mantenha cada cor ligada a um efeito no jogo inteiro. Poção vermelha que às vezes cura e às vezes envenena confunde o jogador.

Chaves, moedas e itens pequenos 16x16

Chave. Também na diagonal, como a espada. Argola de 5x5 com o centro vazado no canto de cima, haste diagonal de 7 a 8 pixels e dentes de 2 pixels no fim. Dourado com o tom claro na parte de cima da argola. Para chaves diferentes (porta comum, porta do chefe), mude a forma da argola, não só a cor.

Moeda parada. Círculo de 8x8 ou 10x10, borda no tom escuro do dourado, centro no tom base, um símbolo simples de 2 a 3 pixels no meio e um brilho de 1 a 2 pixels no alto à esquerda. Para o ícone de moeda do HUD, o post sobre HUD e ícones em pixel art no Aseprite mostra os estados e a leitura em tamanho pequeno.

Pixel art moeda girando é o próximo passo, e tem técnica própria.

Pixel art moeda: animação girando no Aseprite

Uma moeda girando simula uma rotação 3D com desenho 2D: a largura encolhe até o perfil e volta a crescer.

Frames para uma moeda de 10x10:

1. Frame 1: moeda de frente, 10 pixels de largura.
2. Frame 2: 8 pixels de largura. O símbolo do centro encolhe junto.
3. Frame 3: 5 pixels. O símbolo vira 1 coluna, e a borda direita ganha uma faixa no tom escuro: a espessura da moeda aparecendo.
4. Frame 4: perfil, 2 pixels de largura, tom escuro com 1 pixel claro.
5. Frames 5 e 6: o caminho de volta (5 e 8 pixels), agora com a espessura do lado esquerdo, porque a moeda continua girando no mesmo sentido.
6. Fim do ciclo: não desenhe um frame igual ao 1 no final da timeline. O loop já volta para ele, e um frame repetido faz a moeda "travar" de frente por um instante. São 6 frames no total.

Encolha sempre a partir do centro, para o eixo de rotação ficar parado. Se o centro da moeda andar 1 pixel entre frames, ela parece balançar em vez de girar. Ligue o onion skin (F3) para conferir.

Brilho percorrendo a borda. Um pixel quase branco que começa no alto à esquerda no frame 1, vai para o centro nos frames de largura menor e desaparece no perfil. Isso faz a moeda refletir luz enquanto gira.

Timing. Selecione os frames, botão direito, Properties, e defina 80 a 100 ms. O frame de perfil pode ficar com 60 ms para a passagem parecer mais rápida. Use Enter para tocar. Se a moeda parece estar indo e voltando em vez de girar, falta a espessura trocando de lado.

Para várias moedas no mapa, faça cada uma começar num frame diferente na engine. Todas girando em sincronia parecem um letreiro de luz.

Pixel art cristal: facetas, reflexo e brilho

Cristal é o oposto da moeda redonda: só planos e arestas.

1. Silhueta. Para um cristal coletável 16x16, um hexágono alongado na vertical, com ponta em cima e embaixo, de 7 a 8 pixels de largura e 13 a 14 de altura.
2. Facetas. Divida o interior em 3 ou 4 planos com linhas retas que saem das pontas. Cada faceta recebe um tom só: a faceta da esquerda e de cima (virada para a luz) no tom mais claro, a do centro no tom base, a da direita no escuro.
3. Arestas nítidas. Entre uma faceta e outra, a troca de tom é seca, sem pixel intermediário. Degradê dentro de faceta faz o cristal parecer gelatina.
4. Reflexo. 2 pixels quase brancos na faceta clara, perto da ponta de cima.
5. Brilho animado em 3 frames. Frame 1, sem brilho extra. Frame 2, um pixel branco em forma de cruz de 3x3 (só o centro e os 4 vizinhos) aparece na ponta de cima. Frame 3, a cruz encolhe para 1 pixel. Coloque o frame 1 com 400 a 600 ms e os outros dois com 80 ms: o cristal fica parado e cintila de vez em quando, que é o que se espera de uma gema.

Formação de cristal. Para cenário (caverna), agrupe 3 a 5 cristais de tamanhos diferentes saindo de uma base de pedra, inclinados em ângulos diferentes. Mantenha a luz igual em todos: a faceta clara sempre do lado da luz, mesmo com o cristal inclinado.

Fazer um item bonito é a parte divertida. Manter 50 ou 100 itens coerentes entre si, com o inventário, o HUD e o cenário falando a mesma língua visual, é a parte em que quem desenha sem um sistema vai acumulando itens que não combinam até precisar refazer tudo.

As regras do conjunto (tamanho, contorno, luz, paleta) são o que permite desenhar item novo meses depois sem ele parecer intruso.

Consistência: outline, luz e paleta do conjunto

Com os itens prontos, coloque todos lado a lado num arquivo só, numa grade de slots, e confira:

• Contorno. Mesma cor e mesmo formato (Circle ou Square) em todos. Se usou Edit > FX > Outline, aplique com as mesmas opções.
• Luz. Brilho e tom claro sempre no alto à esquerda.
• Ângulo. Tudo que é comprido (espada, chave, varinha, flecha) em diagonal com a ponta para o alto à direita.
• Saturação. Nenhum item muito mais saturado que os outros, exceto o raro de propósito.
• Peso visual. Itens de 16x16 ocupando entre 60% e 80% do quadro. Um item de 6 pixels num slot de 16 parece perdido.

Teste no fundo do jogo: exporte os itens e coloque sobre a grama e a pedra do seu tileset. O que some, ganha contorno mais escuro ou um tom mais claro.

Erros comuns: item ilegível no inventário

Detalhe demais em 16x16. Gravuras na lâmina, rótulo na poção: ruído. A silhueta é que identifica o item.

Itens em ângulos diferentes. Uma espada na vertical, outra na diagonal. O inventário fica bagunçado.

Contorno preto puro em uns e colorido em outros. Escolha um e aplique em todos.

Cor que não significa nada. Poções da mesma cor com efeitos diferentes.

Moeda que balança. O centro anda entre frames.

Cristal com degradê. Perde a dureza. Facetas com tom chapado.

Próximo passo

Desenhe o conjunto mínimo (espada, poção, chave, moeda girando e cristal) e monte uma tela de inventário de teste com eles. Quando o visual estiver fechado, o post sobre como criar um sistema de inventário em jogos de RPG mostra a parte de lógica que faz esses itens funcionarem no jogo, e o guia completo de pixel art para jogos mostra onde os itens entram na ordem de produção da arte.