Atividade 10 - Mapa Isométrico

O enunciado da atividade pede que façamos um mapa isométrico, escolhendo dois tiles e explicando a condição de adjacência desse mapa:

"explicar a condição de adjacência de um mapa isométrico, com base no desenvolvimento de uma aplicação que emprega dois tiles à sua escolha."

O primeiro passo é entender o que é um mapa isométrico!

Sonic 3d blast(1996)

Como vemos na figura acima, um mapa isométrico utiliza da perspectiva isométrica para criar uma falsa impressão de um ambiente de três dimensões(3D) com sprites em duas dimensões(2D). Esse efeito é chamado de 2.5D.

01 - Escolhendo os sprites!
Primeiro iremos escolher os sprites que serão usados para a composição do mapa!
Utilizaremos esses:

Clique aqui para fazer o donwload do mapa

Escolhi esses sprites porque foi os que eu mais gostei do site opengameart.org, mas você pode escolher qualquer sprite, contanto que seja isométrico é claro.

Inicialmente utilizaremos só dois bloquinhos desse sprite sheet. Por padrão esses dois sprites vieram na dimensão 132 x 99.

02 - Condição de adjacência
Primeiro vamos testar nossos sprites com o código feito em sala de aula:

Basicamente vemos que por conta da perspectiva isométrica dos sprites, um código que constrói a linha(j) e a coluna(i) em x e y, respectivamente, não funciona para esse tipo de mapa, tanto a linha como a coluna vão variar nos dois pares ordenados(x,y) para encaixar os bloquinhos na diagonal. Então, nosso algoritmo scanline feito na aula vai sofrer algumas alterações para que seja possível estabelecer uma perspectiva isométrica correta.
Para estabelecer os valores da variação na diagonal vamos utilizar o photoshop! 
OBS: É importante ressaltar que nas preferências do photoshop estabelecemos a unidade padrão como pixel.
Primeiro vamos ver os valores para a variação na nossa linha(j).

Linha(j) / Coluna (i)

Vamos encaixar os dois sprites da maneira que queremos montar nosso mapa isométrico:

Os sprites deverão se organizar dessa forma na linha(j). Agora iremos, com o auxílio da régua do photoshop, calcular a variação entre as extremidades dos blocos, tanto na horizontal como na vertical.
- Vertical:

Logo, a variação entre os dois blocos na vertical é de 165 - 133 = 32 pixels.

- Horizontal:

A variação entre os dois blocos na horizontal é de 265 - 201 = 64 pixels.

Agora que temos as variações dos valores na vertical e na horizontal vamos aplicar no código, utilizando 900 x 900 como proporção da tela. Para os dois casos dos sprites serão os mesmo códigos em x e y da função image:

- x: 350 + (64*j)

- y: 200 + (32*j)

OBS: os valores 350 e 200 somados aos pares x e y, respectivamente, tem o objetivo de apenas de centralizar a matriz dos sprites. Se retirarmos esses valores, a matriz vai ser gerada só mais pra esquerda e pra cima.

Então temos o resultado:

Nota-se que foi gerado só uma linha(j), já que ainda não implementamos o resto do código!

Para gerar as colunas(i) iremos fazer o mesmo processo, montar no photoshop para então tirar as medidas:

- Vertical:

A variação entre os dois blocos na vertical é de 250 - 218 = 32 pixels.

- Horizontal:

A variação entre os dois blocos na horizontal é de 283 - 219 = 64 pixels.

Agora iremos apenas completar nosso código:

- x: 350 - (64*i) + (64*j)

- y: 200 + (32*i) + (32*j)

Agora você me pergunta...

- Mas porquê a coluna(i) do x é negativa???

Simples jovem gafanhoto... Observe a imagem:

De acordo com a ordem de leitura que usamos no computador, para direita o x é positivo e para baixo o y é positivo. Logo, se somamos + 64*j para gerar linhas para direita, precisamos diminuir - 64*i para gerar colunas para esquerda!

Depois de implementar o código teremos o seguinte resultado:

03 - Mais sprites!

Para deixar o mapa mais bonito, vamos carregar mais sprites no processing e criar mais cases dentro do nosso switch, substituindo na matriz criada. 

Então temos o seguinte resultado:

DOWNLOAD DO CÓDIGO