Ativ 9. Tilesets Isométricos
O enunciado dessa atividade foi:
Desenvolver e explicar uma aplicação que apresenta um mapa isométrico com base em dois tiles à sua escolha
Esse foi meu resultado final |
No caso, acabei gostando da atividade e usando 20 tiles que encontrei no site https://opengameart.org/. Esse tileset foi desenvolvido por Daniel Stephens e é chamado 'Unknown horizons', e o link direto para ele no site é esse aqui!
Então, para que entendamos como funciona o sistema dessa forma, precisamos entender como a matriz base funciona.
Ela funciona desse modo, como se o eixo da matriz tivesse sido virado totalmente a 45º. Entendendo esse conceito da inclinação fica bem melhor de trabalhar com a matriz base que foi desenvolvida em sala.
A diferença dos tilesets isométricos para tilesets comuns é justamente a forma de losango que os tiles tem, o que faz com que deva haver sobreposição nos 2 eixos combinados.
No caso, os tiles que escolhi tinham dimensões de 64x64, então a sobreposição no eixo x foi proporcional a 32 pixels e no eixo y proporcional a 16 pixels para que ficasse ideal o posicionamento de todos os tiles.
A fórmula geral da posição ficou, então, (width/2 +(- i + j)*32, 35+ (i + j)*16)
A diferença dos tilesets isométricos para tilesets comuns é justamente a forma de losango que os tiles tem, o que faz com que deva haver sobreposição nos 2 eixos combinados.
No caso, os tiles que escolhi tinham dimensões de 64x64, então a sobreposição no eixo x foi proporcional a 32 pixels e no eixo y proporcional a 16 pixels para que ficasse ideal o posicionamento de todos os tiles.
A fórmula geral da posição ficou, então, (width/2 +(- i + j)*32, 35+ (i + j)*16)
Depois que compreendi como funcionava o posicionamento, a maior dificuldade encontrada foi lidar com todas as curvas que havia colocado no cenário, pois cada curva possui um tile específico, então tem pelo menos 4 tiles que foram usados uma única e específica vez.
Gostei muito do resultado final e do processo. Espero que tenha ficado clara a explicação!
Aqui está o link para o código completo!
Aqui está o link para o código completo!
Comentários
Postar um comentário