Exercício 13 - Tileset
Neste exercício será necessário discutir a criação de um mapa a partir de um tileset isométrico. Irei utilizar os tiles do jogo Hartacon(o mesmo apresentado sem sala) para servir como base:
A logica para se fazer os tiles isométricos, imaginando como uma matriz, o primeiro tile tem uma posição, o seu próximo na escala y terá que ficar alguns pixels mais baixo, e assim sucessivamente, e na escala x cada tile terá que ficar alguns pixels mais á esquerda ou á direita.Para ficar mais fácil de entender, analisando este tile abaixo, altura de sua base toda mede 50 px e sua largura mede 100 px:
Ao fazer o próximo tile é possível perceber uma regra de mudança de posição, como mostra a figura abaixo, percebemos que é acrescentado horizontalmente 50px, ou seja, a metade da largura e 25px verticalmente, ou seja, a metade da altura:
Para explicar na prática como funciona, criei uma aplicação no processing utilizando alguns tiles deste do jogo Hartacon, segue o código:
int iMatriz=10; int jMatriz=10; int x; int y; void setup() { size(1000, 700); PImage imgGrama, imgGrama2, imgPedra, imgPedra2; int[][] mapa = {{0, 0, 0, 0, 0, 0, 0, 0, 3, 3}, {0, 1, 1, 1, 0, 0, 0, 0, 3, 3}, {0, 1, 1, 1, 0, 1, 1, 1, 3, 3}, {0, 1, 1, 1, 0, 1, 1, 1, 3, 3}, {0, 0, 0, 0, 0, 0, 0, 0, 3, 3}, {0, 0, 0, 0, 0, 0, 0, 0, 3, 3}, {0, 0, 0, 0, 0, 0, 0, 0, 3, 3}, {2, 2, 2, 2, 2, 2, 2, 2, 3, 3}, {2, 2, 2, 2, 2, 2, 2, 2, 3, 3}, {2, 2, 2, 2, 2, 2, 2, 2, 3, 3}}; imgGrama = loadImage("Grama.png"); imgGrama2 = loadImage("Grama2.png"); imgPedra = loadImage("Pedra.png"); imgPedra2 = loadImage("Pedra2.png"); translate(width/2, 0); for (int i = 0; i<iMatriz; i++) { x=0; y+=25; for (int j = 0; j<jMatriz; j++) { x+=50; switch(mapa[j][i]) { case 0: image(imgGrama, i*50-x, j*25+y); break; case 1: image(imgGrama2, i*50-x, j*25+y); break; case 2: image(imgPedra, i*50-x, j*25+y); break; case 3: image(imgPedra2, i*50-x, j*25+y); break; } } } }
A unica diferença para um tileset simples é nas variáveis x e y , elas servirão para o acréscimo da posição dos tiles, como dito anteriormente é acrescentado a metade da largura do tile(50px), no caso atribuído ao x, e metade da altura do tile(25px), no caso atribuído ao y. Foi utilizado a função translate para alterar o a posição 0 do x para o centro da tela, assim o tile fica centralizado.
Download:Arquivo .pde com os tiles.
Comentários
Postar um comentário