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.









Comentários

Postagens mais visitadas deste blog

Exercício 6 - Bandeira do Brasil

Exercício 10 - Jogo do Pong

Execício 8 - Sensor de distância