Mapa de Mundo em Pixel Art: Overworld de RPG

Um pixel art mapa de mundo (o overworld de RPG) funciona numa escala diferente do resto do jogo: uma cidade é um ícone de 1 tile, uma floresta são algumas árvores agrupadas e uma montanha é uma silhueta que bloqueia passagem. Com tiles de 16x16, um conjunto pequeno de terrenos e caminhos bem posicionados, o mapa faz o trabalho principal dele: mostrar ao jogador para onde ir e quanto ele já avançou.

Aqui você desenha os tiles do overworld no Aseprite (terrenos, marcos e caminhos) e monta o mapa no Tiled com terrain sets, que pintam as transições entre terrenos sozinhos. Em LibreSprite, Pixelorama ou Piskel (grátis), o desenho dos tiles segue os mesmos passos.

Pixel art mapa: overworld vs mapa de fase

O mapa de fase (uma cidade por dentro, uma masmorra) tem escala de personagem: uma casa tem portas e janelas do tamanho dele, uma árvore é maior que ele. O overworld tem escala de mundo: o personagem no mapa é maior que a casa.

Essa diferença muda tudo na arte:

Por isso não dá para reaproveitar o tileset da fase no overworld reduzindo a escala. Os tiles precisam ser desenhados para ler de longe.

Escala de overworld: ícone de cidade, não cidade

Cada local importante do mapa é um ícone. Configure um arquivo de trabalho no Aseprite: File > New (Ctrl+N), 128x64 pixels, e em View > Grid > Grid Settings uma grade de 16x16. Ligue a grade com Ctrl+'.

Ícones de local, cada um em 1 tile (16x16) ou num bloco de 2x2 (32x32) para os mais importantes:

1. Vila: duas ou três casas pequenas, cada uma de 5x5 pixels, com telhado de cor forte (vermelho ou azul) e parede clara. Telhado colorido é o que faz a vila saltar no verde do mapa.
2. Cidade grande ou capital (2x2): muralha cinza em volta e 3 ou 4 telhados dentro, mais uma torre.
3. Castelo (2x2): silhueta de torres com bandeira de 2 pixels. A bandeira é o marco.
4. Caverna ou entrada de masmorra: uma boca escura (preto azulado) numa encosta de pedra.
5. Torre isolada, templo, ruína: cada um com uma silhueta própria.

A regra para ícone de local: a silhueta e a cor precisam ser únicas. Se a vila e a cidade se parecem, o jogador não lembra onde fica cada uma. Teste reduzindo o zoom até o tamanho real da tela: se você confunde dois ícones, mude a silhueta de um.

Contorno escuro de 1 pixel nos ícones de local ajuda a separá-los do terreno, que fica sem contorno.

Tiles de terreno: grama, água, montanha e floresta

O terreno é o fundo do mapa e precisa ser calmo: pouco contraste, para os ícones e o caminho chamarem a atenção.

Crie numa camada separada (Layer > New > New Layer, Shift+N):

1. Grama: tile 16x16 em verde base, com 4 a 6 pixels soltos de um verde um tom mais claro e um tom mais escuro. Ligue View > Tiled Mode > Tiled in Both Axes e confira se a repetição não mostra padrão. Faça 2 variações.
2. Água (mar e lago): azul médio com 2 ou 3 traços de ondulação em azul claro. No overworld, a água costuma ser mais saturada que no resto do jogo para separar terra de mar de longe.
3. Floresta: em vez de árvores, um tile de copas: 3 ou 4 bolinhas de verde escuro com o topo em verde médio, ocupando o tile inteiro e encaixando com o vizinho. Floresta no overworld é uma mancha que bloqueia ou desacelera.
4. Montanha: um triângulo de 12 a 14 pixels de base com o lado iluminado em cinza claro, o lado da sombra em cinza escuro e, nas mais altas, 2 a 3 pixels de neve no pico. Montanha é parede: o jogador precisa ler que não passa.
5. Areia, pântano, deserto, neve: um tile base para cada bioma que o jogo tiver.

Transições. Para que a grama encontre a água e a areia sem degrau, cada par de terrenos precisa das peças de borda. Para um terrain set de cantos no Tiled, um conjunto completo de dois terrenos tem 16 tiles. Desenhe primeiro o par mais comum (grama e água), e só depois os outros.

Use uma luz única para o mapa inteiro, de cima e da esquerda: montanhas, florestas e ícones com o lado claro no mesmo lugar. O post sobre como desenhar um tileset no Aseprite mostra a técnica de bordas que encaixam.

Caminhos que guiam o jogador

O caminho é o elemento de design mais importante do overworld. Ele diz por onde andar e para onde ir em seguida.

• Cor de destaque calma: terra clara (bege) ou pedra, mais clara que a grama. Contraste suficiente para ver, sem competir com os ícones.
• Largura constante: 4 a 6 pixels dentro do tile de 16. Um tile de caminho reto horizontal, um vertical, 4 curvas, 4 junções em T e 1 cruzamento cobrem quase tudo.
• Liga marcos, não decora. Todo caminho termina em algum lugar. Caminho que não leva a nada frustra.
• Ponte: onde o caminho cruza água, um tile de ponte. Pontes são ótimos pontos de bloqueio de progressão ("a ponte está quebrada").

Comunicar progressão com o mapa:

1. Coloque o próximo destino visível, mas não alcançável de imediato: o jogador vê o castelo do outro lado do rio antes de conseguir chegar.
2. Use barreiras de terreno (montanha, mar, floresta densa) para separar regiões e libere passagem com eventos do jogo.
3. Varie o bioma por região. Cada nova área com outra paleta (verde, depois areia, depois neve) mostra ao jogador que ele avançou.
4. Marcos grandes (vulcão, torre gigante, árvore enorme) visíveis de longe dão orientação, mesmo sem minimapa.

Desenhar os tiles é a parte que dá para treinar sozinho. Juntar o overworld com as fases, a progressão do jogo, os personagens e a interface, de forma que o mapa realmente conte a história do jogo e combine com o resto da arte, é o trabalho de projeto inteiro que costuma travar quem produz um RPG solo.

Planejar o mapa em regiões, com uma paleta e um marco por região, antes de desenhar os tiles, poupa muita arte refeita depois.

Montando o overworld no Tiled

Exporte os tiles do Aseprite como uma folha só, com File > Export > Export Sprite Sheet (Ctrl+E), em grade de 16x16 e sem espaçamento. No Tiled:

1. Mapa novo. File > New > New Map, orientação Orthogonal, tamanho do tile 16x16. Para um overworld de começo de jogo, 64x48 tiles é um tamanho confortável.
2. Tileset. File > New > New Tileset, aponte para a folha exportada e confirme 16x16. Marque Embed in map se não for reaproveitar o tileset em outros mapas.
3. Terrain sets. No editor do tileset (botão Edit Tileset se estiver no mapa), clique em Terrain Sets na barra de ferramentas e adicione um conjunto. O Tiled oferece três tipos: Corner Set (os tiles se encaixam pelos cantos, bom para terrenos como grama e água), Edge Set (encaixe pelos lados, bom para estradas e cercas) e Mixed Set (cantos e lados, que pede muito mais tiles). Para o overworld, um Corner Set para os terrenos e um Edge Set para os caminhos funcionam bem.
4. Marcar os tiles. Use Add Terrain para criar "grama", "água", "areia" e pinte nos cantos de cada tile de transição qual terreno ocupa aquele canto.
5. Pintar. De volta ao mapa, use o pincel de terreno: você pinta "água" e o Tiled escolhe a borda certa em volta. O modo Terrain Fill Mode, disponível no carimbo, no balde e no preenchimento de formas, escolhe tiles do terrain set que casam com os vizinhos.

Organize em camadas: terreno (grama, água, areia), vegetacao (floresta, montanha), caminhos e uma camada de objetos locais, com um objeto retangular sobre cada cidade ou entrada contendo o nome e o destino como propriedade. É essa camada que o código do jogo lê para saber que o jogador entrou na vila. O post sobre como criar mapas 2D no Tiled detalha camadas, colisão e exportação para a Godot.

Na Godot, o mapa do Tiled entra por plugins de importação mantidos pela comunidade, ou você pode refazer os terrain sets direto no TileSet da Godot, que tem sistema de terrains próprio. Na Unity, o caminho comum é um importador de Tiled da comunidade para gerar o Tilemap; a alternativa é pintar com o Tilemap da Unity e as Rule Tiles do pacote 2D Tilemap Extras.

Erros comuns: mapa sem marco visual

Mapa sem marco. Um mar de grama e floresta sem nada que se destaque. O jogador se perde. Coloque um marco grande por região.

Terreno com mais contraste que os ícones. A grama cheia de detalhe compete com a vila. Terreno calmo, ícones fortes.

Escala misturada. Uma casa do tamanho da fase no meio do overworld. Tudo no mapa segue a escala de ícone.

Caminho que não leva a lugar nenhum. Todo caminho termina num destino.

Floresta de árvores individuais. No overworld, floresta é mancha.

Ícones de local parecidos. Vila e cidade com a mesma silhueta.

Próximo passo

Desenhe o conjunto mínimo (grama, água, floresta, montanha, caminho, vila e castelo), monte uma região de 32x24 tiles no Tiled com o terrain set e peça para alguém dizer, sem explicação, para onde iria primeiro. Se a pessoa acertar, o mapa está comunicando. Para ver onde o overworld entra no projeto, o post sobre como fazer um jogo de RPG mostra o resto das peças.