Tarefa da aula 10: Tesselação
Objetivo:
Relacionar o conceito de tesselação ao estabelecimento de mapas isométricos, com base no desenvolvimento de uma aplicação que empregue dois ou mais tiles distintos, à sua escolha.
A tesselação é uma técnica de recobrimento de uma superfície usando polígonos como unidades básicas e arrumado-os de modo que não haja espaço em branco (não coberto) na superfície. É uma técnica bastante usada em mosaicos, tapeçaria e ilustração. Alguns exemplos mais comuns são encontrados na arquitetura islâmica e em ilustrações do artista holandês M.C. Escher (1898-1972).
Aqui, com o conceito de Tesselação em mente e aproveitando os códigos passados em sala, vamos montar uma matriz para receber uma imagem através de um Switch Case e montar um mapa isométrico:
Perceba que na tesselação não há sobreposição dos elementos, mas vamos usar apenas parte do conceito para arrumar nosso tile em uma superfície plana. É importante lembrar aqui que para isso funcionar eu usei uma variável (tSbor) que retira 17 pixels (no meu caso) do eixo Y dos sprite na hora de desenhá-los. Se esse desconto não fosse feito, o resultado seria este:
Pelo menos seria mais como uma tesselação exata, mas como nós precisamos que os tiles se sobreponham um pouco para formar um mapa plano, é preciso fazer esse desconto no posicionamento dos sprites, para termos o resultado abaixo:
Perceba também que os tiles estão com um pequeno espaço entre eles, e no meu caso, eu não quero isso. Logo, alterei as variáveis de largura e altura para retirar essa folga. A lógica é que como a largura é maior que altura, eu o diminuí mais do que na variável da altura. O problema, é que como meus sprites não estão muito bem recortados, eu tive que ir testando os valores até achar os que me agradassem. -2 para a largura e -1 para a altura bastaram:
A partir daqui, sabendo que o código funciona, já é possível adicionar mais sprites e alterar a nossa matriz:
O resultado será este:
Agora basta posicionar os sprites de uma forma mais inteligente (eu podia ter feito isso desde o começo...):
Com tudo ajustado no código temos esse resultado:
Extras:
Com tudo funcionando, é hora de adicionar mas sprites!! Mas agora, temos que notar uma coisa extremamente importante, temos que ter cuidado quando trabalhamos com sprites de alturas diferentes. Claro que o ideal é pensar nesse tipo de coisa quando se desenha (ou baixa da internet) os sprites, mas já que eu não tive esse cuidado, tive que concertar no código.
Primeiro, como eu queria criar túneis (mostrados na primeira imagem), eu tive que lembrar de descontar ainda mais a altura dos novos sprites. Mas antes vamos ver um caso de eu não fazer isso com o código abaixo (não que eu não tenha feito assim da primeira vez... imagina...):
Uma coisa importante agora, como na chamada do switch o j do meu laço é chamado primeiro, para que os sprites sejam sobrepostos da maneira correta, os vetores da minha matriz tem que ser escritos de trás pra frente, do contrário os sprites da entrada e saída do meu túnel ficariam trocados, e os próprios tuneis em posições erradas (mas é claro que eu lembrei disso depois de ver os sprites trocados...).
Minha matriz agora fica assim...
O que precisamos fazer é simplesmente descontar mais ainda a altura dos novos sprites, como expliquei ante. Para isso eu preferi criar uma variável chamada tElevado com um valor de alguns pixels para diminuir depois mais facilmente.
Uma dica: não escolha esse valor na tentativa e erro. Descubra qual a diferença de altura entre os sprites: no eu caso foi de 32 pixels (altura do maior, que era 133 pixels, menos a altura do menor, de 101). Agora o código fica assim:
No "case 3" eu ainda tive que adicionar 6 pixeis à conta (sim, meus sprites estavam todos zoados...), mas o importante é que tudo deu certo e o resultado foi este:
Abaixo o código completo:
Comentários
Postar um comentário