Tilesets isométricos

Tilesets são elementos essenciais em qualquer jogo, ma maioria dos jogos de RPG o tileset isométrico serve para dar uma noção de profundidade.

Wakfu

No exemplo abaixo utilizei tilesets de tamanho 100x65 px, sendo que a área superior visível é de 100x50 px.

Alterei o modo de formação da imagem do processing para que ela seja formada a partir do centro ao invés do canto superior esquerdo e determinei que o distanciamento entre os tiles seria metade da altura e metade da largura, 50 e 25 pixels respectivamente.

Para entender a formação isométrica eu tive como base uma matriz retangular transformando-a em uma matriz isométrica apenas mudando a forma de visualização dela.

Código:

PImage grama, tile1,tile2,tile3,tile4,pista1,pista2,arv1,arv2;
int x,y;
int[][] mapa={ {1,5,5,5,2},
{6,7,0,8,6},
{6,8,0,0,6},
{6,7,0,7,6},
{4,5,5,5,3}

};

void setup(){
size(600,400);

grama = loadImage("grass.png");
tile1 = loadImage("tile1.png");
tile2 = loadImage("tile2.png");
tile3 = loadImage("tile3.png");
tile4 = loadImage("tile4.png");
pista1 = loadImage("pista1.png");
pista2 = loadImage("pista2.png");
arv1 = loadImage("arvore1.png");
arv2 = loadImage("arvore2.png");
imageMode(CENTER);

for (int i=0;i<5;i++){
x=0;
y+=25;
for (int j=0;j<5;j++){
x+=50;
switch(mapa[i][j]){
case 0: image(grama,350+(i*50-x),75+(j*25+y));
break;
case 1: image(tile1,350+(i*50-x),75+(j*25+y));
break;
case 2: image(tile2,350+(i*50-x),75+(j*25+y));
break;
case 3: image(tile3,350+(i*50-x),75+(j*25+y));
break;
case 4: image(tile4,350+(i*50-x),75+(j*25+y));
break;
case 5: image(pista1,350+(i*50-x),75+(j*25+y));
break;
case 6: image(pista2,350+(i*50-x),75+(j*25+y));
break;
case 7: image(grama,350+(i*50-x),75+(j*25+y));
image(arv1,350+(i*50-x),75+(j*25+y));
break;
case 8: image(grama,350+(i*50-x),75+(j*25+y));
image(arv2,350+(i*50-x),75+(j*25+y));
break;
}
}
}
}