Aula 17 - Mapa isométrico

Olá! Na postagem de hoje vou tentar fazer uma explicação de como consegui desenvolver uma aplicação no Processing que apresenta um mapa isométrico utilizando dois tiles pesquisados na internet.

De início precisamos entender o que são mapas isométricos. Numa definição mais ampla, podemos dizer que são representações 2D que acabam se transformando, visualmente falando, em uma representação 3D. Algumas áreas científicas, como por exemplo a Geografia,  utilizam-se desses mapas, por exemplo, para representarem com mais fidelidade características topométricas de determinadas regiões.

Na área de jogos esse tipo de representação traz um apelo visual muito mais interessante, tornando o aspecto semelhante a uma aplicação 3D, porém sem exigir recursos mais pesados.

Para que se chegue a esse resultado de um falso "3D" utilizam-se os chamados Tilesets isométricos que são nada mais nada menos que figuras 2D dispostas de tal forma que sua união geram a "ilusão" 3D tal como mostra a imagem abaixo:

 

 

No meu exemplo, utilizei 02 tilesets para compor meu mapa. No processing carreguei uma matriz de 8 X 8 com tiles de tamanho 60 x 30 que redimensionei no Photoshop. Apesar de não ter entendido muito bem a relação do tamanho dos tiles e as distancias entre eles de modo que formem um todo compacto, sei que é muito importante fazer essa relação matemática para que não se perca tempo multiplicando valores aleatórios e ir experimentando as distâncias.

Os tiles utilizados foram esses:

O exemplo abaixo mostra o quão simples é aplicação, mas confesso o quanto foi difícil chegar a esse resultado.

 Após criar a matriz, percorri seus 64 elementos, posicionando cada tile  contendo a imagem de grama de modo a preencher todo o espaço. Em seguida coloquei a imagem que representava uma estradinha de terra em pontos específicos a fim de determinar um caminho como o desenhado na figura acima.

O código ficou assim:

PImage imgGrama, imgCaminho;

int [][] mapa ={ 
  {1, 1, 1, 0, 0, 0, 0, 0}, 
  {0, 0, 1, 0, 0, 0, 0, 0}, 
  {0, 0, 1, 0, 0, 0, 0, 0}, 
  {0, 0, 1, 1, 1, 1, 0, 0}, 
  {0, 0, 0, 0, 0, 1, 0, 0}, 
  {0, 0, 0, 0, 0, 1, 0, 0}, 
  {0, 0, 0, 0, 0, 1, 1, 1}, 
  {0, 0, 0, 0, 0, 0, 0, 0}};

void setup() {
  imgGrama = loadImage("grama1.png");
  imgCaminho = loadImage("dirt.png");
  size (600,600);
  mostraMapa();
}
  
  void mostraMapa(){
  for (int i=0; i< 8; i++)
    for (int j=0; j<8; j++)

      switch (mapa[j][i]) {
      case 0:
      
        image(imgGrama, 270 - i * 30 + j * 30, 200+(i * 15 + j * 15));// 270 mexe na horizontal de todo o bloco e o 200 no deslocamento vertical 
        break;
        
        case 1:
        image (imgCaminho, 270 - i * 30 + j * 30, 200+(i * 15 + j * 15));

         
      }
}

 Então é isso. Espero que tenham ficado claras e corretas as informações sobre o processo que usei para fazer essa aplicação.

Até a próxima!!!