Criação de um mapa com tileset isométrico

Na construção do mapa de um jogo, precisamos nos questionar como ele será apresentado na tela, levando sempre em consideração a dimensão dos tiles (ou seja, as imagens) que o compõem.

Para o exercício da aula sobre conjuntos, foi construído com a ajuda de uma matriz uma imagem com diferentes tilesets. Dependendo do valor que havia na matriz, era carregada uma imagem diferente.

Para o exercício passado para casa, foi pedido que construíssemos no Processing uma imagem utilizando um tileset isométrico.

Abaixo, segue o código comentado explicando cada parte dele e em seguida a imagem resultante.


//variáveis que irão armazenar as imagens utilizadas nesta atividade
PImage imgroadNorth, imgroadSouth, imgroadWest, imgroadEast;


//montagem da matriz que irá inserir os elementos da imagem
int[][]mapa = {{2,2,2,2,2,2,2,2},
               {3,1,0,1,0,0,1,0},
               {0,2,0,0,0,1,3,0},
               {0,3,0,2,1,0,0,0},
               {0,2,0,3,0,0,1,0},
               {0,0,1,2,0,2,0,0},
               {0,1,0,2,0,2,1,0},
               {1,1,1,1,1,1,1,1}};
             

void setup(){
  size(800, 420);
}

void draw(){
  //arquivos usados: olhe o nome depois de "img"
  //tamanho das imagens: 100 x 65
  imgroadNorth = loadImage("roadNorth.png");
  imgroadSouth=  loadImage("roadTSouth.png");
  imgroadWest= loadImage("roadTWest.png");
  imgroadEast = loadImage("roadEast.png");
 
  //para fazer a imagem, foi feito um laço dentro de outro laço que percorrem a matriz
  //a matriz é percorrida de coluna em coluna de forma sequencial.
  //Terminada uma coluna, é passado para a próxima.
  for(int i=0; i<8; i++){
    for(int j=0; j<8; j++){
      /*ao percorrer a matriz, é considerado a numeração de cada índice
      para que sejam escolhidas as imagens que serão desenhadas na tela*/
      switch(mapa[j][i]){
        case 0:
        /*para a localização de cada imagem, foi considerado tanto o formato da figura que
        ela possui quanto suas dimensões, além das dimensões da tela.
        Além disso, era necessário considerar o posicionamento da próxima figura
        na tela. Para cada elemento, ele soma na posição Y um quarto da altura
        da imagem e na posição X ele diminui um quarto da largura da imagem.
        Claro, isto funciona nas dimensões destas imagens.
        */
        image(imgroadNorth, i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 1:
        image(imgroadSouth,  i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 2:
        image(imgroadWest,  i*50-j*50+width/2-50, j*25+i*25);
        break;
       
        case 3:
        image(imgroadEast,  i*50-j*50+width/2-50, j*25+i*25);
        break;
      }
    }
  }
}