Pixel Art Estilo Pokémon (GBA): Tiles 16x16 e Sprites

Pixel art estilo Pokémon de GBA nasce de restrições de hardware: tela de 240x160 pixels, gráficos montados em tiles de 8x8, mapas feitos de blocos de 16x16 (dois por dois tiles) e cada tile limitado a uma paleta de 16 cores. Ruby, Sapphire, Emerald, FireRed e LeafGreen têm a cara que têm porque a arte foi desenhada dentro dessas regras. Se você desenhar dentro delas também, o resultado lembra a época na hora, mesmo com tudo original.

Este post explica cada restrição com números conferidos, mostra como configurar o Aseprite para respeitá-las e guia um exercício: um trecho de rota com grama, árvore e caminho, mais um personagem overworld de 16x32. No fim, falo do que evitar se a ideia for publicar um fan game.

Pixel art estilo Pokémon: o que é o visual da era GBA

O visual da geração 3 de Pokémon tem algumas marcas fortes:

• Mundo visto de cima em 3/4, com tudo encaixado num grid rígido.
• Personagens pequenos e cabeçudos no mapa, com animação de andar de poucos frames.
• Cores vivas, mas limitadas, com contorno escuro definido.
• Repetição assumida. Fileiras de árvores idênticas, grama alta em blocos, cercas de módulos iguais.
• Contraste entre mapa e batalha. O personagem no mapa é minúsculo; na batalha, os sprites são maiores e mais detalhados.

Quase tudo isso é consequência direta do hardware. Entender o hardware é o atalho para o estilo.

Resolução e grid: 240x160, 8x8 e 16x16

Tela de 240x160. É a resolução do LCD do GBA. Num grid de 16x16, isso dá 15 blocos de largura por 10 de altura. Esse é o "enquadramento" que o jogador vê, e o tamanho de tudo foi pensado para caber nele.

Tiles de 8x8. O hardware desenha fundos e sprites a partir de tiles de 8x8 pixels. É a menor unidade gráfica.

Metatiles de 16x16. Os jogos de Pokémon montam o mapa com blocos de 2x2 tiles, os metatiles. Cada bloco do mapa (um pedaço de grama, um quarto de árvore) é um metatile de 16x16. Na prática, você desenha pensando em 16x16, mas com a consciência de que cada quarto de 8x8 é um tile reaproveitável.

Por que isso importa para a arte: o mesmo tile de 8x8 pode aparecer em vários metatiles, inclusive espelhado. Os artistas da época desenhavam para reaproveitar: o canto de uma árvore espelhado vira o outro canto. Essa economia é parte da cara do estilo.

No Aseprite:

1. File > New com 240x160, modo Indexed.
2. View > Grid > Grid Settings: 16x16 para o grid principal. Para conferir tiles de 8x8, troque temporariamente para 8x8.
3. View > Show > Grid (Ctrl+') e Snap to Grid (Shift+S).
4. Para trabalhar com tiles reaproveitáveis de verdade, crie uma camada de tilemap (Layer > New > New Tilemap Layer) com grid de 8x8. Ao desenhar no modo Auto, o Aseprite reaproveita tiles iguais e você vê quantos tiles únicos o mapa usa.

Paletas por tile e o limite de cores

No modo de 16 cores (4 bits por pixel), que é o mais usado para fundos e sprites:

• Cada tile de 8x8 usa uma paleta de 16 cores.
• A primeira cor de cada paleta é transparente. Sobram 15 cores visíveis por tile.
• O hardware guarda 16 paletas para fundos e 16 para sprites.
• Cada cor tem 15 bits: 5 bits por canal (vermelho, verde, azul), o que dá 32 níveis por canal.

O efeito no estilo: um tile não mistura muitas cores, e a arte da época tem rampas curtas e decididas. Uma boa medida para o seu tileset: grama com 3 ou 4 verdes, árvore com 4 ou 5 verdes e 2 marrons.

Para imitar no Aseprite:

1. Mantenha a sprite em Indexed.
2. Monte a paleta em blocos de 16: índices 0 a 15 para natureza, 16 a 31 para construções, e assim por diante. O índice 0 de cada bloco fica como transparência.
3. Ao escolher cores, prefira valores de canal múltiplos de 8 (0, 8, 16... 248). É o que a cor de 15 bits consegue representar, convertida para 8 bits por canal.
4. Regra de ouro: cada metatile de 16x16 usa cores de um único bloco de 16.

Você não precisa ser 100% fiel se o jogo não vai rodar num GBA de verdade. Mas respeitar o limite por tile é o que dá o aspecto da época.

Tileset de rota: grama, árvore, caminho

Exercício: um trecho de rota de 240x160 (a tela inteira) com grama baixa, grama alta, caminho de terra, uma fileira de árvores e uma placa.

Grama baixa (16x16). Base verde médio, 3 tons. Pequenos tufos em forma de "v" de 3 pixels em verde claro, distribuídos sem formar linha. Faça 2 variações.

Grama alta (16x16). É o tile de "encontro". Folhas em formato de chama, mais altas e mais escuras que a grama baixa, com contorno verde escuro. Precisa ser lida de longe como "área diferente". Desenhe 2 frames para o balanço quando o personagem passa.

Caminho de terra (16x16). Bege ou marrom claro, com pontos de 1 pixel mais escuros. Bordas com grama invadindo: centro, 4 lados e 4 cantos, que são 9 metatiles. Com espelhamento (Edit > Flip Horizontal, Shift+H), você desenha menos da metade.

Árvore (32x32, 4 metatiles). Copa redonda com 3 a 4 verdes, luz no topo, sombra embaixo, contorno escuro. Tronco curto. Desenhe a metade esquerda e espelhe para fazer a direita, depois quebre a simetria com 2 ou 3 pixels de diferença. Fileiras de árvores encostadas formam as "paredes" da rota.

Placa (16x16). Madeira marrom com a face de cima visível. Elemento interativo, então use contraste maior que o cenário em volta.

Para entender o planejamento das bordas e transições, o post Como Criar um Tileset para Jogo 2D mostra a lógica de centro, lados e cantos que esse tileset usa.

Desenhar o tileset é a parte visível. Fazer um personagem andar de tile em tile, colidir com árvores, entrar na grama alta e disparar um encontro já é programação, e é na junção das duas coisas que muitos projetos de RPG param: arte pronta numa pasta, jogo que não sai do lugar.

Sprite de personagem overworld

Nos Pokémon de GBA, o personagem no mapa ocupa 16x32 pixels por frame. Os arquivos de imagem do projeto pret (que reconstrói o código dos jogos) mostram isso direto: as folhas do protagonista têm 32 pixels de altura e frames de 16 de largura.

Para o seu personagem original:

1. Canvas de 16x32, Indexed, paleta de sprites (15 cores + transparente, mas use 8 a 10).
2. Proporção: cabeça e cabelo ocupam cerca de 14 a 16 pixels de altura; corpo e pernas, o resto. Cabeça grande é a marca do estilo.
3. Direções: baixo, cima e lado. O outro lado sai do espelhamento.
4. Andar: 3 poses por direção (parado, pé esquerdo à frente, pé direito à frente), tocando parado, esquerdo, parado, direito. Para o lado, a segunda passada pode ser o espelho da primeira em alguns casos.
5. Contorno: escuro, com cor (azul escuro ou marrom escuro), fechando a silhueta.

Organize os frames com tags (Frame > Tags > New Tag): walk_down, walk_up, walk_side. Duração de cada frame em Frame > Frame Properties (P), por volta de 130 a 170 ms como ponto de partida; ajuste até o passo bater com a velocidade com que o personagem atravessa um tile.

Sprite de batalha vs overworld

Na batalha, a lógica muda:

O que mais muda é o detalhe. O mesmo personagem que no mapa tem 2 pixels de olho ganha, num retrato ou sprite de batalha, olhos com brilho, sobrancelha e expressão. Desenhe as duas versões como peças diferentes, não amplie a pequena.

Para as criaturas, crie formas originais: misture um animal real com um elemento (pedra, fogo, planta) e simplifique a silhueta até ela ser reconhecível em 64x64 e numa versão pequena de ícone, como 32x32.

Fan game e direitos: o que evitar

A Nintendo e a The Pokémon Company protegem a marca de forma ativa. O caso mais conhecido é o de Pokémon Uranium, fan game gratuito retirado do ar em 2016 depois de notificações dos advogados da Nintendo. Outros projetos e sites da comunidade receberam pedidos parecidos ao longo dos anos.

O que evitar se você quer publicar:

• Usar o nome "Pokémon" no título ou na divulgação.
• Usar criaturas, personagens, músicas ou sprites dos jogos, mesmo redesenhados.
• Extrair tiles de ROM ou de sites de sprites.

O que é seguro: tela de 240x160, tiles de 16x16, sprites de 16x32, paletas limitadas, perspectiva 3/4, mecânicas de coleta e batalha por turnos. Isso é estilo e gênero, não propriedade de ninguém. O post Fan game é legal? detalha o que diferencia homenagem de infração.

Erros comuns

Resolução fora do padrão. Desenhar em 320x180 e chamar de "estilo GBA". Muda o enquadramento e a densidade de tudo. Correção: 240x160 de base, ampliado em escala inteira.

Cores demais por tile. Gradientes com 10 tons numa árvore. Correção: 15 cores no máximo por tile, e na prática 4 a 6.

Personagem com proporção realista. Corpo alto, cabeça pequena. Some o charme. Correção: cabeça ocupando quase metade da altura.

Sprite de batalha ampliado do overworld. Fica borrado ou "quadradão". Correção: desenhe o sprite grande do zero.

Copiar o tileset oficial. Além do problema legal, você não aprende a desenhar. Correção: estude prints, anote proporções, feche a referência e desenhe.

Próximo passo

Monte a tela de 240x160 com o tileset de rota, coloque o personagem de 16x32 no centro e exporte em 4x (File > Export > Export As, com Resize em 400%). Compare lado a lado com um print de um jogo da época: o enquadramento, a quantidade de tiles visíveis e o tamanho do personagem devem bater.

Para entender o estilo retrô de forma mais ampla, além do GBA, o post Pixel Art Retrô: o Estilo dos Jogos Antigos compara as restrições de cada geração.