Tarefa 9 - Aula 10

Ulisses Silva
23 de set. de 2018
2 min de leitura

Desenvolver e explicar uma aplicação que apresenta um mapa isométrico com base em dois tiles à sua escolha.

Primeiramente pesquisei conjuntos de tiles isométricos para escolher qual usar para a montagem do mapa.

Como a maioria dos conjuntos de tiles tinham mais de um tile, resolvi ir além dos dois tiles que a tarefa pedia. A imagem ao lado foi a escolhida para essa tarefa.

Escolhida a imagem, o próximo passo foi editá-la para separar os tiles que eu iria usar, e calcular seus tamanhos em pixel para facilitar na hora de programar.

À esquerda seguem alguns dos tiles escolhidos depois de recortados e editados no photoshop.

Como sempre usando o Processing, o primeiro passo na programação, foi criar uma matriz que tivesse o tamanho do mapa que eu iria fazer. Escolhi então fazer um mapa 10 x 10 e criei uma matriz com esse tamanho do tipo "int", ou seja, de números inteiros.

Depois disso determinei o tamanho da tela, ela precisava ser maior do que a área ocupada pelos 10 tiles. Como eu já tinha os tamanhos em pixels dos tiles, usando a calculadora foi fácil encontrar o tamanho ocupado pelos tiles, considerando 10 vezes o tamanho horizontal e 10 vezes o tamanho vertical dos tiles. Decidi então usar a configuração de 740 x 480, pois deixaria uma boa margem entre os tiles e a tela.

Após carregar cada imagem com o comando "loadImage", faltava apenas criar o procedimento que desenharia os tiles corretamente na tela. Criei então o procedimento "cenario", que não recebia parâmetro algum, apenas desenharia os tiles com base no tamanho da matriz.

Dentro desse procedimento, utilizei um código do tipo "scanline" para que ele percorresse cada elemento dentro da matriz. E dentro desse laço de "scanline" coloquei um "switch" que tinha como casos os números de 0 à 11, e em cada caso ele desenharia um dos tiles correspondentes àquele número. Para tanto, foi necessário calcular qual seriam as posições X e Y de cada tile. Baseado num número que peguei a partir do ponto central da tela, cada X e cada Y era aumentado e decrescido de um valor baseado na posição da imagem na matriz, pegando como base as metades da largura e altura dos tiles.

Feito o procedimento, foi apenas questão de organizar as matrizes para "montar" o cenário como eu quisesse. Abaixo segue uma possível combinação de cenário.